/* Hallmark · tokens · theme: custom (brand-locked: Boxwood House Brand Guidelines v2)
 * v2: layout from the Claude Design homepage; colour roles corrected to the brand:
 * dark first, one deliberate cream band (the introduction), orange used sparingly,
 * teal for subtle differentiation.
 * Contrast (WCAG 2.1, measured):
 *   on paper / paper-2: ink 14.7 / 13.0 · ink-2 12.7 / 11.3 · muted 10.0 / 8.9 · faint 6.6 / 5.8
 *                       accent-text 4.7 / 4.1 (paper only for small text) · house 7.1 / 6.3
 *   on cream:           cream-ink 14.7 · cream-body 10.3 · cream-muted 6.3 · accent 3.95 (decoration, large only)
 *   filled CTA:         ink on accent 3.95 (large text only: label kept at >= 24px)
 */
:root {
  /* Dark surfaces (the brand reads dark) */
  --color-paper:   oklch(23.4% 0.006 107);  /* Near Black #1E1E1B */
  --color-paper-2: oklch(27.6% 0.005 107);  /* Charcoal #282825 */

  /* Text on dark */
  --color-ink:     oklch(95.6% 0.014 85);   /* Warm Cream #F5F0E6 */
  --color-ink-2:   oklch(90.8% 0.017 85);   /* ledes */
  --color-muted:   oklch(83.5% 0.021 85);   /* supporting copy */
  --color-faint:   oklch(71.4% 0.018 85);   /* numbers, legal */

  /* The one cream band */
  --color-cream:        oklch(95.6% 0.014 85);  /* Warm Cream as a surface, introduction only */
  --color-cream-ink:    oklch(23.4% 0.006 107);
  --color-cream-body:   oklch(34.1% 0.011 92);
  --color-cream-muted:  oklch(45.9% 0.016 82);

  /* Rules (alpha modifiers on the base colours) */
  --color-rule:        oklch(95.6% 0.014 85 / 0.18);
  --color-rule-strong: oklch(95.6% 0.014 85 / 0.28);
  --color-rule-cream:  oklch(23.4% 0.006 107 / 0.4);
  --color-texture:     oklch(95.6% 0.014 85 / 0.06);
  --color-dot-dim:     oklch(95.6% 0.014 85 / 0.08);

  /* Accents */
  --color-accent:      oklch(58.5% 0.164 42);  /* Burnt Orange #C85218 */
  --color-accent-text: oklch(64.4% 0.183 42);  /* small orange text on dark */
  --color-house:       oklch(72.4% 0.098 201); /* Teal Light #4DB8BF: HOUSE, bullets, hover */
  --color-focus:       oklch(64.4% 0.183 42);

  /* Type: Work Sans only, by brand rule. Display sizes follow the Claude Design scale. */
  --font-display: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Work Sans", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.8125rem;                          /* 13px kicker */
  --text-sm:   0.9375rem;                          /* 15px */
  --text-md:   1.0625rem;                          /* 17px */
  --text-lg:   1.125rem;                           /* 18px */
  --text-xl:   1.25rem;                            /* 20px */
  --text-lede: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);  /* 19–22px */
  --text-lede-lg: clamp(1.25rem, 0.9rem + 1vw, 1.625rem); /* 20–26px */
  --text-intro: clamp(1.875rem, 1rem + 3vw, 3.5rem);      /* 30–56px */
  --text-panel: clamp(2.25rem, 1.2rem + 2.8vw, 3.5rem);   /* 36–56px */
  --text-studios: clamp(1.875rem, 0.9rem + 3.3vw, 3.75rem); /* 30–60px */
  --text-section: clamp(2.75rem, 1rem + 5.4vw, 6rem);     /* 44–96px */
  --text-venture: clamp(3rem, 1.3rem + 5vw, 5.75rem);     /* 48–92px */
  --text-hero:    clamp(3.375rem, 1rem + 8.6vw, 9.5rem);  /* 54–152px */
  --text-close:   clamp(4rem, 1rem + 11.5vw, 12.5rem);    /* 64–200px */

  --tracking-hero:    -0.045em;
  --tracking-display: -0.04em;
  --tracking-kicker:  0.12em;

  /* Space: 4pt scale */
  --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;

  --gutter:       clamp(1.25rem, 4.5vw, 4rem);
  --section-y:    clamp(4.5rem, 2rem + 6vw, 8.75rem);   /* 72–140px */
  --section-gap:  clamp(2.5rem, 1.5rem + 3vw, 4rem);    /* head to content */
  --panel-pad:    clamp(1.75rem, 0.8rem + 3vw, 3.5rem);
  --max:          90rem;
  --nav-h:        4.5rem;

  /* Hero fits the fold: sizes are capped by viewport height as well as width,
   * so headline + pitch + mark land on the first screen on short laptops (1280×720 up). */
  --hero-pad-top: clamp(2rem, 6svh, 7.5rem);
  --hero-gap:     clamp(1.5rem, 4svh, 4.5rem);
  --hero-title:   min(var(--text-hero), 16svh);
  --hero-mark:    min(clamp(11.25rem, 24vw, 20rem), 30svh);

  /* Shape */
  --rule-hair:   1px;
  --rule-strong: 2px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.2, 0.9, 0.3, 1.25);  /* hero mark only: decorative, not UI state */
  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-pop:   520ms;

  /* Layers */
  --z-sticky: 200;
  --z-skip:   600;
}