/* GEMCAP design tokens - the single source for every page. Mirrors the front matter of ../DESIGN.md
   (tools/tokens/check.py asserts they agree). Fluid sizes are written for 360px -> 1440px viewports. */

:root {
  /* ---------- color: brand (approved 2026-10-03) ---------- */
  --color-gold: #F7B500;            /* action: the main button, highlights, the Miami pin. Never text on light. */
  --color-gold-hover: #E6A800;
  --color-gold-press: #D69C00;
  --color-blue: #1559D6;            /* brand: logo, links, icons, route lines, secondary buttons */
  --color-blue-hover: #1049B8;
  --color-blue-press: #0D3E9E;
  --color-navy: #0B1F44;            /* ink and the dark bands */
  --color-navy-deep: #071634;

  /* ---------- color: roles ---------- */
  --color-primary: var(--color-gold);
  --color-on-primary: var(--color-navy);        /* 8.9:1 */
  --color-accent: var(--color-blue);
  --color-on-accent: #FFFFFF;                   /* 6.1:1 */
  --color-ink: var(--color-navy);               /* 16.2:1 on canvas */
  --color-ink-muted: #4A5A78;                   /* 6.9:1 canvas, 6.5:1 surface-1, 6.0:1 surface-2 */
  --color-link: var(--color-blue);              /* 6.1:1 canvas, 5.7:1 surface-1 */
  --color-canvas: #FFFFFF;
  --color-surface-1: #F4F7FB;                   /* alternate section band */
  --color-surface-2: #E9EFF8;
  --color-tint-blue: #E8F0FD;                   /* badge / selected chip fill (blue text on it 5.3:1) */
  --color-tint-gold: #FFF4D6;                   /* soft highlight fill (navy text on it 14.8:1) */
  --color-hairline: #DDE4EE;                    /* dividers, card borders */
  --color-border-input: #7A87A0;                /* form controls: 3.6:1 canvas, 3.4:1 surface-1 (WCAG 1.4.11) */
  --color-inverse-canvas: var(--color-band);
  --color-card: #FFFFFF;                        /* cards, the form card, the hero block: a raised surface */
  --color-field: #FFFFFF;                       /* inputs, chips, radio and checkbox wells */
  --color-on-blue: #FFFFFF;                     /* text and marks on a GEMCAP Blue fill (tiles, accent button) */
  --color-tint-blue-press: #D3E2FB;             /* the pressed state of tint-blue */
  --color-success-tint: #E6F4EE;
  --color-band: var(--color-navy);              /* the navy bands: Why Choose title, the CTA band */
  --color-band-deep: var(--color-navy-deep);    /* the deepest bands: footer, the founder's statement */
  --color-wash: rgb(11 31 68 / 0.06);           /* hover wash on menu items */
  --hero-filter: none;                          /* the home hero photo's treatment (none today in both themes) */
  --hero-veil: none;                            /* a still layer over the hero photo; none in both themes today */
  --hero-bg-m: #1D67C2; --hero-bg-a: #A9CCEB;   /* the hero's colour until its photo paints */
  --creds-tile-1-bg: var(--color-navy); --creds-tile-1-fg: #FFFFFF;   /* credentials strip, Tiles look */
  --creds-tile-2-bg: #1559D6; --creds-tile-2-fg: #FFFFFF;
  --color-inverse-ink: #FFFFFF;                 /* 16.2:1 */
  --color-inverse-muted: #B7C3DA;               /* 9.2:1 on navy */
  --color-success: #0E7A50;                     /* 5.4:1 */
  --color-error: #B42318;                       /* 6.6:1 */
  --color-focus: var(--color-blue);             /* 2px ring + 2px offset on light */
  --color-focus-inverse: var(--color-gold);     /* on navy bands */
  --color-selection: #CFE0FC;
  /* marks drawn as background images (a data URI cannot read a variable, so each theme carries its own) */
  --icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231559D6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231559D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-check-on-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* ---------- type: faces (fonts.css) ---------- */
  --font-text: 'Archivo Text', 'Archivo Text Fallback', Arial, sans-serif;
  --font-display: 'Archivo Display', 'Archivo Display 112 Fallback A', 'Archivo Display 112 Fallback B', 'Arial Black', sans-serif;
  --display-weight: 800;
  --display-stretch: 112%;          /* Archivo SemiExpanded on phones; Expanded (125%) from 768px */
  --display-style: normal;

  /* ---------- type: scale (role names, not values) ---------- */
  --text-display: clamp(2.125rem, 1.4rem + 3.1vw, 4.25rem);   /* home hero H1: 34 -> 68 */
  --text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);                 /* page H1: 32 -> 48 */
  --text-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.625rem);      /* section H2: 26 -> 42 */
  --text-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);     /* titles: 19 -> 22, text face 700 */
  --text-figure: clamp(1.75rem, 1rem + 3.4vw, 3rem);          /* proof numbers: 28 -> 48 (2 columns fit at 320) */
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);       /* 17 -> 20 */
  --text-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16 -> 17 */
  --text-label: 1rem;                                          /* buttons, inputs (16px: no iOS zoom) */
  --text-small: 0.875rem;                                      /* meta, captions, footer */
  --text-overline: 0.8125rem;                                  /* credential badges only (uppercase) */

  --leading-display: 1.04;
  --leading-heading: 1.1;
  --leading-title: 1.25;
  --leading-lead: 1.5;
  --leading-body: 1.6;
  --leading-small: 1.45;
  --tracking-display: -0.01em;
  --tracking-overline: 0.06em;
  --measure: 68ch;

  /* ---------- space (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);       /* 56 -> 104 between sections */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);              /* page side padding: 16/17 -> 40 */
  --container: 1200px;
  --container-narrow: 760px;

  /* ---------- shape ---------- */
  /* one 4px progression (Gate 2): the bigger the surface, the rounder; buttons are pills like the nav */
  --radius-xs: 2px;     /* hairline marks */
  --radius-sm: 4px;     /* checkboxes, small tags */
  --radius-md: 8px;     /* inputs, chips, selects */
  --radius-lg: 12px;    /* cards, the form card, guide stages */
  --radius-xl: 16px;    /* media frames, menu tiles, dropdown items */
  --radius-2xl: 20px;   /* the hero text block */
  --radius-3xl: 24px;   /* the nav bar, dropdowns, sheets, the phone action bar */
  --radius-pill: 999px; /* buttons, the nav pill, round icon buttons */
  --slant: 25deg;       /* the logo's angle: the brand's one graphic device (DESIGN.md > Shapes) */

  /* ---------- elevation (navy-tinted, offset + soft blur) ---------- */
  --shadow-1: 0 1px 2px rgb(11 31 68 / 0.06), 0 2px 8px rgb(11 31 68 / 0.06);
  --shadow-2: 0 4px 12px rgb(11 31 68 / 0.08), 0 12px 32px rgb(11 31 68 / 0.10);

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 160ms;
  --dur-fast: 200ms;
  --dur-sheet: 320ms;
  --dur-reveal: 560ms;

  /* ---------- controls ---------- */
  --control-h: 48px;    /* buttons and inputs; touch target >= 44px */
  --header-h: 64px;     /* 76px from 1024px */
}

@media (min-width: 768px) {
  :root {
    --font-display: 'Archivo Display', 'Archivo Display 125 Fallback A', 'Archivo Display 125 Fallback B', 'Arial Black', sans-serif;
    --display-stretch: 125%;
  }
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}

/* ---------- dark theme (2026-10-05, TMC's scheme): follows the visitor's system; the nav's sun/moon button pins either
   theme (html[data-theme], localStorage "gemcap-theme", set before paint in Base.astro). Only the roles change - the
   components never branch on the theme. Navy-deep page, white ink, gold stays the action, the blue turns lighter
   for text and marks (#7DA7FF: 7.5:1 on the page, 6.6:1 on a card) and the fills that carry white keep the brand blue. Contrast:
   ink 16.4:1, muted 8.7:1 on the page; muted 7.6:1 on a card; input borders 4.1:1 on a field. ---------- */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #081633;
    --color-surface-1: #0C1E41;
    --color-surface-2: #15294F;
    --color-card: #0F2249;
    --color-field: #0A1A3B;
    --color-ink: #F2F5FA;
    --color-ink-muted: #A8B5CE;
    --color-blue: #7DA7FF;
    --color-blue-hover: #9ABBFF;
    --color-blue-press: #B7CFFF;
    --color-on-blue: #071634;
    --color-on-accent: #071634;
    --color-tint-blue: #163468;
    --color-tint-blue-press: #1E4384;
    --color-tint-gold: #2F2709;
    --color-hairline: #22365C;
    --color-border-input: #6B7C9E;
    --color-band: #10295A;
    --color-band-deep: #040B1C;
    --color-success: #4CC38A;
    --color-success-tint: #0D3326;
    --color-error: #FF8A7A;
    --color-selection: #2A4C8C;
    --color-wash: rgb(255 255 255 / 0.07);
    --hero-filter: none;
    --hero-veil: none;   /* the night photo as it is (Arthur: no dark film) */
    --hero-bg-m: #0A1B3D; --hero-bg-a: #0E2A55;
    --creds-tile-1-bg: #1559D6; --creds-tile-1-fg: #FFFFFF; --creds-tile-2-bg: #F7B500; --creds-tile-2-fg: #0B1F44;
    --blue-base: #1559D6;   /* fills that carry white (the credentials cells, the blue band) keep the brand blue */
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.25);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
    --icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DA7FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DA7FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --icon-check-on-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071634' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    /* the nav's glass and panels (nav.css) */
    --frost-bg: rgb(8 22 51 / 0.78);
    --frost-line: rgb(255 255 255 / 0.10);
    --panel-bg: #0F2249;
    --highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --nav-shadow: 0 6px 16px -4px rgb(0 0 0 / 0.45), 0 2px 4px -1px rgb(0 0 0 / 0.3);
    --nav-shadow-3: 0 18px 40px -12px rgb(0 0 0 / 0.6), 0 6px 12px -4px rgb(0 0 0 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-canvas: #081633;
      --color-surface-1: #0C1E41;
      --color-surface-2: #15294F;
      --color-card: #0F2249;
      --color-field: #0A1A3B;
      --color-ink: #F2F5FA;
      --color-ink-muted: #A8B5CE;
      --color-blue: #7DA7FF;
      --color-blue-hover: #9ABBFF;
      --color-blue-press: #B7CFFF;
      --color-on-blue: #071634;
      --color-on-accent: #071634;
      --color-tint-blue: #163468;
      --color-tint-blue-press: #1E4384;
      --color-tint-gold: #2F2709;
      --color-hairline: #22365C;
      --color-border-input: #6B7C9E;
      --color-band: #10295A;
      --color-band-deep: #040B1C;
      --color-success: #4CC38A;
      --color-success-tint: #0D3326;
      --color-error: #FF8A7A;
      --color-selection: #2A4C8C;
      --color-wash: rgb(255 255 255 / 0.07);
      --hero-filter: none;
      --hero-veil: none;   /* the night photo as it is (Arthur: no dark film) */
    --hero-bg-m: #0A1B3D; --hero-bg-a: #0E2A55;
    --creds-tile-1-bg: #1559D6; --creds-tile-1-fg: #FFFFFF; --creds-tile-2-bg: #F7B500; --creds-tile-2-fg: #0B1F44;
      --blue-base: #1559D6;   /* fills that carry white (the credentials cells, the blue band) keep the brand blue */
      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.25);
      --shadow-2: 0 4px 12px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
      --icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DA7FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DA7FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      --icon-check-on-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071634' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      /* the nav's glass and panels (nav.css) */
      --frost-bg: rgb(8 22 51 / 0.78);
      --frost-line: rgb(255 255 255 / 0.10);
      --panel-bg: #0F2249;
      --highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.06);
      --nav-shadow: 0 6px 16px -4px rgb(0 0 0 / 0.45), 0 2px 4px -1px rgb(0 0 0 / 0.3);
      --nav-shadow-3: 0 18px 40px -12px rgb(0 0 0 / 0.6), 0 6px 12px -4px rgb(0 0 0 / 0.35);
  }
}