/* ==========================================================================
   The Den Hawai‘i — design tokens
   Single source of truth. No hard-coded colour, size or spacing value
   should appear outside this file. Mirrors DESIGN.md §1–3.
   ========================================================================== */

:root {
  /* ---- brand ramp ------------------------------------------------------ */
  --sky-50:    #E9F4F9;
  --sky-100:   #D4EAF3;
  --sky-200:   #BEDFED;
  --sky-300:   #A9D5E7;
  --sky-400:   #93CAE1;

  --steel-200: #B7C8D8;
  --steel-300: #A9BDD4;
  --steel-400: #7E9CBF;

  --den-blue:  #5581A8;   /* brand primary — mark, large fills, hovers      */
  --den-600:   #3F5C7E;   /* links + small text on light (6.9:1)            */
  --den-700:   #2A3D54;   /* primary button fill (11.1:1)                   */
  --den-ink:   #151F2A;   /* body text, dark section ground (16.7:1)        */

  /* ---- neutrals -------------------------------------------------------- */
  --white:     #FFFFFF;
  --paper:     #F7F5F2;
  --sand:      #EDE8E0;
  --sand-600:  #D8D2C7;
  --line:      #E3E1DC;
  --text-mid:  #55606C;

  /* ---- sage (mark on dark) --------------------------------------------- */
  --den-sage:  #C7DCD8;

  /* ---- ember (recovery only) ------------------------------------------- */
  --ember-300: #E0A86A;
  --ember-500: #C98A4B;
  --ember-700: #8A5A2B;

  /* ---- semantic -------------------------------------------------------- */
  --bg-page:        var(--white);
  --bg-alt:         var(--paper);
  --bg-invert:      var(--den-ink);
  /* Any SURFACE that carries body-size text uses --den-600: white on
     --den-blue is only 4.12:1. --bg-brand-bright stays available for
     decorative fills and large display type. */
  --bg-brand:        var(--den-600);
  --bg-brand-bright: var(--den-blue);

  --text-primary:   var(--den-ink);
  --text-secondary: var(--text-mid);
  --text-on-dark:   var(--white);
  --text-on-dark-2: var(--steel-300);

  --link:           var(--den-600);
  --link-hover:     var(--den-700);

  --border:         var(--line);
  --border-dark:    rgb(255 255 255 / 0.18);

  --focus-light:    var(--den-600);
  --focus-dark:     var(--sky-400);

  /* ---- overlays (navy, never black) ------------------------------------ */
  /* Two layers: a text-side wash so copy always clears AA against the
     brightest frame, plus the vertical seat. Image stays open on the right. */
  --scrim-hero:
      linear-gradient(90deg,
        rgb(21 31 42 / 0.78)  0%,
        rgb(21 31 42 / 0.45) 40%,
        rgb(21 31 42 / 0.08) 78%),
      linear-gradient(180deg,
        rgb(21 31 42 / 0.45)  0%,
        rgb(21 31 42 / 0.12) 32%,
        rgb(21 31 42 / 0.62) 100%);
  /* narrow screens: copy spans the full width, so weight it vertically */
  --scrim-hero-sm:
      linear-gradient(180deg,
        rgb(21 31 42 / 0.50)  0%,
        rgb(21 31 42 / 0.20) 30%,
        rgb(21 31 42 / 0.82) 100%);
  --scrim-card: linear-gradient(180deg, transparent 40%, rgb(21 31 42 / 0.72) 100%);
  --scrim-blue: rgb(42 61 84 / 0.42);

  /* ---- type ------------------------------------------------------------ */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;

  --t-display-1: clamp(2.75rem, 7vw, 5.5rem);
  --t-display-2: clamp(2.25rem, 5vw, 3.75rem);
  /* Section headings. Without this, .display-2 sat on both <h1> and <h2> and
     a page title looked exactly like a section title. */
  --t-display-3: clamp(1.75rem, 3.4vw, 2.75rem);
  --t-h1:        clamp(2rem, 4vw, 3rem);
  --t-h2:        clamp(1.5rem, 2.6vw, 2.25rem);
  --t-h3:        clamp(1.25rem, 1.8vw, 1.5rem);
  --t-body-lg:   clamp(1.0625rem, 1.2vw, 1.25rem);
  --t-body:      1rem;
  --t-body-sm:   0.875rem;   /* 14px. Was 15px, a 1.07 step off body — not a
                                step anyone could see. */
  /* Two micro sizes, 1px apart, kept apart on purpose: --t-control is what you
     click (0.08em tracking, w600), --t-eyebrow is what labels a section
     (0.16em, quieter). They never sit adjacent competing, and the tracking
     does more work than the pixel would. --t-label is the old name. */
  --t-eyebrow:   0.75rem;
  --t-control:   0.8125rem;
  --t-label:     var(--t-control);

  /* ---- spacing --------------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px;

  --section-y:       clamp(4.5rem, 9vw, 10rem);
  --section-y-tight: clamp(3rem, 5vw, 5rem);
  --gutter:          clamp(1.25rem, 5vw, 4rem);
  --container:       1440px;
  --container-text:  720px;

  /* Line length. There were 21 different ch values in the CSS and markup, nine
     of them used exactly once, so the same kind of paragraph set anywhere
     between 34ch and 72ch. Four steps, and nothing between them. */
  --measure-display: 20ch;   /* headline wrapping */
  --measure-tight:   38ch;   /* pull quotes, captions, CTA leads */
  --measure:         62ch;   /* body prose — the default */
  --measure-wide:    72ch;   /* wide lists and tables */

  /* ---- radii ----------------------------------------------------------- */
  --r-sm: 4px; --r-md: 8px; --r-card: 12px; --r-lg: 20px; --r-pill: 999px;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(21 31 42 / 0.06), 0 2px 8px rgb(21 31 42 / 0.04);
  --shadow-2: 0 4px 12px rgb(21 31 42 / 0.08), 0 12px 32px rgb(21 31 42 / 0.08);

  /* ---- motion ---------------------------------------------------------- */
  --dur-micro: 150ms;
  --dur-std:   240ms;
  --dur-enter: 400ms;
  --dur-hero:  600ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
  --ease-standard: cubic-bezier(0.40, 0, 0.20, 1);

  /* ---- chrome ---------------------------------------------------------- */
  --nav-h: 64px;
}

@media (min-width: 600px) { :root { --nav-h: 72px; } }
@media (min-width: 900px) { :root { --nav-h: 88px; } }