/* Hollis & Grey — design tokens
   Palette: Option 1 (locked mockup palette + accessibility split)
   Every text pairing below is AA or better at its documented size.
   Generated for Phase 2. Do not add values here without adding them to tokens.json. */

:root {
  /* ---- Surfaces ---- */
  --color-surface-primary:   #F5F2EB; /* page ground */
  --color-surface-alt:       #EFEBE1; /* alternating band, symptom grids */
  --color-surface-deep:      #E4DFD2; /* cream-300 as a ground: the darkest light plate.
                                          text-primary 13.9 · text-body 6.6 · accent-deep 5.3.
                                          text-accent (4.0) and text-muted (4.0) do not pass
                                          here at small sizes — use accent-deep / text-body. */
  --color-surface-raised:    #FFFFFF; /* cards on either ground */
  --color-surface-inverse:   #001727; /* nav, footer, statement band */
  --color-surface-inverse-2: #0A2436; /* hover on inverse surfaces only */
  --color-surface-inverse-deep: #0A2436; /* instrument band ground. Same value as
                                            inverse-2, named separately because it
                                            is a ground, not a hover. A half-step
                                            off navy-900 so the statement band
                                            stays the darkest thing on the page. */
  --color-surface-panel: #1E3A4C;        /* lit panel on an inverse ground.
                                            text-inverse 10.64 · inverse-body 7.56
                                            · inverse-accent 4.70 */

  /* ---- Decorative light · never sets or outlines text ---- */
  --color-glow:  rgba(74,127,165,0.16);   /* accent-rule at low alpha, behind a CTA */
  --color-shine: rgba(245,242,235,0.26);  /* specular sweep across an inverse surface */
  --color-highlight: rgba(74,127,165,0.22); /* marker wash behind a phrase on a light ground */

  /* ---- Navy ramp ---- */
  --color-navy-900: #001727;
  --color-navy-800: #0A2436;
  --color-navy-700: #1E3A4C;
  --color-navy-600: #3A5C72;
  --color-navy-500: #6B8CA0;

  /* ---- Cream ramp ---- */
  --color-cream-50:  #FBF9F5;
  --color-cream-100: #F5F2EB;
  --color-cream-200: #EFEBE1;
  --color-cream-300: #E4DFD2;
  --color-cream-400: #D4CDBC;

  /* ---- Text on light grounds ---- */
  --color-text-primary: #001727; /* 16.28 on cream · 15.20 on tint */
  --color-text-body:    #3A4E5C; /*  7.75 on cream ·  7.28 on tint */
  --color-text-muted:   #5C6B76; /*  4.92 on cream ·  4.62 on tint — 13px floor */
  --color-text-accent:  #3F6E90; /*  4.89 on cream ·  4.59 on tint */
  --color-text-accent-deep: #3A5C72; /* navy-600: the accent on the cream-300 ground, 5.3 */

  /* ---- Text on navy ---- */
  --color-text-inverse:        #F5F2EB; /* 16.28 */
  --color-text-inverse-body:   #C3D0D9; /* 11.79 */
  --color-text-inverse-muted:  #B8C7D1; /* 10.53 */
  --color-text-inverse-accent: #7FA8C4; /*  7.21 */
  --color-text-inverse-warm:   #D4CDBC; /* 11.6 — cream-400 as a label colour on navy, so
                                            a little cream lives inside the dark plates */

  /* ---- Non-text accent · rules, borders, underlines only ---- */
  --color-accent-rule:      #4A7FA5; /* 3.86 on cream — never sets text */
  --color-accent-rule-soft: rgba(74,127,165,0.45);
  --color-decorative-muted: #6B7C88; /* 3.86 on cream — 18px+ or decorative only */

  /* ---- Borders ---- */
  --color-border-hairline: rgba(0,23,39,0.12);
  --color-border-strong:   rgba(0,23,39,0.25);
  --color-border-inverse:  rgba(245,242,235,0.22);
  --color-border-warm:     #D4CDBC; /* cream-400: hairlines on the light grounds read warm, not grey */

  /* ---- Focus · 3:1 minimum against the adjacent ground ---- */
  --color-focus-ring:         #001727; /* on cream 16.28 · on tint 15.20 · on white 17.79 */
  --color-focus-ring-inverse: #7FA8C4; /* on navy 7.21 */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* ---- Feedback ---- */
  --color-feedback-success: #2F6B4F; /* 5.63 on cream */
  --color-feedback-warning: #8A6A15; /* 4.54 on cream */
  --color-feedback-error:   #8C2F2A; /* 7.41 on cream */
  --color-feedback-info:    #3F6E90; /* 4.89 on cream */
  --color-feedback-success-surface: #EDF3EF;
  --color-feedback-error-surface:   #F8EDEC;

  /* ---- Internal only · build-process device, never published ---- */
  --internal-gap-surface: #FFF8E6;
  --internal-gap-border:  #C9A227;
  --internal-gap-text:    #6B5410;

  /* ---- Type families ----
     The logo is artwork (SVG), not live text, so Cormorant Garamond is NOT shipped as a webfont. */
  --font-serif: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:  'Jost', 'Jost Fallback', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Modular scale ----
     Not one fixed ratio. Fine steps through the reading sizes (16 · 18 · 22),
     wide steps at display (32 · 40 · 52). The uneven gradation is the point:
     a single 1.200 ratio gave a readable floor that was too low and a display
     ceiling that was too timid, so nothing on the page felt emphatic. */
  --size-100: 12px;
  --size-200: 14px;
  --size-300: 16px;
  --size-400: 18px;
  --size-500: 22px;
  --size-600: 26px;
  --size-700: 32px;
  --size-800: 40px;
  --size-900: 52px;

  /* ---- Fluid roles · mobile floor → desktop ceiling ---- */
  --type-display:    clamp(36px, 2.8vw + 22px, 56px);
  --type-h1:         clamp(32px, 2.0vw + 22px, 46px);
  --type-h2:         clamp(26px, 1.3vw + 21px, 36px);
  --type-h3:         clamp(21px, 0.6vw + 19px, 26px);
  --type-lead:       clamp(19px, 0.5vw + 17px, 22px);
  --type-body:       clamp(17px, 0.2vw + 16px, 18px);
  --type-body-small: clamp(15px, 0.2vw + 14px, 16px);
  --type-quote:      clamp(20px, 0.6vw + 18px, 24px);
  --type-eyebrow:    15px;
  --type-label:      13px;
  --type-caption:    14px;
  --type-button:     14px;
  --type-nav:        14px;

  /* Type set inside SVG drawings (the instruments on /sfo). Drawings never
     render below 1:1, so the rendered size is always this or larger. */
  --type-graphic-label:   13px;
  --type-graphic-caption: 13px;

  /* ---- Line heights ----
     Leading tightens as size rises. Body stays generous for a reader who is
     sixty, but 1.8 at the old 16px became cavernous at 18px. */
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-h3:      1.3;
  --leading-lead:    1.5;
  --leading-body:    1.65;
  --leading-tight:   1.4;

  /* ---- Letterspacing ----
     Negative tracking scales with size: large type sets loose without it,
     and reading sizes need none. Uppercase tracking comes down as the type
     gets bigger, because a larger letterform needs less compensation. */
  --tracking-display: -0.025em;
  --tracking-h1:      -0.02em;
  --tracking-heading: -0.015em;
  --tracking-h3:      -0.01em;
  --tracking-lead:    -0.01em;
  --tracking-body:     0em;
  --tracking-eyebrow:  0.12em;
  --tracking-label:    0.14em;
  --tracking-button:   0.1em;
  --tracking-nav:      0.1em;
  --tracking-wordmark: 0.06em;

  /* ---- Weights ---- */
  --weight-body: 400;
  --weight-lead: 300;
  --weight-emphasis: 500;
  --weight-serif: 400;
  --weight-serif-strong: 500;

  /* ---- Measure ---- */
  --measure-body: 62ch;  /* ~560px at 16px */
  --measure-lead: 46ch;  /* ~440px at 19px */
  --measure-quote: 52ch;
  --measure-legal: 72ch; /* privacy policy long-form */

  /* ---- Space · 8pt base ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ---- Layout ---- */
  --container-max: 1140px;
  --container-narrow: 720px; /* long-form and legal */
  --gutter: 24px;
  --section-padding-block: 56px;
  --section-padding-inline: var(--gutter);
  --grid-gap: 24px;
  --tap-target-min: 44px;

  /* ---- Motion · nothing else is permitted ---- */
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-state:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-enter: 300ms;
  --duration-state: 160ms;
  --duration-sweep: 900ms;  /* one specular pass */
  --duration-ambient: 6s;   /* the rest between passes */
}

@media (min-width: 760px) {
  :root {
    --gutter: 32px;
    --section-padding-block: 80px;
    --grid-gap: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section-padding-block: 96px;
  }
}

@media (min-width: 1280px) {
  :root { --section-padding-block: 112px; }
}

/* Metric-matched fallbacks so the swap does not shift layout. */
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia');
  size-adjust: 105%;
  ascent-override: 96%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Jost Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 102%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-enter: 0ms; --duration-state: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Round 4: graphics that complement the copy ---- */
:root {
  --icon-size: 28px;      /* glyph box */
  --icon-col: 46px;       /* fixed column so icons align across a grid */
  --stroke-glyph: 1.5;
  --stroke-rule: 1;
  --slot-border: rgba(245,242,235,0.16);
  --slot-ground: #04203A; /* one step off navy, so the slot reads as an aperture */
  --slot-tag: rgba(245,242,235,0.45);
  --plane-1: rgba(245,242,235,0.045);
  --plane-2: rgba(127,168,196,0.07);
  --hairline-1: rgba(245,242,235,0.22);
  --hairline-2: rgba(127,168,196,0.35);
}