/* ============================================================
   Condiment Packet Gallery — THEME CSS
   Unified design tokens for light/dark + sauce themes
============================================================ */

/* ------------------------------------------------------------
   Base tokens (light/default mode)
------------------------------------------------------------ */
:root {
  /* Footer */
  --footer-height: 15px;
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  --font-size-xxxs: 8px;
  --font-size-xxs: 9px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;

  /* Layout */
  --page-bg: #f3f3f3;
  --static-padding-sm: 12px;
  --static-padding-lg: 18px;

  /* Text */
  --text-main: #ffffff;
  --text-muted: #6b7280;

  /* Basic surfaces */
  --surface: #ffffff;
  --surface-alt: #f5f5f5;

  /* Borders */
  --border-subtle: #d0d0d0;
  --border-strong: #999999;

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 6px 20px rgba(0, 0, 0, 0.3);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-xfast: 50ms ease-out;
  --transition-fast: 120ms ease-out;
  --transition-med: 180ms ease-out;
  --transition-slow: 250ms ease-out;

  /* ============================================================
     GLOBAL CONTROLS (used everywhere)
  ============================================================ */
  --general-white: white;
  --general-black: black;
  --white-to-gray: white;
  --light-gray: #bbbbbb;
  --med-gray: #555555;
  --dark-gray: #333333;
  --control-height: 30px;
  --control-padding-x: 10px;
  --control-radius: 5px;
  --control-gap: 8px;

  --control-bg: #ffffff;
  --control-bg-hover: #f3f4f6;
  --control-bg-active: #e5e7eb;

  --control-border-color: #555555;

  --control-text-color: black;
  --control-placeholder-color: #9ca3af;

  --control-shadow-soft: var(--shadow-soft);
  --control-shadow-strong: var(--shadow-strong);

  --sort-btn-color: #555555;
  --sort-btn-text-color: #ffffff;

  --qr-size: 90;

  /* ============================================================
     PACKET DB — Table + Thumbnail Grid
  ============================================================ */
  --packet-bg: #111111;
  --packet-text: #eeeeee;
  --packet-text-muted: #aaaaaa;

  --packet-border: #333333;
  --packet-border-strong: #444444;

  --thumb-bg: #000000;
  --thumb-hover-scale: 1.1;

  --thumb-size: 75px;
  --chunk-width: 18px;
  --chunk-indent: 24px;

  /* Table header / chunk headers */
  --table-bg: var(--packet-bg);
  --table-text: var(--packet-text);
  --table-text-muted: var(--packet-text-muted);

  --table-header-bg: #1b1b1f;
  --table-header-text: #eeeeee;
  --table-header-border: #333333;

  --table-row-bg: var(--packet-bg);
  --table-row-alt-bg: var(--packet-bg);
  --table-row-hover-bg: #222222;
  --table-row-selected-bg: #1b1b1b;
  --table-row-divider: #222222;

  --chunk-header-bg: var(--table-header-bg);
  --chunk-header-text: var(--table-header-text);
  --chunk-header-border: var(--table-header-border);
  --chunk-guideline-color: var(--border-subtle);

  /* Modal */
  --modal-bg: #1b1b1b;
  --modal-border: var(--packet-border);
  --panel-bg: #555555;
  --panel-bg-alt: #555555;

  /* Filter panel + SearchPane */
  --filter-panel-bg: white;
  --filter-panel-border: var(--packet-border);

  --sortandfilter-panels-bg: #777777;

  --searchpane-bg: #bbbbbb;
  --searchpane-input-bg: var(--control-bg);
  --searchpane-input-text: var(--control-text-color);

  /* Slider */
  --slider-track: white;
  --slider-thumb: #333333;

  /* ============================================================
     Sort stack tokens
  ============================================================ */
  --stack-color: #666666; /* used for active stacked sorts */
  --stack-text-color: #ffffff;

  --sort-bubble-bg: #ffffff;
  --sort-bubble-text: #000000;

  --stack-rank-bg: #ffcc00;
  --stack-rank-text: #000000;
  --stack-rank-border: #555555;

  --stack-banner-bg: #1d1d1d;
  --stack-banner-text: #eeeeee;
  --stack-banner-muted: #999999;

  /* Danger (revert) button */
  --danger-bg: #990000;
  --danger-bg-hover: #ff0000;

  /* ========================================
     SAUCE PALETTE — LIGHT MODE
  =========================================== */
  --accent-overlay-strength: 0.12;
  --accent-overlay-soft: 0.06;
  --accent-overlay-border: 0.35;

  /* ============================================================
     SAUCE PALETTE — LIGHT MODE
  ============================================================ */
  --color-ketchup: #ff0c0c;
  --color-ketchup-alt: #850000;
  --color-mustard: #f1cd00;
  --color-mustard-alt: #b08700;
  --color-hotmustard: #e8ca39;
  --color-hotmustard-alt: #a89333;
  --color-honeymustard: #d6c467;
  --color-honeymustard-alt: #967d0e;
  --color-brownmustard: #9c7f2a;
  --color-brownmustard-alt: #6b5804;
  --color-mayo: #0051ff;
  --color-mayo-alt: #00aeff;
  --color-miraclewhip: #558bff;
  --color-miraclewhip-alt: #53c9ff;
  --color-relish: #57a957;
  --color-relish-alt: #aed345;
  --color-mint: #39af6e;
  --color-mint-alt: #0e8f30;
  --color-onion: #aed345;
  --color-onion-alt: #57a957;
  --color-hot: #ff7700;
  --color-hot-alt: #ff0000;
  --color-bbq: #7a371c;
  --color-bbq-alt: #3b2117;
  --color-steak: #3b2117;
  --color-steak-alt: #662f19;
  --color-horseradish: #b9ba9a;
  --color-horseradish-alt: #758289;
  --color-brown: #522c1d;
  --color-brown-alt: #2e1810;
  --color-soy: #2b0070;
  --color-soy-alt: #57006d;
  --color-wasabi: #98bf65;
  --color-wasabi-alt: #5e3868;
  --color-sweetandsour: #bf8065;
  --color-sweetandsour-alt: #6c3143;
  --color-duck: #fa7e70;
  --color-duck-alt: #a51a44;
  --color-asian: #4800bd;
  --color-asian-alt: #300050;
  --color-tartar: #00d0ff;
  --color-tartar-alt: #0099ff;
  --color-seafood: #a0315d;
  --color-seafood-alt: #00c8e2;
  --color-oilvin: #d7a1d4;
  --color-oilvin-alt: #c4bd86;
  --color-vinegar: #d7a1d4;
  --color-vinegar-alt: #c4bd86;
  --color-oil: #adbe6d;
  --color-oil-alt: #c4bd86;
  --color-dressing: #24d31e;
  --color-dressing-alt: #3fa6dd;
  --color-jelly: #7a357a;
  --color-jelly-alt: #9f3b3b;
  --color-lemon: #e8dd4d;
  --color-lemon-alt: #bfe052;
  --color-honey: #b07d1d;
  --color-honey-alt: #ddbb3f;
  --color-sourcream: #3fa6dd;
  --color-sourcream-alt: #7ec5eb;
  --color-creamcheese: #3063ee;
  --color-creamcheese-alt: #abb0b3;
  --color-butter: #e9ec67;
  --color-butter-alt: #707070;
  --color-syrup: #8b6237;
  --color-syrup-alt: #907e47;
  --color-misc: #8a92ac;
  --color-misc-alt: #af6868;
  --color-marinara: #b01200;
  --color-marinara-alt: #701616;
  --color-signature: #ecbc80;
  --color-signature-alt: #be9e6e;
  --color-more: #555555;
  --color-more-alt: #383838;
  --color-about: #ff4747;
  --color-donate: #ffe926;
  --color-contact: #2a7bff;
  --color-instagram: #000000;
  --color-tiktok: #000000;
  --color-youtube: #000000;

  /* === COLLECTIONS === */
  /* Novelty: Circus Red / Yellow */
  --color-novelty: #cc0000;
  --color-novelty-alt: #ffcc00;

  /* Dual: Neon Magenta / Neon Yellow */
  --color-dual: #ff0266;
  --color-dual-alt: #dad603;

  /* Black & White: Charcoal / Off-white */
  --color-blackandwhite: #222222;
  --color-blackandwhite-alt: #e8e8e8;

  /* Foil: Silver / Chrome */
  --color-foil: #999999;
  --color-foil-alt: #eeeeee;

  /* Clear: Frosted Glass / Ice */
  --color-clear: #cce0e5;
  --color-clear-alt: #ffffff;

  /* Hypersaturated:  */
  --color-hypersaturated: #aaa;
  --color-hypersaturated-alt: #aaa;

  /* Uses translucent rgba so it blends perfectly into Light OR Dark mode! */
  --texture-hypersaturated: linear-gradient(
    to right,
    rgba(255, 0, 0, 0.75),
    rgba(255, 165, 0, 0.75),
    rgba(255, 255, 0, 0.75),
    rgba(0, 128, 0, 0.75),
    rgba(0, 0, 255, 0.75),
    rgba(75, 0, 130, 0.75),
    rgba(238, 130, 238, 0.75)
  );

  /* Taco Bell Quotes page */
  --color-tacobellquotes: #e0d523;
  --color-tacobellquotes-alt: #702082;

  /* Disney: */
  --color-disney: #ffcc00; /* Deep Magic Kingdom Blue */
  --color-disney-alt: #1a3673; /* Pixie Dust / Mickey Gold */

  /* Translucent twilight blue fading into a magical purple and gold dust. Blends perfectly with Light/Dark modes! */
  --texture-disney: linear-gradient(
    135deg,
    rgba(9, 28, 71, 0.85),
    /* Midnight Blue */ rgba(30, 60, 135, 0.75),
    /* Castle Blue */ rgba(106, 50, 159, 0.65),
    /* Royal Purple */ rgba(255, 204, 0, 0.55) /* Pixie Dust Gold */
  );

  /* Aviation: */
  --color-aviation: #cccccc; /* Cloud White */
  --color-aviation-alt: #1b81d6; /* Pan-Am / Boeing Blue */

  /* A smooth, high-altitude horizon fade */
  --texture-aviation: linear-gradient(
    180deg,
    rgba(27, 129, 214, 0.85),
    rgba(108, 182, 245, 0.65),
    rgba(255, 255, 255, 0.9)
  );

  /* Pizza Parlor: */
  --color-pizza: #cc0000; /* Marinara Red */
  --color-pizza-alt: #cc0000;

  /* A translucent red and white checkerboard */
  --texture-pizza: repeating-conic-gradient(#cc000066 0% 25%, #ffffff 0% 50%)
    50% / 40px 40px;

  /* ============================================================
     FRANCHISES
   ============================================================ */
  --color-mcdonalds: #ff0c0c;
  --color-mcdonalds-alt: #f1cd00;

  --color-burgerking: #da291c;
  --color-burgerking-alt: #0033a0;

  --color-tacobell: #702082;
  --color-tacobell-alt: #e0d523;

  --color-wendys: #e22138;
  --color-wendys-alt: #0072ce;

  --color-kfc: #e51a31;
  --color-kfc-alt: #222222;

  --color-chickfila: #e51636;
  --color-chickfila-alt: #b00e28;

  --color-arbys: #d62128;
  --color-arbys-alt: #2c1a16;

  --color-sonic: #002878;
  --color-sonic-alt: #e11b22;

  --color-popeyes: #f15a22;
  --color-popeyes-alt: #d11241;

  --color-jackinthebox: #d1202f;
  --color-jackinthebox-alt: #1b1c1e;

  --color-dairyqueen: #005988;
  --color-dairyqueen-alt: #da1a32;

  --color-whataburger: #ff770f;
  --color-whataburger-alt: #dadada;

  --color-pandaexpress: #d62128;
  --color-pandaexpress-alt: #1f1a17;

  --color-bojangles: #ffc600;
  --color-bojangles-alt: #e11b22;

  --color-deltaco: #006a4d;
  --color-deltaco-alt: #e31837;

  --color-subway: #008938;
  --color-subway-alt: #ffc40f;

  --color-whitecastle: #003b70;
  --color-whitecastle-alt: #cccccc;

  /* Pizza Hut: Classic Roof Red & Black */
  --color-pizzahut: #ee3124;
  --color-pizzahut-alt: #000000;

  /* Domino's: Domino Blue & Red */
  --color-dominos: #0055a5;
  --color-dominos-alt: #e31837;
  --color-domino: #0055a5;
  --color-domino-alt: #e31837;

  /* Papa John's: Heritage Green & Tomato Red */
  --color-papajohns: #00543d;
  --color-papajohns-alt: #df1921;
  --color-papajohn: #00543d;
  --color-papajohn-alt: #df1921;

  /* Little Caesars: Toga Orange & Black */
  --color-littlecaesars: #ff7300;
  --color-littlecaesars-alt: #000000;
  --color-littlecaesar: #ff7300;
  --color-littlecaesar-alt: #000000;

  /* Sbarro: Sbarro Red & Italian Green */
  --color-sbarro: #d31145;
  --color-sbarro-alt: #00843d;

  /* Marco's Pizza: Marco's Red & Deep Maroon */
  --color-marcos: #d2232a;
  --color-marcos-alt: #8b0015;
  --color-marcospizza: #d2232a;
  --color-marcospizza-alt: #8b0015;

  /* Hungry Howie's: Bright Yellow & Dark Brown/Black */
  --color-hungryhowiespizza: #ffc900;
  --color-hungryhowiespizza-alt: #231f20;
  --color-hungryhowies: #ffc900;
  --color-hungryhowies-alt: #231f20;

  /* ============================================================
     TACO BELL SAUCE TYPES
   ============================================================ */
  /* Breakfast Salsa: Egg-yolk yellow & deep goldenrod */
  --color-breakfastsalsa: #f4c430;
  --color-breakfastsalsa-alt: #b8860b;

  /* Diablo: Charcoal black & fiery maroon */
  --color-diablo: #222222;
  --color-diablo-alt: #5c0000;

  /* Fire: Classic bright red & deep maroon */
  --color-fire: #d1232a;
  --color-fire-alt: #7a1115;

  /* Fire-Roasted: Earthy dark brown & rustic maroon */
  --color-fireroasted: #5c4033;
  --color-fireroasted-alt: #4a0000;

  /* Hot: Bold vivid orange & burnt orange */
  --color-hot: #ff5a00;
  --color-hot-alt: #c24400;

  /* Lemon Juice: Bright citrus yellow & lime accent */
  --color-lemonjuice: #fff44f;
  --color-lemonjuice-alt: #84c225;

  /* Mild: Warm orange-yellow & dark mustard */
  --color-mild: #ffb81c;
  --color-mild-alt: #d37506;

  /* Verde: Vibrant lime & deep forest green */
  --color-verde: #78ba00;
  --color-verde-alt: #006400;

  /* Other Taco Bell: 1990s Retro Purple & Teal! */
  --color-othertacobell: #702082;
  --color-othertacobell-alt: #00d2d3;
  --color-misc: #702082;
  --color-misc-alt: #00d2d3;

  /* ============================================================
     ERA / TIMELINE PALETTE
============================================================ */
  --color-era-1970-1979: #abb836; /* Vintage yellow */
  --color-era-1980-1989: #8c6b4a; /* Faded vintage sepia/brown */
  --color-era-1990-1999: #c26945; /* Warm retro terracotta */
  --color-era-2000-2009: #3b759e; /* Web 2.0 muted blue */
  --color-era-2010-2019: #6a4c93; /* Modern vivid purple */
  --color-era-2020-2029: #a65398; /* Modern vivid purple */
  --color-era-unknownera: #6c7a89; /* Neutral slate gray */

  /* ============================================================
     Jelly & Fruit Sort Themes
============================================================ */
  /* Fruit Types */
  --color-strawberry: #e53935;
  --color-grape: #673ab7;
  --color-apple: #cebc6b;
  --color-orange: #ff9800;
  --color-mixed: #4caf50;
  --color-raspberry: #ad1457;
  --color-blackberry: #4a148c;
  --color-otherfruit: #9e9e9e;

  /* Jelly Types */
  --color-jam: #ee6767;
  /*--color-jelly: #ce93d8; Defined above in sauce pallette*/
  --color-marmalade: #bb9255;
  --color-preserves: #4fa89f;
  /*--color-honey: #e1d77b; Defined above in sauce pallette*/
  /*--color-syrup: #a3867d; Defined above in sauce pallette*/
  --color-othertype: #eeeeee;

  /* Custom Sort Keys */
  --color-buddypairs: #8b1919;
  --color-soloorphaned: #7f7f7f;
  --color-jellybuddy: #8758b0;

  /* ============================================================
      BRANDS & MANUFACTURERS
    ============================================================ */
  --color-heinz: #dddddd;
  --color-heinz-alt: #ff0c0c;

  --color-boarshead: #222222;
  --color-boarshead-alt: #c41230;

  --color-cfsauer: #003882;
  --color-cfsauer-alt: #d22030;

  --color-chefsquality: #006847;
  --color-chefsquality-alt: #c8102e;

  --color-flavorfresh: #009a44;
  --color-flavorfresh-alt: #ffd100;

  --color-fourinone: #da291c;
  --color-fourinone-alt: #0033a0;

  --color-hellmanns: #003a70;
  --color-hellmanns-alt: #ffd100;

  --color-houserecipe: #8b2332;
  --color-houserecipe-alt: #d4af37;

  --color-hunts: #da291c;
  --color-hunts-alt: #00833e;

  --color-kariout: #e31837;
  --color-kariout-alt: #222222;

  --color-kens: #00573d;
  --color-kens-alt: #cfab7a;

  --color-kikkoman: #ed1a3b;
  --color-kikkoman-alt: #ffc72c;

  --color-kraft: #003882;
  --color-kraft-alt: #d22030;

  --color-leekumkee: #e0d11e;
  --color-leekumkee-alt: #d7550a;

  --color-monarch: #002f6c;
  --color-monarch-alt: #c8102e;

  /* Portion Pac: */
  --color-portionpac: #d80a1b; /* Portion Pac Red */
  --color-portionpac-alt: #ffffff; /* Clean White */
  --texture-portionpac: radial-gradient(
    circle,
    rgb(230, 57, 71) 20%,
    transparent 10%
  );
  --texture-size-portionpac: 16px 16px;

  --color-redgold: #ffd100;
  --color-redgold-alt: #da291c;

  --color-servaportion: #da291c;
  --color-servaportion-alt: #0033a0;

  --color-unipro: #dddddd;
  --color-unipro-alt: #27583b;

  --color-westcreek: #006b3f;
  --color-westcreek-alt: #8b5b29;

  /* === COLORS === */
  --color-bg-page: #000000;
  --color-menu-bg: #d2d6d7;
  --color-menu-breathing-room: #d2d6d7;
  --color-title-bg: #edebe8;
  --color-btn-bg: #000000;
  --color-btn-text: #ffffff;

  /* Accent defaults (overridden by sauce) */
  --color-accent: var(--color-more);
  --color-accent-alt: var(--color-more-alt);
  --accent-strong: var(--color-accent);
  --accent-soft-bg: rgba(255, 255, 255, 0.06);
  --accent-soft-border: rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------------
   DARK MODE OVERRIDES
------------------------------------------------------------ */
body.darkmode {
  --page-bg: #0a0a0a;

  --general-white: black;
  --general-black: white;
  --white-to-gray: #555555;
  --light-gray: #777777;
  --med-gray: #555555;
  --dark-gray: #777777;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;

  --surface: #111111;
  --surface-alt: #000000;

  --border-subtle: #222222;
  --border-strong: #333333;

  --control-bg: #020617;
  --control-bg-hover: #111827;
  --control-bg-active: #111827;

  --control-border-color: #334155;
  --control-text-color: #e5e7eb;
  --control-placeholder-color: #64748b;

  --packet-bg: #000000;
  --packet-text: #f3f3f3;
  --packet-text-muted: #bbbbbb;

  --table-header-bg: #111111;
  --table-header-border: #222222;

  --panel-bg: #111111;
  --panel-bg-alt: #333333;

  --modal-bg: #1b1b1b;
  --modal-border: #333333;

  --searchpane-bg: #333333;
  --searchpane-input-bg: #1b1b1b;
  --searchpane-input-text: #eeeeee;

  --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.7);
  --shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.9);

  /* Slider in dark mode */
  --slider-track: #ffffff;
  --slider-thumb: #333333;

  /* Darkened sauce colors */
  --color-ketchup: #b01515;
  --color-mustard: #bba700;
  --color-mayo: #0036b3;
  --color-relish: #3b7c3b;
  --color-hot: #b34e00;
  --color-bbq: #5e2500;
  --color-asian: #250061;
  --color-seafood: #007b99;
  --color-vinegar: #888888;
  --color-jelly: #7a357a;
  --color-lemon: #a7a03a;
  --color-honey: #b07d1d;
  --color-more: #555555;
  --color-about: #b02020;
  --color-donate: #bba700;
  --color-contact: #2051b0;

  /* ============================================================
     COLLECTIONS (DARK MODE)
   ============================================================ */
  --color-novelty: #990000;
  --color-dual: #cc0052;
  --color-blackandwhite: #0a0a0a;
  --color-foil: #666666;
  --color-clear: #5b737a;
  --color-hypersaturated: #999;
  --color-hypersaturated-alt: #999;

  /* ============================================================
     FRANCHISES (DARK MODE)
   ============================================================ */
  --color-mcdonalds: #b30808;
  --color-burgerking: #a31f15;
  --color-tacobell: #4e165b;
  --color-wendys: #a81829;
  --color-kfc: #ab1324;
  --color-chickfila: #ab1028;
  --color-arbys: #a1181e;
  --color-sonic: #001d57;
  --color-popeyes: #c24415;
  --color-jackinthebox: #9e1823;
  --color-dairyqueen: #004163;
  --color-whataburger: #cc5e0a;
  --color-pandaexpress: #a1181e;
  --color-bojangles: #cc9e00;
  --color-deltaco: #004f39;
  --color-subway: #00662a;
  --color-whitecastle: #002a52;

  /* ============================================================
      BRANDS & MANUFACTURERS (DARK MODE)
    ============================================================ */
  --color-heinz: #777777;
  --color-boarshead: #111111;
  --color-cfsauer: #00285e;
  --color-chefsquality: #004a32;
  --color-flavorfresh: #007333;
  --color-fourinone: #a31f15;
  --color-hellmanns: #00284d;
  --color-houserecipe: #661924;
  --color-hunts: #a31f15;
  --color-kariout: #aa1229;
  --color-kens: #003d2b;
  --color-kikkoman: #b3132c;
  --color-kraft: #00285e;
  --color-leekumkee: #a31f15;
  --color-monarch: #001f47;
  --color-portionpac: #003e6e;
  --color-redgold: #ccaa00;
  --color-servaportion: #a31f15;
  --color-unipro: #777777;
  --color-westcreek: #004d2d;

  /* Accent resets */
  --accent-strong: var(--color-accent);
}

/* === SAUCE COLOR MAP === */
.ketchup {
  --theme-color: var(--color-ketchup);
}
.mustard {
  --theme-color: var(--color-mustard);
}
.honeymustard {
  --theme-color: var(--color-honeymustard);
}
.brownmustard {
  --theme-color: var(--color-brownmustard);
}
.hotmustard {
  --theme-color: var(--color-hotmustard);
}
.mayo {
  --theme-color: var(--color-mayo);
}
.miraclewhip {
  --theme-color: var(--color-miraclewhip);
}
.relish {
  --theme-color: var(--color-relish);
}
.mint {
  --theme-color: var(--color-mint);
}
.onion {
  --theme-color: var(--color-onion);
}
.hot {
  --theme-color: var(--color-hot);
}
.bbq {
  --theme-color: var(--color-bbq);
}
.steak {
  --theme-color: var(--color-steak);
}
.horseradish {
  --theme-color: var(--color-horseradish);
}
.brown {
  --theme-color: var(--color-brown);
}
.asian {
  --theme-color: var(--color-asian);
}
.soy {
  --theme-color: var(--color-soy);
}
.wasabi {
  --theme-color: var(--color-wasabi);
}
.sweetandsour {
  --theme-color: var(--color-sweetandsour);
}
.duck {
  --theme-color: var(--color-duck);
}
.tartar {
  --theme-color: var(--color-tartar);
}
.seafood {
  --theme-color: var(--color-seafood);
}
.oilvin {
  --theme-color: var(--color-oilvin);
}
.vinegar {
  --theme-color: var(--color-vinegar);
}
.dressing {
  --theme-color: var(--color-dressing);
}
.jelly {
  --theme-color: var(--color-jelly);
}
.lemon {
  --theme-color: var(--color-lemon);
}
.honey {
  --theme-color: var(--color-honey);
}
.sourcream {
  --theme-color: var(--color-sourcream);
}
.creamcheese {
  --theme-color: var(--color-creamcheese);
}
.butter {
  --theme-color: var(--color-butter);
}
.syrup {
  --theme-color: var(--color-syrup);
}
.misc {
  --theme-color: var(--color-misc);
}
.blackandwhite {
  --theme-color: var(--color-blackandwhite);
}
.novelty {
  --theme-color: var(--color-novelty);
}
.more {
  --theme-color: var(--color-more);
}
.about {
  --theme-color: var(--color-about);
}
.donate {
  --theme-color: var(--color-donate);
}
.contact {
  --theme-color: var(--color-contact);
}
/* ------------------------------------------------------------
   SAUCE-THEME OVERRIDES
   (set via body[data-sauce="ketchup"], etc.)
------------------------------------------------------------ */
body[data-sauce] {
  --color-accent: var(--color-more);
  --color-accent-alt: var(--color-more-alt);
  --accent-strong: var(--color-accent);
  --accent-soft-bg: rgba(255, 255, 255, 0.06);
  --accent-soft-border: rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------------
   GLOBAL CONTROL CLASSES
------------------------------------------------------------ */

/* Normal sort control button */
.cpg-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--control-height);
  width: 100%;
  border: 1px solid var(--control-border-color);
  border-radius: var(--control-radius);
  gap: var(--control-gap);

  background: var(--control-bg);
  color: var(--control-text-color);

  font-size: var(--font-size-md);
  box-shadow: var(--control-shadow-soft);
  cursor: pointer;

  transition: background-color var(--transition-med),
    color var(--transition-med), border-color var(--transition-med),
    box-shadow var(--transition-med), transform var(--transition-fast);
}

.cpg-control:hover {
  background: var(--control-bg-hover);
  box-shadow: var(--control-shadow-strong);
  transform: translateY(-1px);
}

.cpg-control:active {
  background: var(--control-bg-active);
  box-shadow: none;
  transform: translateY(0);
}

/* Primary control (accent colored) */
.cpg-control-primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--accent-strong);
}
.cpg-control-primary:hover {
  background: var(--accent-strong);
}