:root {
    /* =========================================================
       STGFOODTRUCKS STREET / ART PALETTE
       Desert sky + canyon orange + mural accents + asphalt ink
       ========================================================= */
    /* Navy - brand ink / headings / deep backgrounds */
    --navy-50: #eef5fa;
    --navy-100: #d8e7f2;
    --navy-200: #b4d0e4;
    --navy-300: #83b2d1;
    --navy-400: #4f8fb8;
    --navy-500: #2f729f;
    --navy-600: #245d84;
    --navy-700: #1d4968;
    --navy-800: #15384f;
    --navy-900: #0b2435;
    /* Blue - primary interaction color */
    --blue-50: #eef8ff;
    --blue-100: #d9efff;
    --blue-200: #b9e1ff;
    --blue-300: #87ccff;
    --blue-400: #4baff3;
    --blue-500: #218fda;
    --blue-600: #126fba;
    --blue-700: #105995;
    --blue-800: #124a78;
    --blue-900: #133e63;
    /* Sky - bright open-air accent */
    --sky-50: #f0fbff;
    --sky-100: #dff6ff;
    --sky-200: #b9ecff;
    --sky-300: #82ddff;
    --sky-400: #46c7f3;
    --sky-500: #1aabd9;
    --sky-600: #1088b5;
    --sky-700: #116d92;
    --sky-800: #145976;
    --sky-900: #154a63;
    /* Orange - signature truck / canyon accent */
    --orange-50: #fff5ec;
    --orange-100: #ffe8d2;
    --orange-200: #ffd0a4;
    --orange-300: #ffae69;
    --orange-400: #f98a34;
    --orange-500: #ef6b1b;
    --orange-600: #d65310;
    --orange-700: #ad3f10;
    --orange-800: #8a3414;
    --orange-900: #702e15;
    /* Coral - sunset / energetic supporting accent */
    --coral-50: #fff3ef;
    --coral-100: #ffe2d8;
    --coral-200: #ffc2b0;
    --coral-300: #ff9678;
    --coral-400: #f86e4f;
    --coral-500: #e95132;
    --coral-600: #c93b24;
    --coral-700: #a52f20;
    --coral-800: #86291f;
    --coral-900: #6d251e;
    /* Red - errors / urgent notices / painted accent */
    --red-50: #fff1f2;
    --red-100: #ffe0e2;
    --red-200: #ffc4c8;
    --red-300: #fb9299;
    --red-400: #f05f69;
    --red-500: #d93d48;
    --red-600: #bd2936;
    --red-700: #9e2330;
    --red-800: #83212b;
    --red-900: #6f2028;
    /* Gold - warm sunlight / premium / attention */
    --gold-50: #fff9eb;
    --gold-100: #fff1c6;
    --gold-200: #ffe38a;
    --gold-300: #f8cc52;
    --gold-400: #eeb32c;
    --gold-500: #d99616;
    --gold-600: #b87510;
    --gold-700: #945714;
    --gold-800: #784619;
    --gold-900: #643b19;
    /* Teal - mural / freshness / alternate accent */
    --teal-50: #edfafa;
    --teal-100: #d2f3f1;
    --teal-200: #a9e6e2;
    --teal-300: #72d1cc;
    --teal-400: #3db5b0;
    --teal-500: #249795;
    --teal-600: #1d7978;
    --teal-700: #1d6161;
    --teal-800: #1d4e4f;
    --teal-900: #1b4142;
    /* Green - success / availability / cactus accent */
    --green-50: #f2f8ef;
    --green-100: #e1efdb;
    --green-200: #c2dfb6;
    --green-300: #9bc987;
    --green-400: #75ae5e;
    --green-500: #579044;
    --green-600: #437336;
    --green-700: #365b2e;
    --green-800: #2e4929;
    --green-900: #283d25;
    /* Purple - mural / nightlife / event accent */
    --purple-50: #f8f4ff;
    --purple-100: #efe7ff;
    --purple-200: #dfd1ff;
    --purple-300: #c8adfb;
    --purple-400: #a77eea;
    --purple-500: #8758d2;
    --purple-600: #6d42b3;
    --purple-700: #57358e;
    --purple-800: #482e72;
    --purple-900: #3b285d;
    /* Magenta - graffiti / nightlife accent */
    --magenta-50: #fff1fa;
    --magenta-100: #ffe1f4;
    --magenta-200: #ffc5e8;
    --magenta-300: #fa98d3;
    --magenta-400: #eb68ba;
    --magenta-500: #d7469f;
    --magenta-600: #b83282;
    --magenta-700: #96286a;
    --magenta-800: #7a2457;
    --magenta-900: #662049;
    /* Sandstone - Southern Utah rock / neutral warm accent */
    --sandstone-50: #fbf6f1;
    --sandstone-100: #f3e8dd;
    --sandstone-200: #e6d0bd;
    --sandstone-300: #d3b295;
    --sandstone-400: #bd8e69;
    --sandstone-500: #a8724f;
    --sandstone-600: #8c593e;
    --sandstone-700: #714633;
    --sandstone-800: #5d3a2d;
    --sandstone-900: #4d3127;
    /* Brown - food / wood / leather / earthy utility */
    --brown-50: #faf6f3;
    --brown-100: #f0e8e0;
    --brown-200: #dfd0c3;
    --brown-300: #c7ae9a;
    --brown-400: #aa876d;
    --brown-500: #8f694f;
    --brown-600: #74513e;
    --brown-700: #5d4133;
    --brown-800: #4c362c;
    --brown-900: #402e27;
    /* Cream - paper / canvas / warm page background */
    --cream-50: #fffdf9;
    --cream-100: #fff8ed;
    --cream-200: #f8ecd7;
    --cream-300: #eddab9;
    --cream-400: #ddc296;
    --cream-500: #c9a975;
    --cream-600: #ad8b57;
    --cream-700: #8e6c42;
    --cream-800: #735637;
    --cream-900: #5f472f;
    /* Concrete - cool neutral scale */
    --concrete-50: #f7f8f8;
    --concrete-100: #eceeef;
    --concrete-200: #d9dddf;
    --concrete-300: #bcc3c7;
    --concrete-400: #98a2a8;
    --concrete-500: #78848b;
    --concrete-600: #616b72;
    --concrete-700: #4e575d;
    --concrete-800: #3e464b;
    --concrete-900: #343a3e;
    /* Charcoal - asphalt / ink */
    --charcoal-50: #f4f5f6;
    --charcoal-100: #e3e5e7;
    --charcoal-200: #c8cdd1;
    --charcoal-300: #a4abb1;
    --charcoal-400: #7f8991;
    --charcoal-500: #616c74;
    --charcoal-600: #4c565e;
    --charcoal-700: #394148;
    --charcoal-800: #272e34;
    --charcoal-900: #151b20;
    /* =========================================================
       SEMANTIC / LEGACY VARIABLES
       Keep existing names intact for compatibility
       ========================================================= */
    --bg: #02050A;
    --bg-elevated: #070D18;
    --bg-raised: #0A1730;
    --glass: rgba(7, 17, 34, .78);
    --glass-border: rgba(76, 154, 255, .28);
    --surface: #ffffff;
    --surface-2: var(--cream-50);
    --surface-3: var(--cream-100);
    --card: #ffffff;
    --card-bg: #ffffff;
    --panel: var(--cream-50);
    --light-bg: var(--cream-100);
    --white: #ffffff;
    --black: #05090c;
    --text: #F5F8FC;
    --text-main: #A9B8CC;
    --text-color: #2684FF;
    --text-muted: #74849A;
    --secondary-text: var(--charcoal-600);
    --muted: var(--charcoal-600);
    --sub: var(--charcoal-500);
    --label: var(--navy-800);
    --light-label: var(--charcoal-600);
    --gray: var(--charcoal-500);
    --light-gray: var(--charcoal-200);
    --dark-gray: var(--charcoal-700);
    --darker-gray: var(--charcoal-900);
    --rgb-dark-gray: rgba(57, 65, 72, 1);
    --border: var(--concrete-200);
    --border-strong: var(--concrete-300);
    --card-border: var(--concrete-100);
    --praise-border: var(--concrete-200);
    --event-border: var(--concrete-200);
    --ink-900: var(--charcoal-900);
    --ink-800: var(--charcoal-800);
    --ink-700: var(--charcoal-700);
    --ink-500: var(--charcoal-500);
    --ink-300: var(--charcoal-300);
    --ink-200: var(--charcoal-200);
    --ink-100: var(--charcoal-100);
    /* Brand = canyon orange. Interaction = blue. */
    --brand: var(--orange-500);
    --brand-hover: var(--orange-600);
    --brand-active: var(--orange-700);
    --brand-rgb: 239, 107, 27;
    --red: var(--red-600);
    --red-over: var(--red-700);
    --red-light: var(--red-400);
    --red-lighter: var(--red-300);
    --red-lightest: var(--red-100);
    --red-fade: var(--red-50);
    --red-rgba: rgba(189, 41, 54, 1);
    --light-red: var(--red-400);
    --red-pale: var(--red-100);
    --light-red-rgba: rgba(240, 95, 105, 1);
    --accent-red: var(--coral-500);
    --blue: var(--blue-600);
    --blue-over: var(--blue-700);
    --blue-rgba: rgba(18, 111, 186, 1);
    --blue-dark: var(--navy-800);
    --blue-dark-over: var(--navy-900);
    --blue-dark-rgba: rgba(21, 56, 79, 1);
    --blue-light: var(--sky-400);
    --light-blue: var(--sky-400);
    --blue-lighter: var(--sky-100);
    --lighter-blue: var(--sky-100);
    --blue-lightest: var(--sky-50);
    --lightest-blue: var(--sky-50);
    --light-blue-over: var(--sky-500);
    --light-blue-rgba: rgba(70, 199, 243, 1);
    --lightblue: var(--sky-400);
    --accent-blue: var(--blue-500);
    --gold: var(--gold-500);
    --light-gold: var(--gold-300);
    --gold-light: var(--gold-300);
    --gold-pale: var(--gold-100);
    --dark-gold: var(--gold-700);
    --amber: var(--gold-500);
    --green: var(--green-500);
    --green-over: var(--green-600);
    --green-rgba: rgba(87, 144, 68, 1);
    --light-green: var(--green-300);
    --light-green-over: var(--green-400);
    --light-green-rgba: rgba(155, 201, 135, 1);
    --lighter-green: var(--green-100);
    --lightest-green: var(--green-50);
    --green-fade: var(--green-50);
    --dark-green: var(--green-700);
    --dark-green-over: var(--green-800);
    --dark-green-rgba: rgba(54, 91, 46, 1);
    --success: var(--green-600);
    --danger: var(--red-600);
    --warning: var(--gold-500);
    --info: var(--blue-600);
    /* Midnight glass palette */
    --accent-cyan: #17a9ff;
    --accent-cyan-light: #5aaaff;
    --blue-text-light: #86b8ed;
    --text-soft-blue: #dbe8fb;
    --text-muted-blue: #aac2e2;
    --link-cyan: #12aaff;
    --dark-overlay: rgb(0 8 20 / 0.5);
    --blue-overlay: rgb(0 29 81 / 0.9);
    --icon-border: rgba(28, 131, 255, 0.72);
    --icon-background: rgba(1, 13, 39, 0.66);
    --icon-glow: rgba(22, 90, 255, 0.12);
    --glass-border-bright: rgb(74 168 255 / 0.5);
    --glass-background-start: rgba(20, 65, 120, 0.18);
    --glass-background-mid: rgba(5, 20, 45, 0.28);
    --glass-background-end: rgba(5, 15, 35, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.35);
    --glass-glow: rgba(30, 130, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.20);
    --glass-side-light: rgba(120, 190, 255, 0.08);
    /* Extra semantic accents for event/truck UI */
    --accent-orange: var(--orange-500);
    --accent-coral: var(--coral-500);
    --accent-teal: var(--teal-500);
    --accent-purple: var(--purple-500);
    --accent-magenta: var(--magenta-500);
    --accent-gold: var(--gold-500);
    --accent-sandstone: var(--sandstone-500);
    --ring: var(--blue-500);
    --focus-cyan: var(--sky-500);
    --shadow-soft: 0 8px 24px rgba(11, 36, 53, 0.10);
    --shadow-strong: 0 18px 48px rgba(11, 36, 53, 0.18);
    --border-radius-xsm: 4px;
    --border-radius-sm: 8px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --chip: var(--cream-100);
    --font-body: "Segoe UI", Tahoma, Arial, sans-serif;
    --font-ui: "Segoe UI", Tahoma, Arial, sans-serif;
    --font-heading: "Segoe UI", Tahoma, Arial, sans-serif;
    --font-display: "Segoe UI", Tahoma, Arial, sans-serif;
    --font-title: "Arial Narrow", Arial, sans-serif;
    --font-script: "Segoe Script", cursive;
    --owner-nav-width: 260px;
    --btn-border-width: 1px;
    --txt-border-width: 1px;
    --paper-brd-color: var(--concrete-300);
}