/* ============================================================
   SAPORI — Design System Variables
   Premium Italian Recipe PWA
   ============================================================ */

/* ============================================================
   DEFAULT / CLASSICO LIGHT (fallback :root)
   ============================================================ */
:root {
  /* — Color Palette — */
  --primary: #E85D3A;
  --primary-ink: #B93818;
  --primary-light: #FF8A65;
  --primary-dark: #C0421D;
  --secondary: #FFA726;
  --bg-primary: #FAF7F5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FFF3E0;
  --text-primary: #2D1B14;
  --text-secondary: #5D4037;
  --text-muted: #6B4F45;
  --border: rgba(93, 64, 55, 0.12);
  --shadow: rgba(232, 93, 58, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #E85D3A, #FFA726);
  --on-primary: #030303;

  /* — Semantic Colors — */
  --success: #047857;
  --warning: #92400E;
  --danger: #B91C1C;
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-danger: #FFFFFF;

  /* — Border Radius — */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* — Shadows — */
  --shadow-sm: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow);
  --shadow-md: 0 4px 14px var(--shadow), 0 2px 6px var(--shadow);
  --shadow-lg: 0 10px 40px var(--shadow), 0 4px 12px var(--shadow);

  /* — Transitions — */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* — Typography — */
  --font-heading: 'Aptos Display', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Aptos', 'Segoe UI', system-ui, sans-serif;

  /* — Z-Index Scale — */
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-nav: 100;

  /* — Spacing (optional helpers) — */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* ============================================================
   CLASSICO — LIGHT
   ============================================================ */
[data-palette="classico"][data-theme="light"],
html:not([data-palette])[data-theme="light"],
html:not([data-palette]):not([data-theme]) {
  --primary: #E85D3A;
  --primary-ink: #B93818;
  --primary-light: #FF8A65;
  --primary-dark: #C0421D;
  --secondary: #FFA726;
  --bg-primary: #FAF7F5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FFF3E0;
  --text-primary: #2D1B14;
  --text-secondary: #5D4037;
  --text-muted: #6B4F45;
  --border: rgba(93, 64, 55, 0.12);
  --shadow: rgba(232, 93, 58, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #E85D3A, #FFA726);
}

/* ============================================================
   CLASSICO — DARK
   ============================================================ */
[data-palette="classico"][data-theme="dark"],
html:not([data-palette])[data-theme="dark"] {
  --primary: #FF7F5C;
  --primary-ink: #FFAB91;
  --primary-light: #FFAB91;
  --primary-dark: #E85D3A;
  --secondary: #FFB74D;
  --bg-primary: #1A1614;
  --bg-secondary: #2D2420;
  --bg-tertiary: #3E302A;
  --text-primary: #FAF0EB;
  --text-secondary: #D7CCC8;
  --text-muted: #C4B5AE;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(45, 36, 32, 0.7);
  --glass-border: rgba(255, 127, 92, 0.15);
  --gradient: linear-gradient(135deg, #FF7F5C, #FFB74D);
}

/* ============================================================
   OCEANO — LIGHT
   ============================================================ */
[data-palette="oceano"][data-theme="light"] {
  --primary: #0EA5E9;
  --primary-ink: #0369A1;
  --primary-light: #38BDF8;
  --primary-dark: #0284C7;
  --secondary: #06B6D4;
  --bg-primary: #F0F9FF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #E0F2FE;
  --text-primary: #0C2D48;
  --text-secondary: #1E6091;
  --text-muted: #476477;
  --border: rgba(14, 165, 233, 0.12);
  --shadow: rgba(14, 165, 233, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #0EA5E9, #06B6D4);
}

/* ============================================================
   OCEANO — DARK
   ============================================================ */
[data-palette="oceano"][data-theme="dark"] {
  --primary: #38BDF8;
  --primary-ink: #7DD3FC;
  --primary-light: #7DD3FC;
  --primary-dark: #0EA5E9;
  --secondary: #22D3EE;
  --bg-primary: #0C1B2E;
  --bg-secondary: #152238;
  --bg-tertiary: #1E3A5F;
  --text-primary: #E0F2FE;
  --text-secondary: #BAE6FD;
  --text-muted: #A8C4D8;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(21, 34, 56, 0.7);
  --glass-border: rgba(56, 189, 248, 0.15);
  --gradient: linear-gradient(135deg, #38BDF8, #22D3EE);
}

/* ============================================================
   BOSCO — LIGHT
   ============================================================ */
[data-palette="bosco"][data-theme="light"] {
  --primary: #16A34A;
  --primary-ink: #15803D;
  --primary-light: #4ADE80;
  --primary-dark: #15803D;
  --secondary: #84CC16;
  --bg-primary: #F0FDF4;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #DCFCE7;
  --text-primary: #14291E;
  --text-secondary: #2D5A3D;
  --text-muted: #466651;
  --border: rgba(22, 163, 74, 0.12);
  --shadow: rgba(22, 163, 74, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #16A34A, #84CC16);
}

/* ============================================================
   BOSCO — DARK
   ============================================================ */
[data-palette="bosco"][data-theme="dark"] {
  --primary: #4ADE80;
  --primary-ink: #86EFAC;
  --primary-light: #86EFAC;
  --primary-dark: #16A34A;
  --secondary: #A3E635;
  --bg-primary: #0F1F14;
  --bg-secondary: #1A3323;
  --bg-tertiary: #234D33;
  --text-primary: #DCFCE7;
  --text-secondary: #BBF7D0;
  --text-muted: #AAC9B4;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(26, 51, 35, 0.7);
  --glass-border: rgba(74, 222, 128, 0.15);
  --gradient: linear-gradient(135deg, #4ADE80, #A3E635);
}

/* ============================================================
   TRAMONTO — LIGHT
   ============================================================ */
[data-palette="tramonto"][data-theme="light"] {
  --primary: #A855F7;
  --primary-ink: #7E22CE;
  --primary-light: #C084FC;
  --primary-dark: #9333EA;
  --secondary: #EC4899;
  --bg-primary: #FAF5FF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F3E8FF;
  --text-primary: #2E1540;
  --text-secondary: #6B3FA0;
  --text-muted: #6F5A7D;
  --border: rgba(168, 85, 247, 0.12);
  --shadow: rgba(168, 85, 247, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #A855F7, #EC4899);
}

/* ============================================================
   TRAMONTO — DARK
   ============================================================ */
[data-palette="tramonto"][data-theme="dark"] {
  --primary: #C084FC;
  --primary-ink: #D8B4FE;
  --primary-light: #D8B4FE;
  --primary-dark: #A855F7;
  --secondary: #F472B6;
  --bg-primary: #1E0F2E;
  --bg-secondary: #2D1B42;
  --bg-tertiary: #3D2658;
  --text-primary: #F3E8FF;
  --text-secondary: #E9D5FF;
  --text-muted: #C8B5D9;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(45, 27, 66, 0.7);
  --glass-border: rgba(192, 132, 252, 0.15);
  --gradient: linear-gradient(135deg, #C084FC, #F472B6);
}

/* ============================================================
   AMETISTA — LIGHT
   ============================================================ */
[data-palette="ametista"][data-theme="light"] {
  --primary: #8B5CF6;
  --primary-ink: #6D28D9;
  --primary-light: #A78BFA;
  --primary-dark: #7C3AED;
  --secondary: #EC4899;
  --bg-primary: #F9F5FF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F3E8FF;
  --text-primary: #2E1065;
  --text-secondary: #5B21B6;
  --text-muted: #67557F;
  --border: rgba(139, 92, 246, 0.12);
  --shadow: rgba(139, 92, 246, 0.06);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #8B5CF6, #EC4899);
}

/* ============================================================
   AMETISTA — DARK
   ============================================================ */
[data-palette="ametista"][data-theme="dark"] {
  --primary: #A78BFA;
  --primary-ink: #C4B5FD;
  --primary-light: #C4B5FD;
  --primary-dark: #8B5CF6;
  --secondary: #F472B6;
  --bg-primary: #170F26;
  --bg-secondary: #24183B;
  --bg-tertiary: #322152;
  --text-primary: #F3E8FF;
  --text-secondary: #DDD6FE;
  --text-muted: #C9BCE0;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(36, 24, 59, 0.7);
  --glass-border: rgba(167, 139, 250, 0.15);
  --gradient: linear-gradient(135deg, #A78BFA, #F472B6);
}

/* ============================================================
   AUTUNNO — LIGHT
   ============================================================ */
[data-palette="autunno"][data-theme="light"] {
  --primary: #A67C58;
  --primary-ink: #70452C;
  --primary-light: #BC9474;
  --primary-dark: #6C442A;
  --secondary: #D4A373;
  --bg-primary: #FDFBF7;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F2E9E1;
  --text-primary: #3D271D;
  --text-secondary: #5E3D2F;
  --text-muted: #6B5A52;
  --border: rgba(140, 90, 60, 0.12);
  --shadow: rgba(140, 90, 60, 0.06);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #A67C58, #D4A373);
}

/* ============================================================
   AUTUNNO — DARK
   ============================================================ */
[data-palette="autunno"][data-theme="dark"] {
  --primary: #D4A373;
  --primary-ink: #E6CCB2;
  --primary-light: #E6CCB2;
  --primary-dark: #8C5A3C;
  --secondary: #D4A373;
  --bg-primary: #1C1512;
  --bg-secondary: #2B211C;
  --bg-tertiary: #3D2F28;
  --text-primary: #F5EBE6;
  --text-secondary: #E6CCB2;
  --text-muted: #C8B8AF;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(43, 33, 28, 0.7);
  --glass-border: rgba(212, 163, 115, 0.15);
  --gradient: linear-gradient(135deg, #D4A373, #E6CCB2);
}

/* ============================================================
   ZAFFERANO — LIGHT
   ============================================================ */
[data-palette="zafferano"][data-theme="light"] {
  --primary: #D97706;
  --primary-ink: #92400E;
  --primary-light: #F59E0B;
  --primary-dark: #B45309;
  --secondary: #FBBF24;
  --bg-primary: #FFFDF5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FEF3C7;
  --text-primary: #451A03;
  --text-secondary: #78350F;
  --text-muted: #6B4A20;
  --border: rgba(217, 119, 6, 0.12);
  --shadow: rgba(217, 119, 6, 0.06);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient: linear-gradient(135deg, #D97706, #FBBF24);
}

/* ============================================================
   ZAFFERANO — DARK
   ============================================================ */
[data-palette="zafferano"][data-theme="dark"] {
  --primary: #F59E0B;
  --primary-ink: #FCD34D;
  --primary-light: #FBBF24;
  --primary-dark: #D97706;
  --secondary: #FCD34D;
  --bg-primary: #1A120C;
  --bg-secondary: #291D13;
  --bg-tertiary: #3D2B1C;
  --text-primary: #FFFBEB;
  --text-secondary: #FEF3C7;
  --text-muted: #D6C2A7;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(41, 29, 19, 0.7);
  --glass-border: rgba(245, 158, 11, 0.15);
  --gradient: linear-gradient(135deg, #F59E0B, #FCD34D);
}

/* Semantic colors need different foregrounds in light and dark modes. */
[data-theme="light"],
html:not([data-theme]) {
  --success: #047857;
  --warning: #92400E;
  --danger: #B91C1C;
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-danger: #FFFFFF;
}

[data-theme="dark"] {
  --success: #6EE7B7;
  --warning: #FCD34D;
  --danger: #FCA5A5;
  --on-success: #111827;
  --on-warning: #111827;
  --on-danger: #111827;
}