:root {
  /* Colors — fixed light theme per provided style */
  --color-bg: #F6F7EE;           /* BG */
  --color-surface: #FFFFFF;      /* White */
  --color-surface-alt: #ECEDE1;  /* Accent */
  --color-surface-quiet: #F5F5F5;/* Gray */
  --color-stroke: #D7D8CB;       /* Stroke */
  --color-line: #D5D0DD;         /* Gray for line */
  --color-text: #111111;         /* Black */
  --color-text-muted: #898B90;   /* Gray */
  --color-text-soft: #6C6E66;    /* derived softer */
  --color-accent: #959687;       /* Secondary */
  --color-label-bg: #E4E5DD;     /* BG for label */
  --color-success: #3A7F5C;
  --color-danger: #B9353A;

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif;

  /* Scale (px) from board: 72/48/40/32/24; adapt for mobile */
  --fs-900: 56px; /* reduced from 72 for hero on auth */
  --fs-800: 40px;
  --fs-700: 32px;
  --fs-600: 24px;
  --fs-500: 20px;
  --fs-400: 16px;
  --fs-300: 14px;
  --fs-200: 12px;

  /* Line-height */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Shadows — light, soft, neutral */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 6px 18px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 16px 36px rgba(17, 17, 17, 0.08);

  /* Transitions */
  --tr-fast: 120ms ease;
  --tr-base: 180ms ease;
}