/* ============================================================
   Pack — clinical / tokens.css

   Two layers below:
     1. SKELETON DEFAULT TOKENS — the cinematic-instrument skeleton's
        baseline token values, ported in from the brusco theme
        promotion on 2026-06-28. Cream + ink palette.
     2. PACK OVERLAY (further down, after the delimiter) — the
        clinical pack's slate canvas + cool-accent overrides. These
        win the cascade because they come after.
   ============================================================ */

@layer pack {
  :root {
    /* ---- Color roles ---------------------------------------- */
    --accent:           #1478A2;
    --accent-ink:       #FFFFFF;
    --ink:              #0E2233;
    --ink-dim:          #5A6675;
    /* Near-black for full-section DARK backgrounds (team_editorial,
       ring transition). Distinct from --ink (which is the body-text
       color on cream surfaces). Keeps the dark region from reading
       as grey vs the reference. */
    --ink-deep:         #141414;
    --surface:          #FFFFFF;
    --bg:               #FFFCF7;
    --bg-warm:          #F8F4EC;
    --border:           #E5E9EE;
    --divider:          #C9CBC5;
    --overlay-20:       rgba(14, 34, 51, 0.2);
    --overlay-50:       rgba(14, 34, 51, 0.5);

    --on-dark:          rgb(245, 244, 247);
    --on-dark-dim:      rgba(255, 255, 255, 0.55);
    --divider-on-dark:  #595E5C;

    /* Per-client optional overrides ------------------------- */
    /* Team portrait backdrop tint — clients with non-studio
       portrait photography may set this to a calming pale color
       so headshots read consistently across the grid. Default
       transparent so clients with already-prepared portraits get
       no extra wash. */
    --portrait-tint:    transparent;

    /* ---- Type families -------------------------------------- */
    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;

    /* Menu overlay display type — Outfit for the huge-light-uppercase
       register. Per-build override via the branding slot:
         branding: { menu_display_weight: 200 | 300 } */
    --menu-display-font:   "Outfit", system-ui, sans-serif;
    --menu-display-weight: 300;

    /* ---- Type scale ----------------------------------------- */
    --text-display-1: 96px;
    --text-h2:        40px;
    --text-h2-lg:     52px;
    --text-statement: 48px;
    --text-h3:        20px;
    --text-stat:      32px;
    --text-body-lg:   18px;
    --text-body:      16px;
    --text-small:     14px;
    --text-eyebrow:   13px;

    /* ---- Line-heights --------------------------------------- */
    --lh-hero:        1.00;
    --lh-tight:       1.15;
    --lh-snug:        1.20;
    --lh-stat:        1.25;
    --lh-body-tight:  1.40;
    --lh-body:        1.70;
    --lh-body-lg:     1.70;

    /* ---- Tracking ------------------------------------------- */
    --tr-display-1:  -2px;
    --tr-statement:  -3px;
    --tr-h2:         -3px;
    --tr-h2-lg:      -4.5px;
    --tr-stat:       -2px;
    --tr-body-tight: -1px;
    --tr-body:       -0.3px;
    --tr-body-lg:    -0.3px;
    --tr-subtitle:   -0.03px;
    --tracking-tight: -0.03em;
    --tracking-snug:  -0.01em;
    --tracking-wide:   0.08em;

    /* ---- Spacing scale (8px base) --------------------------- */
    --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;

    /* ---- Radius --------------------------------------------- */
    --r-sm:   6px;
    --r-base: 8px;
    --r-md:   12px;
    --r-card: 16px;
    --r-lg:   24px;
    --r-pill: 999px;

    /* ---- Layout --------------------------------------------- */
    --page-max:    1300px;
    --page-gutter: clamp(16px, 4vw, 48px);

    /* ---- Motion --------------------------------------------- */
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --dur-fast:   160ms;
    --dur-medium: 280ms;
    --dur-slow:   600ms;
  }
}

/* ============================================================
   PACK OVERLAY — clinical token overrides on top of the cinematic-
   instrument skeleton default tokens above. Cascade preserved.
   ============================================================ */

/* ============================================================
   Pack — clinical / tokens.css   (renamed from futuristic 2026-06-28)

   Clinical / cool / precision-instrument palette. Values for the
   token-role contract declared by the signature structure (see
   library/structures/signature/contract.md). Per-client overlays
   (written by the build script) live unlayered so they override
   these.

   Provenance: every value below is ported by-value (not eyeballed)
   from the A2-corrected test build at
   /tmp/zinc-hybrid/A2-corrected/override.css — the build the senior
   designer signed off on. Three anchors verified before authoring:
     --bg            #F5F6F8   (A2 line 14)
     --accent        #C5D2DE   (A2 line 21)
     cursor mint     #1bd5b6   (A2 line 233 → --cursor-fill below)
   ============================================================ */

@layer pack {
  /* ============================================================
     SLATE MODE — default (no body class set)
     The engine selects mode via slots.yaml: `canvas: slate | cream`.
     `slate` is the default if the field is absent or unrecognized.
     ============================================================ */
  :root {
    /* ---- Color roles (contract) ---------------------------- */
    --accent:           #C5D2DE;
    --accent-ink:       #FFFFFF;
    --ink:              #0E2233;
    --ink-dim:          #5A6675;
    --surface:          #F5F6F8;
    --bg:               #F5F6F8;
    --bg-warm:          #EFF1F4;
    --border:           #D6DBE1;
    --divider:          #B7BFC8;
    --overlay-20:       rgba(14, 34, 51, 0.2);
    --overlay-50:       rgba(14, 34, 51, 0.5);

    --on-dark:          rgb(245, 244, 247);
    --on-dark-dim:      rgba(255, 255, 255, 0.55);
    --divider-on-dark:  #3A3F44;

    /* ---- Color roles (pack extensions) --------------------- */

    /* Near-black for full-section DARK backgrounds (team_editorial,
       ring transition). Distinct from --ink, which is the body-text
       color on the light slate canvas. Same role as the brusco
       theme's --ink-deep — kept under the same name for selector
       parity. */
    --ink-deep:         #18181B;

    /* Surface tone for cards that need to be LIGHTER than the canvas
       rather than darker — the form card and any other element that
       would otherwise pop dark on the slate. Stays inside the cool
       family (white-with-cool-cast), not a warm cream. */
    --surface-warm:     #FBFBFD;

    /* Contrasting card tone — flips per canvas mode for service-card
       variety. Slate canvas → warm tone (visible warm break in the
       cool row). Cream canvas → cool tone (defined in cream block
       below). Both modes land in the same ~94% lightness band so the
       row reads as three calibrated surfaces, not one outlier. */
    --surface-contrast: #F4F0E6;

    /* Mint cursor reserved against engine accent-graft.
       The brusco cursor's .hd-cursor__inner reads var(--accent)
       by default; style.css redirects it to var(--cursor-fill)
       (single property override, no behavioral change) so the
       cursor stays mint regardless of what --accent is grafted to
       per-client. */
    --cursor-fill:      #1bd5b6;

    /* Emphasis color reserved against engine accent-graft.
       The brusco `.hd-word--accent` rule (description-section
       scroll-fill emphasis words like "studio", "work of art")
       reads var(--accent) by default; pack/style.css redirects
       it to var(--accent-emphasis) so emphasis stays mint
       regardless of what --accent is grafted to per-client.
       Same pattern as --cursor-fill, same intent: keep the
       brusco emphasis identity independent of UI-chrome accent. */
    --accent-emphasis:  #1bd5b6;

    /* Warm accent — soft gold for warm-hover affordances on the
       dark-band sections (team_editorial CTA at first; reusable
       for any future button that wants a hospitality-warm pop
       on hover against the slate UI-chrome accent). Reserved as
       a separate token so a per-client palette graft of --accent
       doesn't drag the warm-hover with it; same independence
       pattern as --cursor-fill and --accent-emphasis. */
    --accent-warm:      #E5C97A;

    /* Per-client optional overrides ------------------------- */
    /* Team portrait backdrop tint — clients with non-studio
       portrait photography may set this to a calming pale color
       so headshots read consistently across the grid. Default
       transparent. */
    --portrait-tint:    transparent;

    /* ---- Type families (contract) -------------------------- */
    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;

    /* Menu overlay display type — Outfit for the huge-light-uppercase
       register. Per-build override via the branding slot:
         branding: { menu_display_weight: 200 | 300 } */
    --menu-display-font:   "Outfit", system-ui, sans-serif;
    --menu-display-weight: 300;

    /* Mono for technical/data accents the clinical register calls for
       (timestamps, micro-data, badges). Not in contract but available
       to style.css via this token. */
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    /* ---- Type scale (contract) ----------------------------- */
    --text-display-1: 96px;
    --text-h2:        40px;
    --text-h2-lg:     52px;
    --text-statement: 48px;
    --text-h3:        20px;
    --text-stat:      32px;
    --text-body-lg:   18px;
    --text-body:      16px;
    --text-small:     14px;
    --text-eyebrow:   13px;

    /* ---- Line-heights (contract) --------------------------- */
    --lh-hero:        1.00;
    --lh-tight:       1.15;
    --lh-snug:        1.20;
    --lh-stat:        1.25;
    --lh-body-tight:  1.40;
    --lh-body:        1.70;
    --lh-body-lg:     1.70;

    /* ---- Tracking (contract) ------------------------------- */
    --tr-display-1:  -2px;
    --tr-statement:  -3px;
    --tr-h2:         -3px;
    --tr-h2-lg:      -4.5px;
    --tr-stat:       -2px;
    --tr-body-tight: -1px;
    --tr-body:       -0.3px;
    --tr-body-lg:    -0.3px;
    --tr-subtitle:   -0.03px;
    --tracking-tight: -0.03em;
    --tracking-snug:  -0.01em;
    --tracking-wide:   0.08em;

    /* ---- Spacing scale (contract, 8px base) ---------------- */
    --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;

    /* ---- Radii (contract) ---------------------------------- */
    --r-sm:   6px;
    --r-base: 8px;
    --r-md:   12px;
    --r-card: 16px;
    --r-lg:   24px;
    --r-pill: 999px;

    /* ---- Layout (contract) --------------------------------- */
    --page-max:    1300px;
    --page-gutter: clamp(16px, 4vw, 48px);

    /* ---- Motion (contract) --------------------------------- */
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --dur-fast:   160ms;
    --dur-medium: 280ms;
    --dur-slow:   600ms;
  }

  /* ============================================================
     CREAM MODE — opt-in via `slots.yaml: canvas: cream`.
     The build script writes `<body class="…pack-canvas-cream">`
     and this block overrides only the surface set; ink, ink-deep,
     accent, accent-ink, cursor-fill, and the entire type/space/
     motion stack stay locked across both modes.

     Cream-mode values were derived via the `minimalist-ui` skill
     (warm bone substrate at ~96% lightness, off-white surface,
     warm-tinted muted gray for ink-dim). The lightness band matches
     slate's ~96% so cream/slate read as deliberate modes, not a
     subliminal tint shift. Brusco's literal #FFFCF7 is re-anchored
     here as `--surface-warm` (the lighter recessive form-card
     surface), preserving the "lighter, not darker" mechanic.
     ============================================================ */
  body.pack-canvas-cream {
    --bg:               #FAF8F0;
    --bg-warm:          #F2EDE2;
    --surface:          #FAF8F0;   /* = bg, cards still blend */
    --surface-warm:     #FFFCF7;   /* lighter than bg, refined brusco-cream */
    --surface-contrast: #EBEDEF;   /* COOL card variant — contrast against warm canvas */
    --ink-dim:          #6E665C;   /* warm muted (single gray family per stitch rule) */
    --border:           #E8E3D6;
    --divider:          #C9C2B3;
  }
}

/* Per-client overlay — demo-clinical (unlayered; overrides @layer pack tokens) */
body.client-demo-clinical {
  --accent: #1bd5b6;
  --accent-ink: #FFFFFF;
  --ink: #363636;
  --ink-dim: #666666;
  --bg: #FFFCF7;
  --bg-warm: #F3F0E7;
}