/* Happyllama design tokens — single source for every colour, font, size,
 * radius, ease and duration. Page CSS references tokens only; raw values
 * outside this file fail tools/test-site.mjs.
 *
 * Brand anchors:
 *   ink    #0d0d0d -> oklch(15.9% 0 0)          — 95% black, no brown
 *   cream  #f3ede2 -> oklch(94.8% 0.016 82.8)
 *   orange #f06a1f -> oklch(67.9% 0.183 44.6)
 */

:root {
  /* ---- surfaces ---- */
  --color-ink:          oklch(15.9% 0 0);         /* 95% black — dark sections */
  --color-ink-2:        oklch(21.8% 0 0);         /* elevated dark surface */
  --color-ink-3:        oklch(25.2% 0 0);         /* second dark elevation */
  --color-ink-rule:     oklch(34% 0 0);           /* hairline on dark */
  --color-paper:        oklch(94.8% 0.016 82.8);  /* brand cream — light sections */
  --color-paper-2:      oklch(97%   0.010 84);    /* card surface on cream */
  --color-paper-3:      oklch(91.5% 0.019 80);    /* tinted band on cream */
  --color-rule:         oklch(84%   0.020 80);    /* hairline on cream */
  --color-rule-2:       oklch(88.5% 0.017 80);    /* secondary hairline */

  /* ---- text ---- */
  --color-text:         oklch(15.9% 0 0);         /* body on cream */
  --color-text-2:       oklch(36% 0 0);           /* secondary on cream */
  --color-text-3:       oklch(42% 0 0);           /* meta on cream */
  --color-on-ink:       oklch(94.8% 0.016 82.8);  /* cream on black */
  --color-on-ink-2:     oklch(78%   0.012 82.8);  /* secondary cream on black */
  --color-on-ink-3:     oklch(64%   0.010 82.8);  /* meta cream on black */
  --color-white:        oklch(100% 0 0);          /* chrome logos on black */

  /* ---- accent ---- */
  --color-accent:       oklch(67.9% 0.183 44.6);  /* brand orange — fills, marks, large type */
  --color-accent-ink:   oklch(15.9% 0 0);         /* text on an orange fill */
  --color-accent-text:  oklch(47%   0.150 44);    /* small orange text on cream (AA) */
  --color-accent-soft:  oklch(88%   0.060 60);    /* orange wash */
  --color-focus:        oklch(50%   0.190 44);    /* focus ring on cream */
  --color-focus-ink:    oklch(75%   0.170 50);    /* focus ring on ink */
  --color-error:        oklch(43%   0.160 28);

  /* deliberately flat, untinted greys — used ONLY by the work-page
     "generic template" demo pane, where looking colourless is the point */
  --color-demo-flat-bg:  oklch(98% 0 0);
  --color-demo-flat-ink: oklch(45% 0 0);

  /* ---- type ---- */
  --font-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  /* hero display — reference runs 72px/700 at 1440 */
  --text-hero: clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);
  /* big statement — reference runs 88px/400 at 1440 */
  --text-statement: clamp(2rem, 0.7rem + 4.6vw, 4.75rem);
  --text-section: clamp(1.875rem, 1rem + 2.6vw, 3.25rem);

  /* ---- space (4pt) ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- layout ---- */
  --page-gutter: clamp(1.125rem, 3.5vw, 4rem);
  --page-max: 81.875rem;   /* 1310px — matches the reference container */
  --measure: 65ch;

  /* ---- shape ---- */
  --radius-btn: 10px;
  --radius-card: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-heavy: 2px;
  --rule-bar: 4px;

  /* ---- depth ---- */
  --shadow-chip: 0 6px 20px oklch(0% 0 0 / 0.10);
  --shadow-card: 0 10px 34px oklch(0% 0 0 / 0.14);
  --shadow-nav: 0 8px 30px oklch(0% 0 0 / 0.40);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 240ms;
  --dur-mid: 520ms;
  --dur-long: 900ms;
  --dur-line: 1000ms;   /* line-mask reveal, matches the reference's 1s */
  --stagger: 90ms;

  /* ---- z ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-nav: 300;
  --z-modal: 400;
}