/* ============================================================
   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;

  /* Application-shell geometry */
  --menu-width: 120px;
  --menu-breathing-room: 30px;
  --titlebar-height: 75px;
  --titlebar-height-mobile: 60px;
  --menu-btn-width: 90px;
  --zig-unit: 4px;
  --hover-lift: 4px;
  --label-lift: 3px;
  --titlebar-padding: 20px;
  --speed-hover: 0.15s;

  /* ============================================================
     GLOBAL CONTROLS (used everywhere)
  ============================================================ */
  --general-white: #ffffff;
  --general-black: #000000;
  --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: #000000;
  --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-asianhotmustard: #e8ca39;
  --color-asianhotmustard-alt: #a89333;
  --color-honeymustard: #d6c467;
  --color-honeymustard-alt: #967d0e;
  --color-brownmustard: #9c7f2a;
  --color-brownmustard-alt: #6b5804;
  --color-delimustard: #b5a642;
  --color-delimustard-alt: #7a6f2a;
  --color-dijonmustard: #c9b964;
  --color-dijonmustard-alt: #857a2d;
  --color-englishmustard: #ffea00;
  --color-englishmustard-alt: #b3a400;
  --color-frenchmustard: #d4c153;
  --color-frenchmustard-alt: #94852c;
  --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-chili: #ff3c00;
  --color-chili-alt: #ff0000;
  --color-buffalo: #ff9500;
  --color-buffalo-alt: #ff4d00;
  --color-bbq: #7a371c;
  --color-bbq-alt: #3b2117;
  --color-steak: #3b2117;
  --color-steak-alt: #662f19;
  --color-worcestershire: #3b1817;
  --color-worcestershire-alt: #4b3830;
  --color-horseradish: #b9ba9a;
  --color-horseradish-alt: #758289;
  --color-brown: #522c1d;
  --color-brown-alt: #2e1810;
  --color-soy: #2b0070;
  --color-soy-alt: #57006d;
  --color-teriyaki: #f26b0f;
  --color-teriyaki-alt: #934e21;
  --color-ponzu: #4f0404;
  --color-ponzu-alt: #755a5a;
  --color-wasabi: #98bf65;
  --color-wasabi-alt: #5e3868;
  --color-sweetandsour: #bf8065;
  --color-sweetandsour-alt: #6c3143;
  --color-duck: #fa7e70;
  --color-duck-alt: #a51a44;
  --color-hoisin: #4d0088;
  --color-hoisin-alt: #a51a44;
  --color-szechuan: #6f0088;
  --color-szechuan-alt: #ab1111;
  --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-cheese: #eecb30;
  --color-cheese-alt: #a25d1d;
  --color-butter: #e9ec67;
  --color-butter-alt: #707070;
  --color-garlic: #ecc667;
  --color-garlic-alt: #867f5f;
  --color-ginger: #ec67c8;
  --color-ginger-alt: #865f72;
  --color-plum: #7e1db2;
  --color-plum-alt: #3b0558;
  --color-polynesian: #ec6788;
  --color-polynesian-alt: #ecc067;
  --color-syrup: #8b6237;
  --color-syrup-alt: #907e47;
  --color-creamer: #9c9186;
  --color-creamer-alt: #cec8b6;
  --color-misc: #8a92ac;
  --color-misc-alt: #af6868;
  --color-marinara: #b01200;
  --color-marinara-alt: #701616;
  --color-signature: #ecbc80;
  --color-signature-alt: #a18355;
  --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;

  /* Healthy Collection */
  --color-healthy: #4caf50; /* Fresh Leaf Green */
  --color-healthy-alt: #00bcd4; /* Crisp Aqua Blue */
  --texture-healthy: repeating-linear-gradient(
    135deg,
    rgba(76, 175, 80, 0.15),
    rgba(76, 175, 80, 0.15) 10px,
    transparent 10px,
    transparent 20px,
    rgba(0, 188, 212, 0.15) 20px,
    rgba(0, 188, 212, 0.15) 30px,
    transparent 30px,
    transparent 40px
  );
  --texture-size-healthy: 100% 100%;

  /* Bottle */
  --color-bottle: #ad060c;
  --color-bottle-alt: #cfcccc;

  /* Mascot */
  --color-mascot: #ffd900;
  --color-mascot-alt: #2e2e2e;

  /* 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;

  /* Vintage:  */
  --color-vintage: #ad9d3e;
  --color-vintage-alt: #554614;

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

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

  /* Patriotic Collection */
  --color-patriotic: #b22234; /* Old Glory Red */
  --color-patriotic-alt: #3c3b6e; /* Old Glory Blue */
  --texture-patriotic: repeating-linear-gradient(
    -45deg,
    rgba(178, 34, 52, 0.35),
    rgba(178, 34, 52, 0.35) 8px,
    transparent 8px,
    transparent 16px,
    rgba(60, 59, 110, 0.35) 16px,
    rgba(60, 59, 110, 0.35) 24px,
    transparent 24px,
    transparent 32px
  );
  --texture-size-patriotic: 100% 100%;

  /* Color Page:  */
  --color-color: #ccc;
  --color-color-alt: #ccc;

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

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

  /* Origins (Global Passport): */
  --color-origins: #119963; /* Vibrant Earth Teal */
  --color-origins-alt: #1a2a6c; /* Deep Oceanic / Passport Navy */

  /* A sweeping, translucent curve mimicking the horizon of the Earth from orbit, 
     with a subtle splash of "passport stamp" gold. Blends perfectly with Light/Dark modes! */
  --texture-origins: linear-gradient(
    135deg,
    rgba(26, 42, 108, 0.85),
    /* Deep Oceanic Turquoise (#1a2a6c) */ rgba(17, 153, 65, 0.65),
    /* Earth Teal (#11998e) */ rgba(212, 175, 55, 0.25)
      /* Translucent Passport Gold */
  );

  /* 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;

  --color-pizzahut: #ee3124;
  --color-pizzahut-alt: #000000;

  --color-dominos: #0055a5;
  --color-dominos-alt: #e31837;
  --color-domino: #0055a5;
  --color-domino-alt: #e31837;

  --color-papajohns: #00543d;
  --color-papajohns-alt: #df1921;
  --color-papajohn: #00543d;
  --color-papajohn-alt: #df1921;

  --color-littlecaesars: #ff7300;
  --color-littlecaesars-alt: #000000;
  --color-littlecaesar: #ff7300;
  --color-littlecaesar-alt: #000000;

  --color-sbarro: #d31145;
  --color-sbarro-alt: #00843d;

  --color-marcos: #d2232a;
  --color-marcos-alt: #8b0015;
  --color-marcospizza: #d2232a;
  --color-marcospizza-alt: #8b0015;

  --color-hungryhowiespizza: #ffc900;
  --color-hungryhowiespizza-alt: #231f20;
  --color-hungryhowies: #ffc900;
  --color-hungryhowies-alt: #231f20;

  --color-freddys: #e31837;
  --color-freddys-alt: #ffffff;

  --color-steaknshake: #000000;
  --color-steaknshake-alt: #c8102e;

  --color-tacojohns: #e31837;
  --color-tacojohns-alt: #ffc72c;

  --color-checkers: #000000;
  --color-checkers-alt: #e31837;
  --color-rallys: #000000;
  --color-rallys-alt: #e31837;

  --color-churchs: #ffc72c;
  --color-churchs-alt: #0055a5;

  --color-hardees: #ffc72c;
  --color-hardees-alt: #e31837;

  --color-carlsjr: #ffc72c;
  --color-carlsjr-alt: #e31837;

  --color-longjohnsilvers: #0055a5;
  --color-longjohnsilvers-alt: #ffc72c;

  --color-zaxbys: #0033a0;
  --color-zaxbys-alt: #c8102e;

  /* ============================================================
     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: #dad159;
  --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;

  /* Ranch: */
  --color-ranchhot: #2eb8df;
  --color-ranchhot-alt: #a01616;

  /* Mango Jalapeno: */
  --color-mangojalapeojam: #b63a00;
  --color-mangojalapeojam-alt: #a01616;
  --color-mangojalapeo: #b63a00;
  --color-mangojalapeo-alt: #a01616;

  /* Wild Berry Cinnamon: */
  --color-wildberrycinnamonjam: #5c00b2;
  --color-wildberrycinnamonjam-alt: #170159;
  --color-wildberrycinnamon: #5c00b2;
  --color-wildberrycinnamon-alt: #170159;

  /* Jalapeno Citrus Salsa */
  --color-jalapeocitrussalsa: #e04700;
  --color-jalapeocitrussalsa-alt: #bababa;

  /* Zesty Chicken Bowl: */
  --color-zestychickenbowldressing: #f8c32f;
  --color-zestychickenbowldressing-alt: #e3da5e;

  /* Avocado: */
  --color-avocadoverdesalsa: #5a8a00;
  --color-avocadoverdesalsa-alt: #107b10;

  /* Bell Sauce: */
  --color-bellsauce: #4e0082;
  --color-bellsauce-alt: #7b36a1;

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

  --color-tacobell: #ff7700;
  --color-tacobellmild: #ffb81c;
  --color-tacobellmild-alt: #d37506;
  --color-tacobellhot: #ff5a00;
  --color-tacobellhot-alt: #c24400;
  --color-tacobellfire: #d1232a;
  --color-tacobellfire-alt: #7a1115;
  --color-tacobelldiablo: #222222;
  --color-tacobelldiablo-alt: #5c0000;
  --color-tacobellverde: #78ba00;
  --color-tacobellverde-alt: #006400;
  --color-tacobellavocadoverdesalsa: #639800;
  --color-tacobellavocadoverdesalsa-alt: #245624;
  --color-tacobellbreakfastsalsa: #f4c430;
  --color-tacobellbreakfastsalsa-alt: #b8860b;
  --color-tacobellfireroasted: #5c4033;
  --color-tacobellfireroasted-alt: #4a0000;
  --color-tacobelljalapenocitrussalsa: #e04700;
  --color-tacobelljalapeocitrussalsa-alt: #bababa;
  --color-tacobelljalapeocitrussalsa: #e04700;
  --color-tacobelljalapenocitrussalsa-alt: #bababa;
  --color-tacobellmisc: #9e9e9e;
  --color-tacobellmisc-alt: #616161;

  /* ============================================================
     SATURATION PALETTE
  ============================================================ */
  --color-saturation-colorful: linear-gradient(
    180deg,
    #d7263d,
    #f78002,
    #1fa52b,
    #2255ff
  );
  --color-saturation-colorful-solid: #de0723; /* The solid red fallback for headers */
  --color-saturation-black: #000000;
  --color-saturation-white: #dddddd;
  --color-saturation-neutral: #878282;
  --color-saturation-medium: #444444;

  /* ============================================================
     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 */

  /* ============================================================
     TIMELINE DECADE TRI-COLORWAYS (1960s - 2020s)
  ============================================================ */
  /* 60s: Mod Diner (Turquoise -> Bubblegum -> Sunshine Yellow) */
  --color-decade-1960-1: #00ced1;
  --color-decade-1960-2: #ff69b4;
  --color-decade-1960-3: #ffd700;
  --color-decade-1960: linear-gradient(
    180deg,
    var(--color-decade-1960-1) 0%,
    var(--color-decade-1960-2) 50%,
    var(--color-decade-1960-3) 100%
  );
  --color-decade-1960-solid: var(--color-decade-1960-1);

  /* 70s: Earth Tones (Harvest Gold -> Burnt Orange -> Avocado Green) */
  --color-decade-1970-1: #e89e24;
  --color-decade-1970-2: #d3691f;
  --color-decade-1970-3: #5b7a37;
  --color-decade-1970: linear-gradient(
    180deg,
    var(--color-decade-1970-1) 0%,
    var(--color-decade-1970-2) 50%,
    var(--color-decade-1970-3) 100%
  );
  --color-decade-1970-solid: var(--color-decade-1970-1);

  /* 80s: Arcade Neon (Neon Green -> Cyan -> Laser Orange) */
  --color-decade-1980-1: #1eff00;
  --color-decade-1980-2: #00ffff;
  --color-decade-1980-3: #ff7b00;
  --color-decade-1980: linear-gradient(
    180deg,
    var(--color-decade-1980-1) 0%,
    var(--color-decade-1980-2) 50%,
    var(--color-decade-1980-3) 100%
  );
  --color-decade-1980-solid: var(--color-decade-1980-1);

  /* 90s: Jazz Cup (Teal -> Paper White -> Magenta) */
  --color-decade-1990-1: #00d2d3;
  --color-decade-1990-2: #ebebeb;
  --color-decade-1990-3: #e056fd;
  --color-decade-1990: linear-gradient(
    180deg,
    var(--color-decade-1990-1) 0%,
    var(--color-decade-1990-2) 50%,
    var(--color-decade-1990-3) 100%
  );
  --color-decade-1990-solid: var(--color-decade-1990-1);

  /* 00s: Frutiger Aero / Web 2.0 (Glossy Aqua -> Tech Silver -> Lime Wire Green) */
  --color-decade-2000-1: #00a8e8;
  --color-decade-2000-2: #c0c0c0;
  --color-decade-2000-3: #8cc63f;
  --color-decade-2000: linear-gradient(
    180deg,
    var(--color-decade-2000-1) 0%,
    var(--color-decade-2000-2) 50%,
    var(--color-decade-2000-3) 100%
  );
  --color-decade-2000-solid: var(--color-decade-2000-1);

  /* 10s: Flat UI & Hipster (Millennial Pink -> Flat Blue -> Matte Mustard) */
  --color-decade-2010-1: #ffb6c1;
  --color-decade-2010-2: #3498db;
  --color-decade-2010-3: #f1c40f;
  --color-decade-2010: linear-gradient(
    180deg,
    var(--color-decade-2010-1) 0%,
    var(--color-decade-2010-2) 50%,
    var(--color-decade-2010-3) 100%
  );
  --color-decade-2010-solid: var(--color-decade-2010-1);

  /* 20s: Dark Mode & Corporate Memphis (Matte Black -> Blurple -> Cyber Mint) */
  --color-decade-2020-1: #222222;
  --color-decade-2020-2: #6c5ce7;
  --color-decade-2020-3: #00cec9;
  --color-decade-2020: linear-gradient(
    180deg,
    var(--color-decade-2020-1) 0%,
    var(--color-decade-2020-2) 50%,
    var(--color-decade-2020-3) 100%
  );
  --color-decade-2020-solid: var(--color-decade-2020-1);

  /* ============================================================
     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;

  /* ============================================================
      Dressing Sort Themes
============================================================ */
  --color-dressing: #24d31e;
  --color-dressing-alt: #3fa6dd;
  --color-asiandressing: #4f008f; /* Similar to our Asian sauce button */
  --color-bluecheese: #3f96da; /* Cool off-white */
  --color-caesar: #c0a96b; /* Creamy peppercorn beige */
  --color-catalina: #ff4500; /* Vibrant red-orange */
  --color-creamysalsa: #d4e157; /* Lime-tinted cream green */
  --color-cucumber: #84d69c; /* Pale, cool mint green */
  --color-french: #ff8c00; /* Deep zesty orange */
  --color-italian: #fdd835; /* Herbaceous golden yellow */
  --color-parmesan: #e0d468; /* Light cheese-rind white */
  --color-ranch: #a4c8d3; /* Pure creamy buttermilk white */
  --color-saladcream: #00c210; /* Pale UK-style Heinz packet */
  --color-saladdressing: #128d12; /* Pale UK-style Heinz packet */
  --color-salad: #00c210;
  --color-saladcream: #128d12;
  --color-spicy: #c62828; /* Chili-based deep red */
  --color-sweetsour: #ff5722; /* Translucent deep orange-red */
  --color-thousandisland: #ffab91; /* Salmon-pink/orange wash */
  --color-tomatobacon: #ad1457; /* Smoky tomato red-pink */
  --color-vinaigrette: #4e342e; /* Rich balsamic dark purple/brown */
  --color-yogurt: #a7a68d; /* Bright yogurt-base white */
  --color-raspberry: #ad1457;
  --color-balsamic: #4e342e;

  /* ============================================================
      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-sweetbabyrays: #123a83;
  --color-sweetbabyrays-alt: #cccccc;

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

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

  --color-sugarfoodscorporation: #0055a5;
  --color-sugarfoodscorporation-alt: #dddddd;

  --color-leekumkee: #d22030;
  --color-leekumkee-alt: #d4af37;

  --color-frenchs: #ffc72c;
  --color-frenchs-alt: #c8102e;

  --color-usfoodservice: #0033a0;
  --color-usfoodservice-alt: #00833e;

  --color-tabasco: #00573d;
  --color-tabasco-alt: #c8102e;

  --color-internationaldelight: #0055a5;
  --color-internationaldelight-alt: #4a2e15;

  --color-wings: #d22030;
  --color-wings-alt: #dddddd;

  --color-kinders: #000000;
  --color-kinders-alt: #d4af37;

  --color-marketside: #00833e;
  --color-marketside-alt: #dddddd;

  --color-salsadelsol: #c8102e;
  --color-salsadelsol-alt: #ffc72c;

  --color-yamasa: #c8102e;
  --color-yamasa-alt: #000000;

  --color-countryrange: #00833e;
  --color-countryrange-alt: #0055a5;

  --color-melindas: #00833e;
  --color-melindas-alt: #c8102e;

  --color-americana: #0033a0;
  --color-americana-alt: #c8102e;

  --color-chefmark: #0055a5;
  --color-chefmark-alt: #dddddd;

  --color-debon: #c8102e;
  --color-debon-alt: #d4af37;

  --color-franksredhot: #c8102e;
  --color-franksredhot-alt: #00833e;

  --color-frostyacres: #0055a5;
  --color-frostyacres-alt: #5bc2e7;

  --color-guldens: #ffc72c;
  --color-guldens-alt: #4a2e15;

  --color-louisiana: #c8102e;
  --color-louisiana-alt: #0033a0;

  --color-mealsimple: #c8102e;
  --color-mealsimple-alt: #dddddd;

  --color-saralee: #c8102e;
  --color-saralee-alt: #dddddd;

  --color-sirkensingtons: #0033a0;
  --color-sirkensingtons-alt: #d4af37;

  --color-stickneypoore: #000000;
  --color-stickneypoore-alt: #dddddd;

  --color-wyindustries: #0033a0;
  --color-wyindustries-alt: #c8102e;

  --color-americanairlines: #8a8d8f;
  --color-americanairlines-alt: #0033a0;

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

  --color-braums: #8a1538;
  --color-braums-alt: #0055a5;

  --color-hellofresh: #00833e;
  --color-hellofresh-alt: #dddddd;

  --color-hiddenvalley: #00833e;
  --color-hiddenvalley-alt: #0055a5;

  --color-marconi: #00833e;
  --color-marconi-alt: #c8102e;

  --color-marzetti: #8a1538;
  --color-marzetti-alt: #d4af37;

  --color-nugget: #00833e;
  --color-nugget-alt: #ffc72c;

  --color-saxa: #c8102e;
  --color-saxa-alt: #dddddd;

  --color-smartfinal: #c8102e;
  --color-smartfinal-alt: #0055a5;

  --color-smuckers: #c8102e;
  --color-smuckers-alt: #dddddd;

  --color-vistar: #0033a0;
  --color-vistar-alt: #ff7300;

  --color-waldorf: #8a1538;
  --color-waldorf-alt: #d4af37;

  --color-yipin: #c8102e;
  --color-yipin-alt: #d4af37;

  /* === 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;
  --color-freddys: #a81829;
  --color-steaknshake: #000000;
  --color-tacojohns: #a81829;
  --color-checkers: #000000;
  --color-rallys: #000000;
  --color-churchs: #b38b1e;
  --color-hardees: #b38b1e;
  --color-carlsjr: #b38b1e;
  --color-longjohnsilvers: #003366;
  --color-zaxbys: #001f5c;

  /* ============================================================
      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;
  --color-sugarfoodscorporation: #003366;
  --color-leekumkee: #991622;
  --color-frenchs: #b38b1e;
  --color-usfoodservice: #001f5c;
  --color-tabasco: #003324;
  --color-internationaldelight: #003366;
  --color-wings: #991622;
  --color-kinders: #000000;
  --color-marketside: #004d24;
  --color-salsadelsol: #990c22;
  --color-yamasa: #990c22;
  --color-countryrange: #004d24;
  --color-melindas: #004d24;
  --color-americana: #001f5c;
  --color-chefmark: #003366;
  --color-debon: #990c22;
  --color-franksredhot: #990c22;
  --color-frostyacres: #003366;
  --color-guldens: #b38b1e;
  --color-louisiana: #990c22;
  --color-mealsimple: #990c22;
  --color-saralee: #990c22;
  --color-sirkensingtons: #001f5c;
  --color-stickneypoore: #000000;
  --color-wyindustries: #001f5c;
  --color-americanairlines: #555759;
  --color-bestfoods: #00284d;
  --color-braums: #5a0e24;
  --color-hellofresh: #004d24;
  --color-hiddenvalley: #004d24;
  --color-marconi: #004d24;
  --color-marzetti: #5a0e24;
  --color-nugget: #004d24;
  --color-saxa: #990c22;
  --color-smartfinal: #990c22;
  --color-smuckers: #990c22;
  --color-vistar: #001f5c;
  --color-waldorf: #5a0e24;
  --color-yipin: #990c22;

  /* 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);
}
.signature {
  --theme-color: var(--color-signature);
}
.relish {
  --theme-color: var(--color-relish);
}
.mint {
  --theme-color: var(--color-mint);
}
.onion {
  --theme-color: var(--color-onion);
}
.hot {
  --theme-color: var(--color-hot);
}
.buffalo {
  --theme-color: var(--color-buffalo);
}
.chili {
  --theme-color: var(--color-chili);
}
.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);
}
.hoisin {
  --theme-color: var(--color-hoisin);
}
.szechuan {
  --theme-color: var(--color-szechuan);
}
.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);
}
.marinara {
  --theme-color: var(--color-marinara);
}
.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);
}
.cheese {
  --theme-color: var(--color-cheese);
}
.butter {
  --theme-color: var(--color-butter);
}
.garlic {
  --theme-color: var(--color-garlic);
}
.ginger {
  --theme-color: var(--color-ginger);
}
.plum {
  --theme-color: var(--color-plum);
}
.polynesian {
  --theme-color: var(--color-polynesian);
}
.syrup {
  --theme-color: var(--color-syrup);
}
.creamer {
  --theme-color: var(--color-creamer);
}
.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);
}