/* =========================================================
   CulinAI design tokens
   One source of truth for colour, type, spacing, radius,
   elevation and motion. Every component reads from here.
   ========================================================= */
:root {
  color-scheme: light;

  /* Brand — one confident accent, everything else neutral */
  --color-primary: #D63B1F;          /* tomato */
  --color-primary-hover: #B93117;
  --color-primary-soft: rgba(214, 59, 31, .08);
  --color-primary-ring: rgba(214, 59, 31, .28);
  --color-on-primary: #FFFFFF;
  --color-secondary: #1E7A4C;        /* basil */
  --color-secondary-soft: rgba(30, 122, 76, .10);
  --color-accent: #E9A100;           /* star / saffron */
  --color-accent-soft: rgba(233, 161, 0, .14);

  /* AI identity */
  --gradient-ai: linear-gradient(120deg, #FF8A3D 0%, #E5462B 50%, #C2185B 100%);
  --gradient-ai-soft: linear-gradient(120deg, rgba(255,138,61,.12), rgba(229,70,43,.10) 50%, rgba(194,24,91,.10));
  --gradient-warm: linear-gradient(135deg, #1F1F1F 0%, #2B2B2B 100%);

  /* Surfaces */
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F2F2F2;
  --color-surface-sunken: #F2F2F2;
  --color-surface-raised: #FFFFFF;
  --color-chip: #F2F2F2;
  --color-chip-hover: #E5E5E5;
  --color-surface-glass: rgba(255, 255, 255, .96);
  --color-overlay: rgba(0, 0, 0, .5);
  --color-border: #E5E5E5;
  --color-border-strong: #CFCFCF;

  /* Text */
  --color-text: #0F0F0F;
  --color-text-muted: #606060;
  --color-text-subtle: #767676;

  /* Semantic */
  --color-success: #1E7A4C;
  --color-success-soft: rgba(30, 122, 76, .10);
  --color-danger: #C62828;
  --color-danger-soft: rgba(198, 40, 40, .08);
  --color-warning: #8A5A00;
  --color-warning-soft: rgba(233, 161, 0, .16);
  --color-like: #E0245E;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --text-xs: .8125rem;   /* 13 */
  --text-sm: .875rem;    /* 14 */
  --text-base: .9375rem; /* 15 */
  --text-md: 1.0625rem;  /* 17 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.625rem;   /* 26 */
  --text-2xl: 2.125rem;  /* 34 */
  --text-3xl: clamp(2.4rem, 5vw, 3.75rem);

  /* Spacing scale (4pt) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Radius */
  --border-radius-xs: 6px;
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-lg: 0 4px 32px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .06);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-normal: 240ms var(--ease-out);
  --transition-slow: 420ms var(--ease-out);

  /* Layout */
  --sidebar-width: 240px;
  --rail-width: 72px;
  --topbar-height: 56px;
  --bottom-nav-height: 64px;
  --content-max: 1280px;
  --feed-max: 620px;
  --panel-width: 320px;

  /* Layers */
  --z-sticky: 40;
  --z-nav: 60;
  --z-dropdown: 80;
  --z-drawer: 200;
  --z-modal: 220;
  --z-toast: 300;
  --z-progress: 400;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #FF6B4A;
  --color-primary-hover: #FF8669;
  --color-primary-soft: rgba(255, 107, 74, .14);
  --color-primary-ring: rgba(255, 107, 74, .36);
  --color-on-primary: #1A0802;
  --color-secondary: #6CCB98;
  --color-secondary-soft: rgba(108, 203, 152, .13);
  --color-accent: #FFC233;
  --color-accent-soft: rgba(255, 194, 51, .14);
  --gradient-ai-soft: linear-gradient(120deg, rgba(255,138,61,.16), rgba(229,70,43,.12) 50%, rgba(194,24,91,.16));

  --color-background: #0F0F0F;
  --color-surface: #0F0F0F;
  --color-surface-hover: #272727;
  --color-surface-sunken: #1F1F1F;
  --color-surface-raised: #212121;
  --color-chip: #272727;
  --color-chip-hover: #3F3F3F;
  --color-surface-glass: rgba(15, 15, 15, .96);
  --color-overlay: rgba(0, 0, 0, .7);
  --color-border: #303030;
  --color-border-strong: #474747;

  --color-text: #F1F1F1;
  --color-text-muted: #AAAAAA;
  --color-text-subtle: #8F8F8F;

  --color-success: #6CCB98;
  --color-success-soft: rgba(108, 203, 152, .12);
  --color-danger: #FF7A70;
  --color-danger-soft: rgba(255, 122, 112, .12);
  --color-warning: #FFC233;
  --color-warning-soft: rgba(255, 194, 51, .13);
  --color-like: #FF4D7D;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .7);
}