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

   Values for the token-role contract declared by the
   signature structure. Per-client overlays (written by
   the build script) live unlayered so they override these.
   ============================================================ */

@layer pack {
  :root {
    /* ---- Color roles ---------------------------------------- */
    --accent:           #1478A2;
    --accent-ink:       #FFFFFF;
    --ink:              #0E2233;
    --ink-dim:          #5A6675;
    --surface:          #FFFFFF;
    --bg:               #F5F7F9;
    --bg-warm:          #EFF1F5;
    --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;

    /* ---- 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;
  }
}

/* Per-client overlay — chinook-dental-centre (unlayered; overrides @layer pack tokens) */
body.client-chinook-dental-centre {
  --accent: #35502F;
  --accent-ink: #FFFFFF;
}