/* DESIGN.md v2.2 token manifest — canonical names, copied verbatim from the
   v2.2 :root block in packages/design-system/globals.css.

   These are the names to reach for in NEW work. Families are --font-family-*
   (not --font-*) and colors are --color-<group>-* so this layer never collides
   with the Confident Workshop layer, which holds different values under similar
   ideas.

   FIVE MANIFEST RANGES, RESOLVED. CSS custom properties hold one value, so each
   takes the LOWER bound, per the design owner (2026-07-25):
     border.strong           0.12-0.14  -> 0.12
     border.button           0.16-0.20  -> 0.16
     typography.scale.label  10-10.5px  -> 10px
     typography.scale.section 26-30px   -> 26px
     motion.sibling-stagger  30-60ms    -> 30ms
   The upper bound of each remains a legitimate named departure, not a new token.

   Typography `weights` arrays are not expressed here: they enumerate which
   faces a family ships, and are realized by the @font-face blocks in
   tokens/fonts.css. */
:root {
  /* color.neutral */
  --color-neutral-canvas: #efe9dd;
  --color-neutral-topbar: #f6f1e7;
  --color-neutral-panel: #fbf8f2;
  --color-neutral-surface: #faf6f0;
  --color-neutral-white: #ffffff;
  --color-neutral-track: #e7e0d3;

  /* color.text */
  --color-text-ink: #14161b;
  --color-text-ink-secondary: #5c574d;
  --color-text-ink-muted: #8a8377;
  --color-text-ink-faint: #a89f90;

  /* color.brand */
  --color-brand-magenta: #e5318a;
  --color-brand-magenta-action: #b81b68;
  --color-brand-magenta-action-hover: #9a1456;
  --color-brand-tint: #f9e3ee;
  --color-brand-tint-2: #fdf3f8;

  /* color.status — always paired with an icon + text label, never the sole
     signal of state (WCAG AA). */
  --color-status-healthy: #1f7a4d;
  --color-status-attention-fill: #f7ecc9;
  --color-status-attention-text: #9a6608;
  --color-status-attention-dot: #f5a623;
  --color-status-destructive: #e0392f;

  /* typography.<group>.family */
  --font-family-display: 'Schibsted Grotesk', sans-serif;
  --font-family-body: 'Hanken Grotesk', sans-serif;
  --font-family-mono: 'Geist Mono', monospace;

  /* typography.scale */
  --font-size-micro: 8px;
  --font-size-label: 10px;
  --font-size-caption: 11.5px;
  --font-size-body: 13px;
  --font-size-emphasis: 15.5px;
  --font-size-title: 18px;
  --font-size-section: 26px;
  --font-size-display: 46px;

  /* radius */
  --radius-micro: 4px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 20px;
  --radius-pill: 999px;

  /* spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 36px;
  --space-xl: 64px;
  --space-section: 120px;

  /* border */
  --border-rest: rgba(20, 22, 27, 0.08);
  --border-standard: rgba(20, 22, 27, 0.10);
  --border-strong: rgba(20, 22, 27, 0.12);
  --border-button: rgba(20, 22, 27, 0.16);
  --border-hover: rgba(20, 22, 27, 0.28);
  --border-magenta-divider: rgba(229, 49, 138, 0.14);

  /* shadow */
  --shadow-static: 0 1px 2px rgba(20, 22, 27, 0.04);
  --shadow-interactive-rest: 0 12px 30px -12px rgba(229, 49, 138, 0.30);
  --shadow-interactive-hover: 0 14px 34px -14px rgba(229, 49, 138, 0.40);
  --shadow-popover: 0 10px 28px -8px rgba(20, 22, 27, 0.22);

  /* motion */
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --motion-instant: 0ms; /* @kind other */
  --motion-fast: 120ms; /* @kind other */
  --motion-base: 200ms; /* @kind other */
  --motion-slow: 300ms; /* @kind other */
  --motion-max: 450ms; /* @kind other */
  --motion-sibling-stagger: 30ms; /* @kind other */
}