/* The Euro — design tokens
   Three palettes, one switch. Sky (light blue and gold) is the default since 6 Oct 2026.
   Riviera (the marine blue of 28 Sep) stays on data-palette="riviera" for comparison, and Forest
   (the original green) on data-palette="forest", until the switch is removed.
   Every color in the site must come from these variables. Nothing hardcoded. */

:root,
[data-palette="sky"] {
  /* Palette C — Sky (light blue and gold), the default */
  --forest:     #1A64C8;   /* the action blue: buttons, chips, badges, links (name kept from Forest) */
  --forest-2:   #1452A6;   /* hover on the action blue */
  --navy:       #0F2B4C;   /* headings, the wordmark, the one deep band */
  --bone:       #FFFFFF;   /* page canvas */
  --brass:      #B98A32;   /* gold, scarce: ornaments, stars, the chosen note's rule */
  --gold-2:     #E8D5A8;   /* pale gold, the heroes' eyebrows */
  --white:      #FFFFFF;   /* surfaces, inputs */
  --card:       #F7FAFE;
  --sky-1:      #EEF5FD;   /* light blue grounds: the hero, the footer, callouts */
  --sky-2:      #D8E8FA;   /* a stronger tint: the ticker, tags */
  --sky-3:      #9FC3EC;   /* ornament lines */
  /* tints */
  --stone:      #DCEAF9;   /* photo placeholders, water on the maps */
  --terracotta: #F6EAD2;   /* sand */
  --olive:      #E1F0F2;   /* pale aqua */
  --linen:      #F2F7FE;   /* the cheapest row */
  /* text */
  --ink:        #13283F;
  --graphite:   #3B4F65;
  --pewter:     #5E7084;
  --moss:       #D5E2EF;   /* hairlines */
  /* veils over photos, and the soft glow round the hero arch */
  --veil-end:   rgba(15, 43, 76, .55);
  --glow:       rgba(26, 100, 200, .16);
}

[data-palette="riviera"] {
  /* Palette B — Riviera (marine and coral), the default from 28 Sep to 6 Oct 2026 */
  --forest:     #1C3A4F;
  --forest-2:   #142C3D;
  --navy:       #1C3A4F;
  --bone:       #F6F0E3;
  --brass:      #D9714E;
  --gold-2:     #F0C2AE;
  --white:      #FFFFFF;
  --card:       #FBF8F0;
  --sky-1:      #EFE7D6;
  --sky-2:      #E6DAC2;
  --sky-3:      #C9B898;
  --stone:      #D5E3EC;
  --terracotta: #F3E4C8;
  --olive:      #F5D9CF;
  --linen:      #FBF7EE;
  --ink:        #1F1F1F;
  --graphite:   #3A3A3A;
  --pewter:     #6E6E6E;
  --moss:       #CDCBBF;
  --veil-end:   rgba(28, 58, 79, .55);
  --glow:       rgba(28, 58, 79, .14);
}

[data-palette="forest"] {
  /* Palette A — Forest and brass (the original green) */
  --forest:     #223B2E;
  --forest-2:   #1A2E24;
  --navy:       #223B2E;
  --bone:       #F4EFE4;
  --brass:      #B3924F;
  --gold-2:     #E3D3AE;
  --white:      #FFFFFF;
  --card:       #FBF8F0;
  --sky-1:      #ECE6D7;
  --sky-2:      #E1D9C5;
  --sky-3:      #C4B791;
  --stone:      #E7E1D3;
  --terracotta: #F0D9C8;
  --olive:      #DDE3CC;
  --linen:      #F9F6EE;
  --ink:        #1F1F1F;
  --graphite:   #3A3A3A;
  --pewter:     #6E6E6E;
  --moss:       #CFC7B2;
  --veil-end:   rgba(34, 59, 46, .55);
  --glow:       rgba(34, 59, 46, .14);
}

:root {
  /* type (8 Oct 2026, Sharod picked option C of prototypes/type-picker.html): Libre Caslon Text for
     headlines, Work Sans for the rest. Before: Playfair Display and Inter (6 Oct). Caslon has 400, 700 and
     italic 400, so a 500 headline renders at 400. */
  --serif: "Libre Caslon Text", "Cormorant Garamond", Georgia, serif;
  --sans:  "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* type scale (8 Oct 2026): eight sizes, three line heights, two trackings, and every rule in the
     stylesheets uses them. Before, 20 sizes and 23 line heights had crept in, half the text under 14px. */
  --fs-xs:   12px;                        /* caps labels, tags: the only text under 14px */
  --fs-sm:   14px;                        /* meta, captions, buttons */
  --fs-md:   16px;                        /* body and card text */
  --fs-lg:   18px;                        /* ledes */
  --fs-xl:   22px;                        /* card names, subheads */
  --fs-2xl:  28px;                        /* small headings, big names */
  --fs-h2:   clamp(28px, 3.2vw, 40px);    /* section headings */
  --fs-h1:   clamp(36px, 4.6vw, 56px);    /* page headlines (56 at most since the move to Caslon, which sets wider) */
  --lh-tight: 1.12;                       /* headings */
  --lh-snug:  1.3;                        /* UI, short lines */
  --lh-body:  1.55;                       /* reading */
  --track-display: -.02em;                /* serif headlines */
  --track-caps:    .1em;                  /* small capitals and labels */
  /* motion (8 Oct 2026): one curve for things arriving (the headline, the hero), one for hovers, three durations */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-hover: cubic-bezier(.25, 1, .5, 1);
  --dur-fast: 150ms;    /* colour, borders */
  --dur-med:  250ms;    /* small moves, presses */
  --dur-slow: 400ms;    /* photos easing in on hover */
  /* the older names, kept as aliases */
  --t-caption: var(--fs-xs); --t-body-sm: var(--fs-sm); --t-body: var(--fs-md); --t-lede: var(--fs-lg);
  --t-subheading: var(--fs-xl); --t-heading-sm: var(--fs-2xl); --t-heading: 40px; --t-heading-lg: 50px; --t-display: 60px;
  --track-serif: var(--track-display);
  --track-mark:   .34em;    /* wordmark only */

  /* shape (6 Oct 2026): content sits on the page, not in rounded boxes. Photos get a small radius
     or an arch top; panels that hold a form get a modest one; buttons and chips stay pills. */
  --r-img:   6px;
  --r-card:  6px;
  --r-panel: 14px;
  --r-hero:  14px;
  --r-input: 10px;
  --r-pill:  100px;
  /* an arch top for a 4:5 photo: a semicircle across the width, square-ish feet */
  --r-arch:  50% 50% var(--r-img) var(--r-img) / 40% 40% var(--r-img) var(--r-img);

  /* layout */
  --page:        1200px;
  --gutter:      24px;
  --section-gap: 80px;
  --band-pad:    96px;
  --footer-top:  72px;
  --measure:     60ch;

  /* ornaments, as masks: the colour comes from background-color, so no colour lives here */
  --orn-frieze:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M4 15.4V10a8 8 0 0 1 16 0v5.4M0 15.4h24' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
  --orn-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14A14 14 0 0 1 28 14Z' fill='black'/%3E%3C/svg%3E");
  --orn-arch:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M2 15V7a5 5 0 0 1 10 0v8' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M6 0.6h2l-.4 2.2h-1.2z' fill='black'/%3E%3Cpath d='M0 15.2h14' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
}