/* Design tokens exported from Claude Design → "Giri Design System" (G3).
   Web scale; remotion/src/tokens.ts carries the same values ×3 for video. */
:root {
  /* color */
  --color-bg: #F6F3EA;              /* Paper */
  --color-surface: #EBEBDF;         /* Oatmilk */
  --color-text: #0D0D0D;            /* Ink */
  --color-text-muted: #3B352C;      /* --giri-ink-700 */
  --color-accent: #E9631A;          /* Atomic Orange */
  --color-accent-contrast: #F6F3EA; /* Paper on orange */
  --color-border: #0D0D0D;          /* Ink — DS borders are currentColor */

  /* typography */
  --font-family-heading: "Anton", sans-serif;
  --font-family-body: "Geist", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-size-xl: 2rem;             /* --giri-text-title */
  --font-size-lg: 1.25rem;          /* --giri-text-body-lg */
  --font-size-md: 1rem;             /* --giri-text-body */
  --font-size-sm: 0.8125rem;        /* --giri-text-caption */
  --font-weight-bold: 500;
  --font-weight-regular: 400;
  --line-height-tight: 1.15;        /* --giri-leading-tight */
  --line-height-normal: 1.55;       /* --giri-leading-body */

  /* spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
}