/* ============================================================
   Brightly — Design Tokens
   Load FIRST. Everything else references these variables.
   Structure follows the Motivated design system; brand values
   (accent + font) are Brightly's own.
   ============================================================ */

:root {
  /* Color — warm editorial neutrals */
  --color-page:        #FBFAF8;   /* warm off-white base */
  --color-page-soft:   #F4F1EB;   /* warm subtle panel */
  --color-surface:     #FFFFFF;
  --color-cream:       #FAF5EE;   /* warm bands (e.g. "Why Brightly") */
  --color-ink:         #1A1714;   /* warm near-black */
  --color-ink-pure:    #000000;
  --color-ink-muted:   rgba(26,23,20,0.64);
  --color-ink-faint:   rgba(26,23,20,0.42);
  --color-on-dark:     #FFFFFF;
  --color-accent:      #8DE2FF;   /* Brightly accent */
  --color-accent-deep: #2BA7D6;   /* readable accent for text/links/icons */
  --color-accent-soft: rgba(141,226,255,0.20);
  --color-border-soft: #E7E2DA;
  --color-border-faint:#F0ECE4;
  --color-border-hair: rgba(26,23,20,0.08);
  --color-control:     #B9B2A8;

  /* Radius */
  --radius-pill: 9999px;
  --radius-box:  10px;   /* inputs / small elements */
  --radius-card: 18px;   /* cards, images, panels */

  /* Type — Brightly uses Hanken Grotesk */
  --font-sans: "Hanken Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Layout */
  --header-h: 72px;
  --control-h: 52px;
  --row-h: 66px;
  --inset-x: clamp(20px, 6vw, 88px);
  --maxw: 1200px;
  --space-section: clamp(64px, 9vw, 116px);

  /* Depth — soft, layered */
  --shadow-sm: 0 1px 2px rgba(26,23,20,0.04), 0 2px 6px rgba(26,23,20,0.05);
  --shadow-md: 0 8px 24px -6px rgba(26,23,20,0.10), 0 2px 6px rgba(26,23,20,0.05);
  --shadow-lg: 0 28px 56px -20px rgba(26,23,20,0.22), 0 8px 20px -12px rgba(26,23,20,0.14);
  --shadow-soft: var(--shadow-md);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
}