/* ===================================================================
   GMAIL THEMES & GOOGLE MATERIAL DESIGN 3 BACKGROUND SYSTEM
   =================================================================== */

/* 1. Gmail Default (Clean Ambient Canvas) */
:root,
[data-theme="gmail"],
[data-theme="royal_purple"] {
  --color-primary: #0b57d0;         /* Google Material 3 Blue */
  --color-primary-hover: #0842a0;
  --color-secondary: #d93025;       /* Gmail Accent Red */
  --color-secondary-hover: #b3261e;
  --color-accent: #f9ab00;          /* Google Star Amber */

  --bg-main: #f6f8fc;               /* Authentic Gmail background */
  --bg-image: radial-gradient(circle at 10% 15%, rgba(194, 231, 255, 0.45) 0%, transparent 40%),
              radial-gradient(circle at 90% 85%, rgba(232, 240, 254, 0.6) 0%, transparent 45%),
              radial-gradient(circle at 50% 50%, rgba(246, 248, 252, 0.9) 0%, transparent 60%),
              #f6f8fc;
  
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #edf2fa;           /* Gmail container / chip background */
  --surface-selected: #c2e7ff;      /* Gmail active navigation pill */
  --text-main: #1f1f1f;             /* Google M3 On-surface high contrast */
  --text-muted: #444746;            /* Google M3 On-surface-variant */
  --border-color: #e0e2ec;          /* Google M3 Outline-variant */

  --color-success: #137333;         /* Google Green */
  --color-warning: #b06000;         /* Google Amber */
  --color-danger: #d93025;          /* Google Red */
  --color-info: #0b57d0;            /* Google Blue */
  --focus-ring: rgba(11, 87, 208, 0.25);

  --google-blue: #0b57d0;
  --google-red: #d93025;
  --google-yellow: #f9ab00;
  --google-green: #137333;
}

[data-theme="gmail"][data-mode="dark"],
[data-theme="royal_purple"][data-mode="dark"],
body.dark-mode[data-theme="gmail"],
body.dark-mode[data-theme="royal_purple"],
body.dark-mode:not([data-theme]) {
  --color-primary: #a8c7fa;
  --color-primary-hover: #8ab4f8;
  --color-secondary: #f28b82;
  --color-secondary-hover: #ee675c;
  --color-accent: #fdd663;

  --bg-main: #1f1f1f;
  --bg-image: radial-gradient(circle at 15% 15%, rgba(0, 74, 119, 0.35) 0%, transparent 45%),
              radial-gradient(circle at 85% 85%, rgba(14, 29, 45, 0.45) 0%, transparent 45%),
              #1f1f1f;

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #2d2f31;
  --surface-selected: #004a77;
  --text-main: #e3e3e3;
  --text-muted: #c4c7c5;
  --border-color: #444746;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(168, 199, 250, 0.35);
}

/* 2. Gmail Alps (Mountain Dawn Atmosphere) */
[data-theme="gmail_red"],
[data-theme="rose_slate"] {
  --color-primary: #c5221f;
  --color-primary-hover: #a51d1a;
  --color-secondary: #0b57d0;
  --color-secondary-hover: #0842a0;
  --color-accent: #f9ab00;

  --bg-main: #f4f2f7;
  --bg-image: linear-gradient(180deg, rgba(246, 248, 252, 0.25) 0%, rgba(246, 248, 252, 0.82) 100%),
              linear-gradient(135deg, #2b5876 0%, #4e4376 35%, #9b59b6 55%, #e27d60 75%, #ffbc6b 90%, #f6f8fc 100%);

  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #fce8e6;
  --surface-selected: #fad2cf;
  --text-main: #1f1f1f;
  --text-muted: #444746;
  --border-color: #e0e2ec;

  --color-success: #137333;
  --color-warning: #b06000;
  --color-danger: #d93025;
  --color-info: #0b57d0;
  --focus-ring: rgba(197, 34, 31, 0.25);
}

[data-theme="gmail_red"][data-mode="dark"],
[data-theme="rose_slate"][data-mode="dark"],
body.dark-mode[data-theme="gmail_red"],
body.dark-mode[data-theme="rose_slate"] {
  --color-primary: #f28b82;
  --color-primary-hover: #ee675c;
  --color-secondary: #a8c7fa;
  --color-secondary-hover: #8ab4f8;
  --color-accent: #fdd663;

  --bg-main: #1a1622;
  --bg-image: linear-gradient(180deg, rgba(15, 17, 23, 0.45) 0%, rgba(31, 31, 31, 0.9) 100%),
              linear-gradient(135deg, #19162b 0%, #2b1f3d 45%, #3d2338 75%, #181924 100%);

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #3c2424;
  --surface-selected: #5c2b29;
  --text-main: #e3e3e3;
  --text-muted: #c4c7c5;
  --border-color: #444746;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(242, 139, 130, 0.35);
}

/* 3. Gmail Pine (Emerald Forest & Mist) */
[data-theme="gmail_green"],
[data-theme="emerald_ivory"] {
  --color-primary: #0f9d58;
  --color-primary-hover: #0b8043;
  --color-secondary: #0b57d0;
  --color-secondary-hover: #0842a0;
  --color-accent: #f4b400;

  --bg-main: #f0f7f3;
  --bg-image: linear-gradient(180deg, rgba(240, 249, 244, 0.3) 0%, rgba(246, 248, 252, 0.85) 100%),
              linear-gradient(135deg, #134e5e 0%, #1e6b5c 35%, #328f74 60%, #71b280 85%, #d8ebd9 100%);

  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #e6f4ea;
  --surface-selected: #ceead6;
  --text-main: #1f1f1f;
  --text-muted: #444746;
  --border-color: #e0e2ec;

  --color-success: #137333;
  --color-warning: #b06000;
  --color-danger: #d93025;
  --color-info: #0b57d0;
  --focus-ring: rgba(15, 157, 88, 0.25);
}

[data-theme="gmail_green"][data-mode="dark"],
[data-theme="emerald_ivory"][data-mode="dark"],
body.dark-mode[data-theme="gmail_green"],
body.dark-mode[data-theme="emerald_ivory"] {
  --color-primary: #81c995;
  --color-primary-hover: #5bb974;
  --color-secondary: #a8c7fa;
  --color-secondary-hover: #8ab4f8;
  --color-accent: #fdd663;

  --bg-main: #121c17;
  --bg-image: linear-gradient(180deg, rgba(10, 20, 15, 0.45) 0%, rgba(31, 31, 31, 0.9) 100%),
              linear-gradient(135deg, #091c15 0%, #113426 45%, #184433 75%, #111a15 100%);

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #1e3325;
  --surface-selected: #284c35;
  --text-main: #e3e3e3;
  --text-muted: #c4c7c5;
  --border-color: #444746;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(129, 201, 149, 0.35);
}

/* 4. Gmail Dunes (Golden Sunset Dusk) */
[data-theme="gmail_amber"],
[data-theme="navy_gold"] {
  --color-primary: #b06000;
  --color-primary-hover: #8f4e00;
  --color-secondary: #0b57d0;
  --color-secondary-hover: #0842a0;
  --color-accent: #d93025;

  --bg-main: #faf5ed;
  --bg-image: linear-gradient(180deg, rgba(254, 247, 224, 0.3) 0%, rgba(246, 248, 252, 0.85) 100%),
              linear-gradient(135deg, #3a1c71 0%, #7f385c 35%, #d76d77 60%, #ffaf7b 85%, #fbe8c7 100%);

  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #fef7e0;
  --surface-selected: #feefc3;
  --text-main: #1f1f1f;
  --text-muted: #444746;
  --border-color: #e0e2ec;

  --color-success: #137333;
  --color-warning: #b06000;
  --color-danger: #d93025;
  --color-info: #0b57d0;
  --focus-ring: rgba(176, 96, 0, 0.25);
}

[data-theme="gmail_amber"][data-mode="dark"],
[data-theme="navy_gold"][data-mode="dark"],
body.dark-mode[data-theme="gmail_amber"],
body.dark-mode[data-theme="navy_gold"] {
  --color-primary: #fdd663;
  --color-primary-hover: #fcc934;
  --color-secondary: #a8c7fa;
  --color-secondary-hover: #8ab4f8;
  --color-accent: #f28b82;

  --bg-main: #1e1912;
  --bg-image: linear-gradient(180deg, rgba(20, 12, 18, 0.45) 0%, rgba(31, 31, 31, 0.9) 100%),
              linear-gradient(135deg, #24131e 0%, #3a1a24 45%, #46221d 75%, #1f1812 100%);

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #3d3520;
  --surface-selected: #544929;
  --text-main: #e3e3e3;
  --text-muted: #c4c7c5;
  --border-color: #444746;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(253, 214, 99, 0.35);
}

/* 5. Gmail Ocean (Deep Azure Horizon) */
[data-theme="gmail_teal"],
[data-theme="ocean_blue"] {
  --color-primary: #00796b;
  --color-primary-hover: #005b4f;
  --color-secondary: #0b57d0;
  --color-secondary-hover: #0842a0;
  --color-accent: #f4b400;

  --bg-main: #eef6f6;
  --bg-image: linear-gradient(180deg, rgba(224, 242, 241, 0.3) 0%, rgba(246, 248, 252, 0.85) 100%),
              linear-gradient(135deg, #093049 0%, #155263 35%, #187f8d 60%, #48cae4 85%, #caf0f8 100%);

  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #e0f2f1;
  --surface-selected: #b2dfdb;
  --text-main: #1f1f1f;
  --text-muted: #444746;
  --border-color: #e0e2ec;

  --color-success: #137333;
  --color-warning: #b06000;
  --color-danger: #d93025;
  --color-info: #0b57d0;
  --focus-ring: rgba(0, 121, 107, 0.25);
}

[data-theme="gmail_teal"][data-mode="dark"],
[data-theme="ocean_blue"][data-mode="dark"],
body.dark-mode[data-theme="gmail_teal"],
body.dark-mode[data-theme="ocean_blue"] {
  --color-primary: #4db6ac;
  --color-primary-hover: #26a69a;
  --color-secondary: #a8c7fa;
  --color-secondary-hover: #8ab4f8;
  --color-accent: #fdd663;

  --bg-main: #111a1c;
  --bg-image: linear-gradient(180deg, rgba(8, 20, 28, 0.45) 0%, rgba(31, 31, 31, 0.9) 100%),
              linear-gradient(135deg, #051923 0%, #082938 45%, #0d3b4d 75%, #0c1619 100%);

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #1d3330;
  --surface-selected: #254a46;
  --text-main: #e3e3e3;
  --text-muted: #c4c7c5;
  --border-color: #444746;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(77, 182, 172, 0.35);
}

/* 6. Gmail Sakura (Cherry Blossom Pastel) */
[data-theme="gmail_indigo"],
[data-theme="indigo_sky"] {
  --color-primary: #3367d6;
  --color-primary-hover: #1a53c9;
  --color-secondary: #f4b400;
  --color-secondary-hover: #db9f00;
  --color-accent: #d93025;

  --bg-main: #f8f3f8;
  --bg-image: linear-gradient(180deg, rgba(252, 228, 236, 0.3) 0%, rgba(246, 248, 252, 0.85) 100%),
              linear-gradient(135deg, #2c254b 0%, #4b365f 35%, #7e4b78 60%, #b86eb3 80%, #fce4ec 100%);

  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #e8f0fe;
  --surface-selected: #d2e3fc;
  --text-main: #1f1f1f;
  --text-muted: #444746;
  --border-color: #e0e2ec;

  --color-success: #137333;
  --color-warning: #b06000;
  --color-danger: #d93025;
  --color-info: #0b57d0;
  --focus-ring: rgba(51, 103, 214, 0.25);
}

[data-theme="gmail_indigo"][data-mode="dark"],
[data-theme="indigo_sky"][data-mode="dark"],
body.dark-mode[data-theme="gmail_indigo"],
body.dark-mode[data-theme="indigo_sky"] {
  --color-primary: #8ab4f8;
  --color-primary-hover: #669df6;
  --color-secondary: #fdd663;
  --color-secondary-hover: #fcc934;
  --color-accent: #f28b82;

  --bg-main: #191421;
  --bg-image: linear-gradient(180deg, rgba(16, 12, 28, 0.45) 0%, rgba(31, 31, 31, 0.9) 100%),
              linear-gradient(135deg, #130f24 0%, #1e1633 45%, #2a1b3f 75%, #181421 100%);

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #232d3d;
  --surface-selected: #2d3c54;
  --text-main: #e3e3e3;
  --text-muted: #c4c7c5;
  --border-color: #444746;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(138, 180, 248, 0.35);
}

/* 7. Gmail Aurora (Starry Night & Cosmic Glow) */
[data-theme="gmail_slate"],
[data-theme="charcoal_coral"] {
  --color-primary: #3c4043;
  --color-primary-hover: #202124;
  --color-secondary: #0b57d0;
  --color-secondary-hover: #0842a0;
  --color-accent: #d93025;

  --bg-main: #f0f2f5;
  --bg-image: linear-gradient(180deg, rgba(241, 243, 244, 0.3) 0%, rgba(246, 248, 252, 0.85) 100%),
              linear-gradient(135deg, #0d1527 0%, #1a2a47 35%, #2d456b 60%, #526f96 80%, #d8e0ea 100%);

  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-alt: #f1f3f4;
  --surface-selected: #e8eaed;
  --text-main: #202124;
  --text-muted: #5f6368;
  --border-color: #dadce0;

  --color-success: #137333;
  --color-warning: #b06000;
  --color-danger: #d93025;
  --color-info: #0b57d0;
  --focus-ring: rgba(60, 64, 67, 0.25);
}

[data-theme="gmail_slate"][data-mode="dark"],
[data-theme="charcoal_coral"][data-mode="dark"],
body.dark-mode[data-theme="gmail_slate"],
body.dark-mode[data-theme="charcoal_coral"] {
  --color-primary: #e8eaed;
  --color-primary-hover: #ffffff;
  --color-secondary: #a8c7fa;
  --color-secondary-hover: #8ab4f8;
  --color-accent: #f28b82;

  --bg-main: #131720;
  --bg-image: linear-gradient(180deg, rgba(10, 14, 20, 0.45) 0%, rgba(31, 31, 31, 0.9) 100%),
              linear-gradient(135deg, #070c17 0%, #0e1728 45%, #16233a 75%, #0e141f 100%);

  --surface: rgba(40, 42, 44, 0.92);
  --surface-solid: #282a2c;
  --surface-alt: #35363a;
  --surface-selected: #484a4d;
  --text-main: #e8eaed;
  --text-muted: #9aa0a6;
  --border-color: #5f6368;

  --color-success: #81c995;
  --color-warning: #fdd663;
  --color-danger: #f28b82;
  --color-info: #a8c7fa;
  --focus-ring: rgba(232, 234, 237, 0.35);
}

/* ===================================================================
   ADDITIONAL THEMES (THEMES 8 - 20)
   =================================================================== */

/* 8. Royal Mughal Gold & Obsidian */
[data-theme="royal_gold"] {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-secondary: #18181b;
  --color-secondary-hover: #27272a;
  --color-accent: #f59e0b;
  --bg-main: #fcf9f2;
  --bg-image: radial-gradient(circle at 10% 10%, rgba(245, 158, 11, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 90% 90%, rgba(217, 119, 6, 0.12) 0%, transparent 45%),
              linear-gradient(135deg, #fdfbf7 0%, #f7f1e5 100%);
  --surface: rgba(255, 255, 255, 0.95);
  --surface-solid: #ffffff;
  --surface-alt: #fef3c7;
  --surface-selected: #fde68a;
  --text-main: #27272a;
  --text-muted: #52525b;
  --border-color: #e4d8b4;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-info: #0284c7;
  --focus-ring: rgba(217, 119, 6, 0.28);
}
[data-theme="royal_gold"][data-mode="dark"],
body.dark-mode[data-theme="royal_gold"] {
  --color-primary: #fbbf24;
  --color-primary-hover: #f59e0b;
  --color-secondary: #fef3c7;
  --color-secondary-hover: #ffffff;
  --color-accent: #f59e0b;
  --bg-main: #14120e;
  --bg-image: radial-gradient(circle at 20% 20%, rgba(217, 119, 6, 0.22) 0%, transparent 50%),
              linear-gradient(135deg, #181612 0%, #231e16 50%, #12100d 100%);
  --surface: rgba(30, 27, 22, 0.94);
  --surface-solid: #1e1b16;
  --surface-alt: #2b251b;
  --surface-selected: #423620;
  --text-main: #fef3c7;
  --text-muted: #d4c5a9;
  --border-color: #4a3e26;
  --focus-ring: rgba(251, 191, 36, 0.35);
}

/* 9. French Bistro Noir & Espresso */
[data-theme="bistro_noir"] {
  --color-primary: #854d0e;
  --color-primary-hover: #713f12;
  --color-secondary: #1c1917;
  --color-secondary-hover: #292524;
  --color-accent: #d97706;
  --bg-main: #fbf8f5;
  --bg-image: linear-gradient(135deg, #2b211b 0%, #3a2c24 35%, #574236 70%, #d8cec4 100%);
  --surface: rgba(255, 255, 255, 0.95);
  --surface-solid: #ffffff;
  --surface-alt: #f5ede6;
  --surface-selected: #ebdccf;
  --text-main: #1c1917;
  --text-muted: #57534e;
  --border-color: #e7ded5;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-info: #0369a1;
  --focus-ring: rgba(133, 77, 14, 0.25);
}
[data-theme="bistro_noir"][data-mode="dark"],
body.dark-mode[data-theme="bistro_noir"] {
  --color-primary: #fde047;
  --color-primary-hover: #facc15;
  --color-secondary: #e7e5e4;
  --color-secondary-hover: #ffffff;
  --color-accent: #fbbf24;
  --bg-main: #141210;
  --bg-image: linear-gradient(180deg, rgba(20, 18, 16, 0.6) 0%, rgba(10, 9, 8, 0.95) 100%),
              linear-gradient(135deg, #1c1815 0%, #26201a 50%, #151310 100%);
  --surface: rgba(28, 25, 23, 0.94);
  --surface-solid: #1c1917;
  --surface-alt: #292524;
  --surface-selected: #44403c;
  --text-main: #f5f5f4;
  --text-muted: #a8a29e;
  --border-color: #44403c;
  --focus-ring: rgba(253, 224, 71, 0.35);
}

/* 10. Imperial Jade & Gold */
[data-theme="emerald_luxury"] {
  --color-primary: #047857;
  --color-primary-hover: #065f46;
  --color-secondary: #b45309;
  --color-secondary-hover: #92400e;
  --color-accent: #10b981;
  --bg-main: #f0fdf4;
  --bg-image: radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.18) 0%, transparent 45%),
              linear-gradient(135deg, #064e3b 0%, #065f46 30%, #0f766e 65%, #d1fae5 100%);
  --surface: rgba(255, 255, 255, 0.95);
  --surface-solid: #ffffff;
  --surface-alt: #dcfce7;
  --surface-selected: #bbf7d0;
  --text-main: #064e3b;
  --text-muted: #374151;
  --border-color: #a7f3d0;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
  --focus-ring: rgba(4, 120, 87, 0.25);
}
[data-theme="emerald_luxury"][data-mode="dark"],
body.dark-mode[data-theme="emerald_luxury"] {
  --color-primary: #34d399;
  --color-primary-hover: #6ee7b7;
  --color-secondary: #fcd34d;
  --color-secondary-hover: #fde047;
  --color-accent: #10b981;
  --bg-main: #081a14;
  --bg-image: linear-gradient(135deg, #042f2e 0%, #064e3b 45%, #022c22 100%);
  --surface: rgba(9, 38, 29, 0.94);
  --surface-solid: #09261d;
  --surface-alt: #0e3d2f;
  --surface-selected: #165b46;
  --text-main: #ecfdf5;
  --text-muted: #a7f3d0;
  --border-color: #134e4a;
  --focus-ring: rgba(52, 211, 153, 0.35);
}

/* 11. Spiced Saffron & Crimson */
[data-theme="crimson_feast"] {
  --color-primary: #be123c;
  --color-primary-hover: #9f1239;
  --color-secondary: #c2410c;
  --color-secondary-hover: #9a3412;
  --color-accent: #ea580c;
  --bg-main: #fff1f2;
  --bg-image: linear-gradient(135deg, #881337 0%, #9f1239 30%, #c2410c 60%, #fed7aa 100%);
  --surface: rgba(255, 255, 255, 0.95);
  --surface-solid: #ffffff;
  --surface-alt: #ffe4e6;
  --surface-selected: #fecdd3;
  --text-main: #881337;
  --text-muted: #4c0519;
  --border-color: #fecdd3;
  --color-success: #15803d;
  --color-warning: #ea580c;
  --color-danger: #be123c;
  --color-info: #0284c7;
  --focus-ring: rgba(190, 18, 60, 0.25);
}
[data-theme="crimson_feast"][data-mode="dark"],
body.dark-mode[data-theme="crimson_feast"] {
  --color-primary: #fb7185;
  --color-primary-hover: #fda4af;
  --color-secondary: #fdba74;
  --color-secondary-hover: #fed7aa;
  --color-accent: #f43f5e;
  --bg-main: #1f0b12;
  --bg-image: linear-gradient(135deg, #380d1b 0%, #4c0519 45%, #2a0b14 100%);
  --surface: rgba(45, 15, 24, 0.94);
  --surface-solid: #2d0f18;
  --surface-alt: #431422;
  --surface-selected: #5f1b31;
  --text-main: #fff1f2;
  --text-muted: #fecdd3;
  --border-color: #881337;
  --focus-ring: rgba(251, 113, 133, 0.35);
}

/* 12. Tuscan Olive & Terracotta */
[data-theme="tuscan_olive"] {
  --color-primary: #4d7c0f;
  --color-primary-hover: #3f6212;
  --color-secondary: #c2410c;
  --color-secondary-hover: #9a3412;
  --color-accent: #84cc16;
  --bg-main: #f7fee7;
  --bg-image: linear-gradient(135deg, #365314 0%, #4d7c0f 35%, #854d0e 70%, #fef3c7 100%);
  --surface: rgba(255, 255, 255, 0.95);
  --surface-solid: #ffffff;
  --surface-alt: #ecfccb;
  --surface-selected: #d9f99d;
  --text-main: #1a2e05;
  --text-muted: #4d5738;
  --border-color: #d9f99d;
  --color-success: #15803d;
  --color-warning: #c2410c;
  --color-danger: #b91c1c;
  --color-info: #0284c7;
  --focus-ring: rgba(77, 124, 15, 0.25);
}
[data-theme="tuscan_olive"][data-mode="dark"],
body.dark-mode[data-theme="tuscan_olive"] {
  --color-primary: #a3e635;
  --color-primary-hover: #bef264;
  --color-secondary: #fb923c;
  --color-secondary-hover: #fdba74;
  --color-accent: #84cc16;
  --bg-main: #111a07;
  --bg-image: linear-gradient(135deg, #1a2e05 0%, #273e0d 50%, #152205 100%);
  --surface: rgba(29, 44, 12, 0.94);
  --surface-solid: #1d2c0c;
  --surface-alt: #2b4012;
  --surface-selected: #3f5d1b;
  --text-main: #f7fee7;
  --text-muted: #d9f99d;
  --border-color: #365314;
  --focus-ring: rgba(163, 230, 53, 0.35);
}

/* 13. Cyberpunk Neon */
[data-theme="neon_cyber"] {
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-secondary: #06b6d4;
  --color-secondary-hover: #0891b2;
  --color-accent: #ec4899;
  --bg-main: #0a0915;
  --bg-image: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.25) 0%, transparent 45%),
              linear-gradient(135deg, #090514 0%, #160d2b 50%, #0b1126 100%);
  --surface: rgba(23, 17, 43, 0.92);
  --surface-solid: #17112b;
  --surface-alt: #231942;
  --surface-selected: #342461;
  --text-main: #f3e8ff;
  --text-muted: #c084fc;
  --border-color: #4c1d95;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #f43f5e;
  --color-info: #06b6d4;
  --focus-ring: rgba(139, 92, 246, 0.4);
}
[data-theme="neon_cyber"][data-mode="dark"],
body.dark-mode[data-theme="neon_cyber"] {
  --color-primary: #a78bfa;
  --color-primary-hover: #c4b5fd;
  --color-secondary: #22d3ee;
  --color-secondary-hover: #67e8f9;
  --color-accent: #f472b6;
  --bg-main: #06050d;
  --bg-image: linear-gradient(135deg, #05030d 0%, #100822 50%, #060d1e 100%);
  --surface: rgba(17, 11, 33, 0.95);
  --surface-solid: #110b21;
  --surface-alt: #1c1236;
  --surface-selected: #2a1b52;
  --text-main: #f5f3ff;
  --text-muted: #d8b4fe;
  --border-color: #581c87;
  --focus-ring: rgba(167, 139, 250, 0.45);
}

/* 14. Patisserie Pastel & Strawberry */
[data-theme="pastel_bakery"] {
  --color-primary: #f43f5e;
  --color-primary-hover: #e11d48;
  --color-secondary: #d97706;
  --color-secondary-hover: #b45309;
  --color-accent: #fb7185;
  --bg-main: #fff5f7;
  --bg-image: radial-gradient(circle at 10% 20%, rgba(244, 63, 94, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 85% 85%, rgba(251, 191, 36, 0.18) 0%, transparent 45%),
              linear-gradient(135deg, #fff0f5 0%, #fef3c7 100%);
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-alt: #ffe4e6;
  --surface-selected: #fecdd3;
  --text-main: #4c0519;
  --text-muted: #881337;
  --border-color: #fbcfe8;
  --color-success: #15803d;
  --color-warning: #d97706;
  --color-danger: #e11d48;
  --color-info: #0284c7;
  --focus-ring: rgba(244, 63, 94, 0.25);
}
[data-theme="pastel_bakery"][data-mode="dark"],
body.dark-mode[data-theme="pastel_bakery"] {
  --color-primary: #fda4af;
  --color-primary-hover: #fecdd3;
  --color-secondary: #fde68a;
  --color-secondary-hover: #fef3c7;
  --color-accent: #fb7185;
  --bg-main: #1f0d14;
  --bg-image: linear-gradient(135deg, #2b111b 0%, #3a1523 50%, #20130d 100%);
  --surface: rgba(43, 19, 29, 0.94);
  --surface-solid: #2b131d;
  --surface-alt: #3c1928;
  --surface-selected: #522238;
  --text-main: #fff1f2;
  --text-muted: #fecdd3;
  --border-color: #701a38;
  --focus-ring: rgba(253, 164, 175, 0.35);
}

/* 15. Antique Parchment & Sepia */
[data-theme="vintage_parchment"] {
  --color-primary: #78350f;
  --color-primary-hover: #451a03;
  --color-secondary: #92400e;
  --color-secondary-hover: #78350f;
  --color-accent: #b45309;
  --bg-main: #fefce8;
  --bg-image: radial-gradient(circle at 20% 20%, rgba(217, 119, 6, 0.12) 0%, transparent 50%),
              linear-gradient(135deg, #fef3c7 0%, #fae8b0 50%, #f6deb0 100%);
  --surface: rgba(255, 253, 245, 0.96);
  --surface-solid: #fffdf5;
  --surface-alt: #fef3c7;
  --surface-selected: #fde68a;
  --text-main: #451a03;
  --text-muted: #78350f;
  --border-color: #e5cf96;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #991b1b;
  --color-info: #0369a1;
  --focus-ring: rgba(120, 53, 15, 0.28);
}
[data-theme="vintage_parchment"][data-mode="dark"],
body.dark-mode[data-theme="vintage_parchment"] {
  --color-primary: #fde68a;
  --color-primary-hover: #fef3c7;
  --color-secondary: #fbbf24;
  --color-secondary-hover: #f59e0b;
  --color-accent: #d97706;
  --bg-main: #19140c;
  --bg-image: linear-gradient(135deg, #241c10 0%, #2f2415 50%, #1c150c 100%);
  --surface: rgba(36, 28, 16, 0.94);
  --surface-solid: #241c10;
  --surface-alt: #332715;
  --surface-selected: #49371d;
  --text-main: #fef9c3;
  --text-muted: #fde047;
  --border-color: #5c4524;
  --focus-ring: rgba(253, 230, 138, 0.35);
}

/* 16. Nordic Frost & Steel */
[data-theme="nordic_minimal"] {
  --color-primary: #0284c7;
  --color-primary-hover: #0369a1;
  --color-secondary: #475569;
  --color-secondary-hover: #334155;
  --color-accent: #38bdf8;
  --bg-main: #f8fafc;
  --bg-image: linear-gradient(180deg, rgba(224, 242, 254, 0.4) 0%, rgba(248, 250, 252, 0.95) 100%),
              linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #f1f5f9 100%);
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-alt: #f1f5f9;
  --surface-selected: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #475569;
  --border-color: #cbd5e1;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
  --focus-ring: rgba(2, 132, 199, 0.25);
}
[data-theme="nordic_minimal"][data-mode="dark"],
body.dark-mode[data-theme="nordic_minimal"] {
  --color-primary: #38bdf8;
  --color-primary-hover: #7dd3fc;
  --color-secondary: #94a3b8;
  --color-secondary-hover: #cbd5e1;
  --color-accent: #0284c7;
  --bg-main: #0b1120;
  --bg-image: linear-gradient(135deg, #0b1120 0%, #152238 50%, #0e172a 100%);
  --surface: rgba(21, 34, 56, 0.94);
  --surface-solid: #152238;
  --surface-alt: #1e304f;
  --surface-selected: #2d456f;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --focus-ring: rgba(56, 189, 248, 0.35);
}

/* 17. Provence Lavender & Lilac */
[data-theme="lavender_dream"] {
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-secondary: #c026d3;
  --color-secondary-hover: #a21caf;
  --color-accent: #a78bfa;
  --bg-main: #faf5ff;
  --bg-image: radial-gradient(circle at 10% 20%, rgba(167, 139, 250, 0.2) 0%, transparent 40%),
              radial-gradient(circle at 85% 85%, rgba(232, 121, 249, 0.18) 0%, transparent 45%),
              linear-gradient(135deg, #f3e8ff 0%, #fae8ff 100%);
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-alt: #f3e8ff;
  --surface-selected: #e9d5ff;
  --text-main: #3b0764;
  --text-muted: #6b21a8;
  --border-color: #d8b4fe;
  --color-success: #15803d;
  --color-warning: #c2410c;
  --color-danger: #be123c;
  --color-info: #0284c7;
  --focus-ring: rgba(124, 58, 237, 0.25);
}
[data-theme="lavender_dream"][data-mode="dark"],
body.dark-mode[data-theme="lavender_dream"] {
  --color-primary: #c4b5fd;
  --color-primary-hover: #ddd6fe;
  --color-secondary: #f0abfc;
  --color-secondary-hover: #f5d0fe;
  --color-accent: #a78bfa;
  --bg-main: #170d28;
  --bg-image: linear-gradient(135deg, #1e1135 0%, #291747 50%, #150a24 100%);
  --surface: rgba(35, 20, 60, 0.94);
  --surface-solid: #23143c;
  --surface-alt: #321c56;
  --surface-selected: #48277c;
  --text-main: #faf5ff;
  --text-muted: #d8b4fe;
  --border-color: #581c87;
  --focus-ring: rgba(196, 181, 253, 0.35);
}

/* 18. Karakoram Bronze & Midnight */
[data-theme="desert_dusk"] {
  --color-primary: #b45309;
  --color-primary-hover: #92400e;
  --color-secondary: #4338ca;
  --color-secondary-hover: #3730a3;
  --color-accent: #f59e0b;
  --bg-main: #181528;
  --bg-image: linear-gradient(180deg, rgba(24, 21, 40, 0.75) 0%, rgba(12, 10, 22, 0.95) 100%),
              linear-gradient(135deg, #1b162f 0%, #2f1d2e 45%, #42251a 80%, #0d0a18 100%);
  --surface: rgba(32, 27, 52, 0.94);
  --surface-solid: #201b34;
  --surface-alt: #2c2547;
  --surface-selected: #3e3363;
  --text-main: #fef3c7;
  --text-muted: #d4c79e;
  --border-color: #4a3e6d;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #f43f5e;
  --color-info: #38bdf8;
  --focus-ring: rgba(180, 83, 9, 0.35);
}
[data-theme="desert_dusk"][data-mode="dark"],
body.dark-mode[data-theme="desert_dusk"] {
  --color-primary: #fcd34d;
  --color-primary-hover: #fde68a;
  --color-secondary: #a5b4fc;
  --color-secondary-hover: #c7d2fe;
  --color-accent: #f59e0b;
  --bg-main: #110e1e;
  --bg-image: linear-gradient(135deg, #120e21 0%, #1f1325 50%, #27140e 100%);
  --surface: rgba(25, 20, 42, 0.94);
  --surface-solid: #19142a;
  --surface-alt: #241c3b;
  --surface-selected: #342854;
  --text-main: #fffbeb;
  --text-muted: #e2d9bc;
  --border-color: #43355c;
  --focus-ring: rgba(252, 211, 77, 0.35);
}

/* 19. Kyoto Zen Matcha & Bamboo */
[data-theme="tokyo_matcha"] {
  --color-primary: #15803d;
  --color-primary-hover: #166534;
  --color-secondary: #334155;
  --color-secondary-hover: #1e293b;
  --color-accent: #4ade80;
  --bg-main: #f2f8f4;
  --bg-image: radial-gradient(circle at 15% 15%, rgba(74, 222, 128, 0.18) 0%, transparent 45%),
              linear-gradient(135deg, #e4f1e7 0%, #d8ebd9 50%, #f0f7f2 100%);
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-alt: #dcfce7;
  --surface-selected: #bbf7d0;
  --text-main: #14532d;
  --text-muted: #334155;
  --border-color: #bbf7d0;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
  --focus-ring: rgba(21, 128, 61, 0.25);
}
[data-theme="tokyo_matcha"][data-mode="dark"],
body.dark-mode[data-theme="tokyo_matcha"] {
  --color-primary: #4ade80;
  --color-primary-hover: #86efac;
  --color-secondary: #94a3b8;
  --color-secondary-hover: #cbd5e1;
  --color-accent: #22c55e;
  --bg-main: #0c1a11;
  --bg-image: linear-gradient(135deg, #0e2015 0%, #132b1d 50%, #09140d 100%);
  --surface: rgba(19, 43, 29, 0.94);
  --surface-solid: #132b1d;
  --surface-alt: #1c3d2a;
  --surface-selected: #28583c;
  --text-main: #f0fdf4;
  --text-muted: #bbf7d0;
  --border-color: #166534;
  --focus-ring: rgba(74, 222, 128, 0.35);
}

/* 20. Mediterranean Sunset Coral */
[data-theme="sunset_coral"] {
  --color-primary: #ea580c;
  --color-primary-hover: #c2410c;
  --color-secondary: #d97706;
  --color-secondary-hover: #b45309;
  --color-accent: #fb923c;
  --bg-main: #fff7ed;
  --bg-image: radial-gradient(circle at 10% 20%, rgba(234, 88, 12, 0.2) 0%, transparent 40%),
              radial-gradient(circle at 85% 85%, rgba(217, 119, 6, 0.22) 0%, transparent 45%),
              linear-gradient(135deg, #ffedd5 0%, #fed7aa 50%, #fef3c7 100%);
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-alt: #ffedd5;
  --surface-selected: #fed7aa;
  --text-main: #7c2d12;
  --text-muted: #9a3412;
  --border-color: #fed7aa;
  --color-success: #15803d;
  --color-warning: #ea580c;
  --color-danger: #dc2626;
  --color-info: #0284c7;
  --focus-ring: rgba(234, 88, 12, 0.25);
}
[data-theme="sunset_coral"][data-mode="dark"],
body.dark-mode[data-theme="sunset_coral"] {
  --color-primary: #fb923c;
  --color-primary-hover: #fdba74;
  --color-secondary: #fde047;
  --color-secondary-hover: #fef08a;
  --color-accent: #f97316;
  --bg-main: #1f1109;
  --bg-image: linear-gradient(135deg, #2b170c 0%, #3d2110 50%, #1e0e07 100%);
  --surface: rgba(43, 23, 12, 0.94);
  --surface-solid: #2b170c;
  --surface-alt: #3c2010;
  --surface-selected: #562e17;
  --text-main: #fff7ed;
  --text-muted: #fed7aa;
  --border-color: #7c2d12;
  --focus-ring: rgba(251, 146, 60, 0.35);
}

/* ===================================================================
   MENU MULTI-VIEW STYLING (GRID, COMPACT, TABLE, MAGAZINE)
   =================================================================== */

/* View Switcher Pills */
.menu-view-switcher {
  display: inline-flex;
  background: var(--surface-alt);
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid var(--border-color);
  gap: 4px;
}
.menu-view-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
}
.menu-view-btn:hover {
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.05);
}
body.dark-mode .menu-view-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.menu-view-btn.active {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 20-Theme Pills Scrollbar */
.theme-pill-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.theme-pill-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-pill-chip:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.theme-pill-chip.active {
  background: var(--surface-selected);
  border-color: var(--color-primary);
  font-weight: 700;
}

/* Magazine View Specific Styling */
.magazine-item-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.magazine-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.magazine-hero-badge {
  font-family: serif;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* Compact POS List View Specific Styling */
.pos-table-row {
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease;
}
.pos-table-row:hover {
  background-color: var(--surface-alt);
}
.pos-qty-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 6px;
}

/* Table QR View Floating Cart Bar */
.table-sticky-cart-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 600px);
  background: var(--surface-solid);
  border: 2px solid var(--color-primary);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 12px 20px;
  z-index: 1040;
  backdrop-filter: blur(8px);
}