/* ==========================================================================
   ROOT.CSS — single source of truth for all CSS custom properties
   Load this before any other stylesheet.
   ========================================================================== */

/* -------------------------------------------------
   DEFAULT = LIGHT THEME
   ------------------------------------------------- */
:root {
  /* FONTS */
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-nav: "DM Sans", system-ui, sans-serif;
  --font-logo: "Corinthia", cursive;

  /* DESIGN TOKENS */
  --accent: #1a1a1a;
  --accent-light: #f5f5f3;
  --on-accent: #fff;
  --surface: #ffffff;
  --bg: #f8f7f5;
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.18);
  --text: #1a1a1a;
  --text-muted: #666;
  --text-faint: #999;
  --surface: #ffffff;
  
  /* PALETTE */
  --red: #c0392b;
  --green: #27ae60;
  --amber: #b8730a;
  --amber-dark: #9a5f08;
  --amber-text: #7a4f00;
  --amber-bg: #fff8ec;
  --amber-border: #e8c46a;
  --deal-bg: #edfaf4;
  --deal-border: #6ecf9d;
  --deal-text: #1a7a4a;
  --wishlist-color: #e74c3c;
  --wishlist-bg: #fff5f5;
  --pip-filled: #e8a020;
  --accent-hover: #333;

  /* CHECKOUT — warm parchment palette */
  --co-surface: #f9f6f1;
  --co-border: #e8e0d4;
  --co-border-inner: #ede6da;
  --co-border-alt: #e4dbd0;
  --co-accent: #8b6f47;
  --co-accent-hover: #7a5f38;
  --co-accent-bg: #faf7f3;
  --co-accent-glow: rgba(139, 111, 71, .08);
  --co-logged-bg: #f0f7f0;
  --co-logged-border: #c8dfc8;
  --co-logged-text: #2a5a2a;

  /* RADIUS */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* MOTION */
  --transition: 0.18s ease;

  /* SHADOWS */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.09);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* PAGE */
  --body-background: #ffffff;
  --header-background: #f0f0f0;
  --page-background: #ffffff;
  --section-background: #ffffff;
  --sidebar-w: 220px;

  /* NAV */
  --nav-h: 64px;
  --nav-bg: #ffffff;
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-text: #1a1a1a;
  --nav-text-muted: #555;
  --nav-text-scrolled: #000;
  --nav-bg-scrolled: transparent;
  --nav-active: #1a1a1a;
  --nav-hover-bg: #f5f5f3;
  --nav-accent: #1a1a1a;
  --nav-radius: 8px;
  --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  --nav-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --nav-transition: 0.18s ease;
  --company-name: rgba(13, 11, 11, 0.95);
  --dropdown-background: rgba(255, 255, 255, 0.95);
  --dropdown-text: #111;
  --hamburger-background: #111;

  /* TYPOGRAPHY */
  --heading-color: #1a1a1a;
  --serving-heading: rgb(30, 9, 9);
  --body-text: #333333;
  --small-text: #4a4a4a;
  --dark: rgb(0, 0, 0);

  /* CARDS */
  --card-border: #333333;
  --card-background: #ffffff;
  --card-shadow: #444444;
  --card-hover: pink;
  --card-text: #333333;

  /* CHECKOUT */
  --checkout-text: #ffffff;

  /* BUTTONS */
  --button-text: #ffffff;
  --button-text-active: rgb(45, 43, 43);
  --button-background: rgb(30, 9, 9);
  --button-hover: hsl(30, 35%, 55%);
  --button-active: hsl(50, 30%, 57%);
  --button-border: rgb(30, 9, 9);
  --submit-button: rgb(9, 44, 9);
  --submit-button-text: #fff;

  /* FOOTER */
  --footer-background: #f9f9f9;
  --footer-text: #111;
  --footer-heading: #111;
  --footer-subtext: #201e1e;
  --footer-link: #111;
  --footer-link-hover: #201e1e;
  --footer-border: rgba(0, 0, 0, 0.1);

  /* FORMS */
  --form-background: #ffffff;
  --form-text: var(--body-text);
  --form-heading: var(--heading-color);
  --form-border: #cccccc;
  --form-input-background: #fafafa;
  --form-accent: #574fd2;
  --form-accent-soft: rgba(87, 79, 210, 0.15);
  --form-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  /* LINKS */
  --link-color: #4338ca;
  --link-hover: #312e81;

  /* ERRORS & SUCCESS */
  --error-background: #ffe0e0;
  --error-border: #f5c2c2;
  --error-text: #a00;
  --alert-background: red;
  --alert-text: white;
  --success-background: #e6f9ed;
  --success-border: #bde5c8;
  --success-text: #2d8a4e;

  /* LOADER */
  --loader-background: rgba(255, 255, 255, 0.85);
  --loader-spinner: #574fd2;
  --loader-spinner-track: #ddd;

  /* BRAND */
  --brand-primary: #2d221e;
  --brand-seconday: hsl(30, 35%, 55%);
}

/* -------------------------------------------------
   SYSTEM DARK MODE (only when no manual override)
   ------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body:not(.light-theme) {
    /* DESIGN TOKENS */
    --accent: #e0e0e0;
    --accent-light: #2a2a2a;
    --on-accent: #111;
    --surface: #1e1e1e;
    --bg: #141414;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #e6e6e6;
    --text-muted: #aaa;
    --text-faint: #777;

    --amber-text: #e8a83a;
    --wishlist-color: #f1614e;
    --wishlist-bg: #2d1515;
    --accent-hover: #d0d0d0;

    /* CHECKOUT */
    --co-surface: #1e1d1d;
    --co-border: #3a3734;
    --co-border-inner: #2e2c2a;
    --co-border-alt: #332f2c;
    --co-accent: #c9a87c;
    --co-accent-hover: #d4b48a;
    --co-accent-bg: #1e1b19;
    --co-accent-glow: rgba(201, 168, 124, .12);
    --co-logged-bg: #1a2a1a;
    --co-logged-border: #2d4a2d;
    --co-logged-text: #6ecf6e;

    /* PAGE */
    --body-background: #171616;
    --header-background: #030303;
    --page-background: #171616;
    --section-background: #171616;

    /* NAV */
    --nav-bg: #1a1a1a;
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-text: #ffffff;
    --nav-text-muted: #aaa;
    --nav-text-scrolled: #ffffff;
    --nav-bg-scrolled: rgba(23, 22, 22, 0.95);
    --nav-active: #e6e6e6;
    --nav-hover-bg: #2a2a2a;
    --nav-accent: #e0e0e0;
    --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);
    --nav-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --company-name: rgba(255, 255, 255, 0.95);
    --dropdown-background: rgba(23, 22, 22, 0.95);
    --dropdown-text: #ffffff;
    --hamburger-background: #ffffff;

    /* TYPOGRAPHY */
    --heading-color: #e6e6e6;
    --serving-heading: hsl(50, 30%, 57%);
    --body-text: #f8f3f3;
    --small-text: #efeaea;
    --dark: #ffffff;

    /* CARDS */
    --card-border: hsl(50, 30%, 57%);
    --card-background: #ffffff;
    --card-shadow: hsl(50, 84%, 59%);
    --card-hover: hsl(51, 35%, 36%);
    --card-text: #333333;

    /* CHECKOUT */
    --checkout-text: #ffffff;

    /* BUTTONS */
    --button-text: #333333;
    --button-text-active: rgb(45, 43, 43);
    --button-background: #2d221e;
    --button-hover: hsl(30, 35%, 55%);
    --button-active: hsl(50, 30%, 57%);
    --button-border: rgb(45, 43, 43);
    --submit-button: rgb(214, 222, 214);
    --submit-button-text: #000;

    /* FOOTER */
    --footer-background: #171616;
    --footer-text: #e6e6e6;
    --footer-heading: #f1f1f1;
    --footer-subtext: #cfcfcf;
    --footer-link: #ffffff;
    --footer-link-hover: #ddd;
    --footer-border: rgba(255, 255, 255, 0.1);

    /* FORMS */
    --form-bg: #1e1d1d;
    --form-heading: var(--heading-color);
    --form-input-bg: #262525;
    --form-border: #3a3a3a;
    --form-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* LINKS */
    --link-color: hsl(36, 80%, 75%);
    --link-hover: hsl(36, 90%, 85%);

    /* ERRORS & SUCCESS */
    --error-background: #ffe0e0;
    --error-border: #f5c2c2;
    --error-text: #a00;
    --alert-text: white;
    --success-background: #e6f9ed;
    --success-border: #bde5c8;
    --success-text: #2d8a4e;

    /* LOADER */
    --loader-background: rgba(0, 0, 0, 0.7);
    --loader-spinner-track: #444;

    /* BRAND */
    --brand-primary: #2d221e;
    --brand-seconday: hsl(30, 35%, 55%);
  }
}

/* -------------------------------------------------
   MANUAL DARK THEME (user toggle)
   ------------------------------------------------- */
body.dark-theme {
  /* DESIGN TOKENS */
  --accent: #e0e0e0;
  --accent-light: #2a2a2a;
  --on-accent: #111;
  --surface: #1e1e1e;
  --bg: #141414;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #e6e6e6;
  --text-muted: #aaa;
  --text-faint: #777;
  --amber-text: #e8a83a;
  --wishlist-color: #f1614e;
  --wishlist-bg: #2d1515;
  --accent-hover: #d0d0d0;

  /* CHECKOUT */
  --co-surface: #1e1d1d;
  --co-border: #3a3734;
  --co-border-inner: #2e2c2a;
  --co-border-alt: #332f2c;
  --co-accent: #c9a87c;
  --co-accent-hover: #d4b48a;
  --co-accent-bg: #1e1b19;
  --co-accent-glow: rgba(201, 168, 124, .12);
  --co-logged-bg: #1a2a1a;
  --co-logged-border: #2d4a2d;
  --co-logged-text: #6ecf6e;

  /* PAGE */
  --body-background: #171616;
  --header-background: #030303;
  --page-background: #171616;
  --section-background: #171616;

  /* NAV */
  --nav-bg: #1a1a1a;
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-text: #ffffff;
  --nav-text-muted: #aaa;
  --nav-text-scrolled: #ffffff;
  --nav-bg-scrolled: rgba(23, 22, 22, 0.95);
  --nav-active: #e6e6e6;
  --nav-hover-bg: #2a2a2a;
  --nav-accent: #e0e0e0;
  --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);
  --nav-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --company-name: rgba(255, 255, 255, 0.95);
  --dropdown-background: rgba(23, 22, 22, 0.95);
  --dropdown-text: #ffffff;
  --hamburger-background: #ffffff;

  /* TYPOGRAPHY */
  --heading-color: #e6e6e6;
  --serving-heading: rgb(245, 203, 119);
  --body-text: #f8f3f3;
  --small-text: #efeaea;
  --dark: #ffffff;

  /* CARDS */
  --card-border: hsl(50, 30%, 57%);
  --card-background: #ffffff;
  --card-shadow: hsl(50, 84%, 59%);
  --card-hover: hsl(51, 35%, 36%);
  --card-text: #333333;

  /* CHECKOUT */
  --checkout-text: #ffffff;

  /* BUTTONS */
  --button-text: #ffffff;
  --button-text-active: rgb(45, 43, 43);
  --button-background: #2d221e;
  --button-hover: hsl(30, 35%, 55%);
  --button-active: hsl(50, 30%, 57%);
  --button-border: rgb(45, 43, 43);
  --submit-button: rgb(214, 222, 214);
  --submit-button-text: #000;

  /* FOOTER */
  --footer-background: #171616;
  --footer-text: #e6e6e6;
  --footer-heading: #f1f1f1;
  --footer-subtext: #cfcfcf;
  --footer-link: #ffffff;
  --footer-link-hover: #ddd;
  --footer-border: rgba(255, 255, 255, 0.1);

  /* LINKS */
  --link-color: hsl(36, 80%, 75%);
  --link-hover: hsl(36, 90%, 85%);

  /* ERRORS & SUCCESS */
  --error-background: #ffe0e0;
  --error-border: #f5c2c2;
  --error-text: #a00;
  --alert-text: white;
  --success-background: #e6f9ed;
  --success-border: #bde5c8;
  --success-text: #2d8a4e;

  /* FORMS */
  --form-bg: #1e1d1d;
  --form-heading: var(--heading-color);
  --form-input-bg: #262525;
  --form-border: #3a3a3a;
  --form-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* LOADER */
  --loader-background: rgba(255, 255, 255, 0.85);
  --loader-spinner: #574fd2;
  --loader-spinner-track: #ddd;

  /* BRAND */
  --brand-primary: #2d221e;
  --brand-seconday: hsl(30, 35%, 55%);
}

body.dark-theme .dropdown-menu {
  background: var(--dropdown-background);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------
   MANUAL LIGHT THEME (explicit override)
   ------------------------------------------------- */
body.light-theme {
  /* DESIGN TOKENS */
  --accent: #1a1a1a;
  --accent-light: #f5f5f3;
  --surface: #ffffff;
  --bg: #f8f7f5;
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.18);
  --text: #1a1a1a;
  --text-muted: #666;
  --text-faint: #999;
  --on-accent: #fff;
  --amber-text: #7a4f00;
  --wishlist-color: #e74c3c;
  --wishlist-bg: #fff5f5;
  --accent-hover: #333;

  /* CHECKOUT */
  --co-surface: #f9f6f1;
  --co-border: #e8e0d4;
  --co-border-inner: #ede6da;
  --co-border-alt: #e4dbd0;
  --co-accent: #8b6f47;
  --co-accent-hover: #7a5f38;
  --co-accent-bg: #faf7f3;
  --co-accent-glow: rgba(139, 111, 71, .08);
  --co-logged-bg: #f0f7f0;
  --co-logged-border: #c8dfc8;
  --co-logged-text: #2a5a2a;

  /* PAGE */
  --body-background: #ffffff;
  --header-background: #f0f0f0;
  --page-background: #ffffff;
  --section-background: #ffffff;

  /* NAV */
  --nav-bg: #ffffff;
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-text: #1a1a1a;
  --nav-text-muted: #555;
  --nav-text-scrolled: #000;
  --nav-bg-scrolled: transparent;
  --nav-active: #1a1a1a;
  --nav-hover-bg: #f5f5f3;
  --nav-accent: #1a1a1a;
  --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  --nav-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --company-name: rgba(13, 11, 11, 0.95);
  --dropdown-background: rgba(255, 255, 255, 0.95);
  --dropdown-text: #111;
  --hamburger-background: #111;

  /* TYPOGRAPHY */
  --heading-color: #1a1a1a;
  --serving-heading: rgb(30, 9, 9);
  --body-text: #333333;
  --small-text: #666666;
  --dark: rgb(0, 0, 0);

  /* CARDS */
  --card-border: #333333;
  --card-background: #ffffff;
  --card-shadow: #444444;
  --card-hover: pink;
  --card-text: #333333;

  /* CHECKOUT */
  --checkout-text: #ffffff;

  /* BUTTONS */
  --button-text: #ffffff;
  --button-text-active: rgb(45, 43, 43);
  --button-background: rgb(30, 9, 9);
  --button-hover: hsl(30, 35%, 55%);
  --button-active: hsl(50, 30%, 57%);
  --button-border: rgb(30, 9, 9);
  --submit-button: rgb(9, 44, 9);
  --submit-button-text: #fff;

  /* FOOTER */
  --footer-background: #f9f9f9;
  --footer-text: #111;
  --footer-heading: #111;
  --footer-subtext: #201e1e;
  --footer-link: #111;
  --footer-link-hover: #201e1e;
  --footer-border: rgba(0, 0, 0, 0.1);

  /* ERRORS & SUCCESS */
  --error-background: #ffe0e0;
  --error-border: #f5c2c2;
  --error-text: #a00;
  --alert-text: white;
  --success-background: #e6f9ed;
  --success-border: #bde5c8;
  --success-text: #2d8a4e;

  /* FORMS */
  --form-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  /* LOADER */
  --loader-background: rgba(255, 255, 255, 0.85);
  --loader-spinner: #574fd2;
  --loader-spinner-track: #ddd;

  /* BRAND */
  --brand-primary: #2d221e;
  --brand-seconday: hsl(30, 35%, 55%);
}