/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   Mirror of AppTheme.dart — single source of truth for the web.
   Change here → reflected everywhere.
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette (1:1 with AppTheme) ── */
  --color-background:        #FFFFFF;
  --color-surface:           #F7F7F7;
  --color-surface-elevated:  #EFEFEF;
  --color-border:            #E2E2E2;
  --color-border-muted:      #BBBBBB;
  --color-primary:           #0A0A0A;
  --color-secondary:         #6B6B6B;
  --color-accent:            #EA580C;
  --color-accent-dim:        rgba(234, 88, 12, 0.08);
  --color-accent-border:     rgba(234, 88, 12, 0.2);
  --color-accent-glow:       rgba(234, 88, 12, 0.15);
  --color-green:             #3ECF8E;
  --color-white:             #FFFFFF;

  /* ── Typography ── */
  --font-display:  'Outfit', sans-serif;
  --font-body:     'DM Sans', sans-serif;

  /* ── Spacing ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* ── Radius (matches Flutter borderRadius) ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  26px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-accent: 0 10px 36px -4px var(--color-accent-glow);
  --shadow-card:   0 4px 16px -2px rgba(0,0,0,0.06);

  /* ── Layout ── */
  --max-width:        1040px;
  --max-width-narrow: 680px;

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
}