/* ───────── First Taste by NorrOne — brand themes ─────────
   Every colour, font, radius and shadow in the app comes from these tokens.
   A theme is applied with data-theme on <html> (whole app) or on any element
   (theme previews). "noir" is the default. */

:root, [data-theme="noir"] {
  /* Noir & Gold — dark, quiet luxury. Near-black, cream type, muted gold detail. */
  color-scheme: dark;
  --bg: #0A0B0A; --bg-2: #0D0E0D;
  --surface: #131413; --surface-2: #181918; --surface-3: #1F201E;
  --ink: #EFE7D2; --ink-2: #D6CFBC; --muted: #9A9486; --faint: #6B675E;
  --line: #232321; --line-2: #333330; --line-3: #4E4C47;
  --primary: #CFBE91; --on-primary: #0A0B0A; --primary-hover: #DCCC9F; --sel: #CFBE91;
  --accent: #CFBE91; --accent-ink: #DCCB9B; --accent-soft: rgba(207, 190, 145, .12); --accent-line: rgba(207, 190, 145, .34); --on-accent: #0A0B0A;
  --green: #86C29D; --green-soft: rgba(134, 194, 157, .12); --green-line: rgba(134, 194, 157, .28); --on-green: #0A0B0A;
  --amber: #D8B46A; --amber-ink: #E3C581; --amber-soft: rgba(216, 180, 106, .12);
  --red: #DF8A72; --on-red: #0A0B0A; --red-ink: #EDA38E; --red-soft: rgba(223, 138, 114, .12); --red-line: rgba(223, 138, 114, .34);
  --blue: #9DB4EA; --blue-soft: rgba(157, 180, 234, .12);
  --violet: #BBA5EA; --violet-soft: rgba(187, 165, 234, .12);
  --track: #1F201E; --bar: #CFBE91; --dist: #2A2B28; --dist-strong: #4E4C47;
  --star: #CFBE91; --star-soft: rgba(207, 190, 145, .12); --star-line: rgba(207, 190, 145, .4);
  --allergen-bg: rgba(216, 180, 106, .09); --allergen-ink: #E3C581; --allergen-line: rgba(216, 180, 106, .26);
  --qr-bg: #EFE7D2; --knob: #EFE7D2; --glass: rgba(10, 11, 10, .72); --overlay: rgba(4, 4, 4, .7); --focus: rgba(207, 190, 145, .16);
  --toast-bg: #EFE7D2; --toast-ink: #0A0B0A;
  --hero-grad: linear-gradient(135deg, #141514 0%, #16140F 100%);
  --live-grad: linear-gradient(135deg, #131413 0%, #111813 100%);
  --glow: radial-gradient(1100px 620px at 85% -15%, rgba(207, 190, 145, .07), transparent 62%);
  --grain-o: .05;
  --shadow-sm: none;
  --shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 24px 48px -28px rgba(0, 0, 0, .85);
  --shadow-lg: 0 40px 110px -30px rgba(0, 0, 0, .9);
  --font-display: "Forum", "Didot", Georgia, serif;
  --font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-weight: 400; --display-case: uppercase; --display-track: .01em;
  --label-track: .14em;
  --btn-case: uppercase; --btn-track: .09em; --btn-size: 12px; --btn-weight: 500;
  --nav-case: uppercase; --nav-size: 12px; --nav-track: .09em;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-btn: 8px;
}

[data-theme="champagne"] {
  /* Champagne — light luxury. Ivory, deep navy, champagne gold, high-contrast serif. */
  color-scheme: light;
  --bg: #F6F2EA; --bg-2: #F1ECE2;
  --surface: #FFFDF9; --surface-2: #FAF7F1; --surface-3: #F0EADF;
  --ink: #121A2F; --ink-2: #2C3550; --muted: #6F7285; --faint: #A3A4AF;
  --line: #E8E1D4; --line-2: #DDD4C4; --line-3: #C9BFA9;
  --primary: #121A2F; --on-primary: #F6F2EA; --primary-hover: #232C46; --sel: #121A2F;
  --accent: #A88A5C; --accent-ink: #86693D; --accent-soft: #F3ECE0; --accent-line: #E0D0B4; --on-accent: #FFFDF9;
  --green: #3E8A63; --green-soft: #E6F1EA; --green-line: #C6E0D0; --on-green: #FFFFFF;
  --amber: #B98A2E; --amber-ink: #8F6714; --amber-soft: #F7EEDB;
  --red: #B9533F; --red-ink: #9C3E2C; --red-soft: #F7E6E1; --red-line: #EBC1B6;
  --blue: #3A5BA8; --blue-soft: #E8EDF8;
  --violet: #6A55B0; --violet-soft: #EFEBF8;
  --track: #EFE9DE; --bar: #121A2F; --dist: #E9E2D5; --dist-strong: #C9BFA9;
  --star: #B98A2E; --star-soft: #FBF4E6; --star-line: #E8D3A6;
  --allergen-bg: #F8F1E3; --allergen-ink: #7D5F28; --allergen-line: #E8D7B5;
  --qr-bg: #FFFFFF; --knob: #FFFFFF; --glass: rgba(255, 253, 249, .9); --overlay: rgba(18, 26, 47, .35); --focus: rgba(18, 26, 47, .08);
  --toast-bg: #121A2F; --toast-ink: #F6F2EA;
  --hero-grad: linear-gradient(135deg, #FFFDF9 0%, #F7F0E4 100%);
  --live-grad: linear-gradient(135deg, #FFFDF9 0%, #EFF5F0 100%);
  --glow: none; --grain-o: 0;
  --shadow-sm: 0 1px 2px rgba(18, 26, 47, .04);
  --shadow: 0 1px 2px rgba(18, 26, 47, .04), 0 10px 30px -14px rgba(18, 26, 47, .14);
  --shadow-lg: 0 30px 70px -24px rgba(18, 26, 47, .3);
  --font-display: "Cormorant Garamond", "Didot", Georgia, serif;
  --font-body: "Jost", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 600; --display-case: none; --display-track: -.005em;
  --label-track: .16em;
  --btn-case: uppercase; --btn-track: .12em; --btn-size: 12px; --btn-weight: 500;
  --nav-case: none; --nav-size: 15px; --nav-track: 0;
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-btn: 4px;
}

[data-theme="bistro"] {
  /* Bistro — casual & warm. Cream paper, tomato red, friendly rounded type. */
  color-scheme: light;
  --bg: #F7F5F1; --bg-2: #FBFAF7;
  --surface: #FFFFFF; --surface-2: #FBFAF7; --surface-3: #F1EEE8;
  --ink: #1D1B18; --ink-2: #3D3A35; --muted: #7A746A; --faint: #A9A297;
  --line: #ECE7DE; --line-2: #E2DCD1; --line-3: #D1C9BB;
  --primary: #1D1B18; --on-primary: #FFFFFF; --primary-hover: #33302B; --sel: #1D1B18;
  --accent: #E5583A; --accent-ink: #C2412A; --accent-soft: #FDEDE7; --accent-line: #F6C9BB; --on-accent: #FFFFFF;
  --green: #2E9D6A; --green-soft: #E4F4EB; --green-line: #CBE9D8; --on-green: #FFFFFF;
  --amber: #D9921F; --amber-ink: #A86B07; --amber-soft: #FCF1DD;
  --red: #D9573C; --red-ink: #B43A2A; --red-soft: #FDECE6; --red-line: #F3B9A8;
  --blue: #3A66D6; --blue-soft: #E8EEFC;
  --violet: #7A55D3; --violet-soft: #F0EAFD;
  --track: #F0ECE5; --bar: #1D1B18; --dist: #E7E1D6; --dist-strong: #CFC7B9;
  --star: #F2A93B; --star-soft: #FFF8EA; --star-line: #F6D49A;
  --allergen-bg: #FFF4E0; --allergen-ink: #8A5A00; --allergen-line: #F6E0B5;
  --qr-bg: #FFFFFF; --knob: #FFFFFF; --glass: rgba(255, 255, 255, .92); --overlay: rgba(29, 27, 24, .38); --focus: rgba(29, 27, 24, .06);
  --toast-bg: #1D1B18; --toast-ink: #FFFFFF;
  --hero-grad: linear-gradient(135deg, #FFFFFF 0%, #FBF6F1 100%);
  --live-grad: linear-gradient(135deg, #FFFFFF 0%, #F3FAF6 100%);
  --glow: none; --grain-o: 0;
  --shadow-sm: 0 1px 2px rgba(29, 27, 24, .04);
  --shadow: 0 1px 2px rgba(29, 27, 24, .04), 0 6px 20px -8px rgba(29, 27, 24, .10);
  --shadow-lg: 0 24px 60px -20px rgba(29, 27, 24, .28);
  --font-display: "Nunito", "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 800; --display-case: none; --display-track: -.02em;
  --label-track: .06em;
  --btn-case: none; --btn-track: 0; --btn-size: 14px; --btn-weight: 650;
  --nav-case: none; --nav-size: 14.5px; --nav-track: 0;
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-btn: 12px;
}

[data-theme="lacquer"] {
  /* Lacquer — modern Chinese. Deep lacquer red-black, vermilion, imperial gold. */
  color-scheme: dark;
  --bg: #150909; --bg-2: #1A0B0B;
  --surface: #200F0F; --surface-2: #271413; --surface-3: #301917;
  --ink: #F7E6C8; --ink-2: #E7D2AF; --muted: #B39A7F; --faint: #7D6754;
  --line: #361B18; --line-2: #482521; --line-3: #6B3A32;
  --primary: #D6A54C; --on-primary: #1A0A08; --primary-hover: #E4B765; --sel: #D6A54C;
  --accent: #CF3B2E; --accent-ink: #F0907C; --accent-soft: rgba(207, 59, 46, .18); --accent-line: rgba(207, 59, 46, .45); --on-accent: #FFF1DC;
  --green: #8EC79F; --green-soft: rgba(142, 199, 159, .12); --green-line: rgba(142, 199, 159, .3); --on-green: #150909;
  --amber: #E0B25A; --amber-ink: #EDC57A; --amber-soft: rgba(224, 178, 90, .13);
  --red: #EC7B62; --on-red: #150909; --red-ink: #F49A85; --red-soft: rgba(236, 123, 98, .14); --red-line: rgba(236, 123, 98, .38);
  --blue: #A3B8EC; --blue-soft: rgba(163, 184, 236, .12);
  --violet: #C6A9E8; --violet-soft: rgba(198, 169, 232, .12);
  --track: #2C1514; --bar: #D6A54C; --dist: #3A1E1B; --dist-strong: #6B3A32;
  --star: #D6A54C; --star-soft: rgba(214, 165, 76, .13); --star-line: rgba(214, 165, 76, .42);
  --allergen-bg: rgba(224, 178, 90, .1); --allergen-ink: #EDC57A; --allergen-line: rgba(224, 178, 90, .3);
  --qr-bg: #F7E6C8; --knob: #F7E6C8; --glass: rgba(21, 9, 9, .72); --overlay: rgba(10, 3, 3, .68); --focus: rgba(214, 165, 76, .18);
  --toast-bg: #D6A54C; --toast-ink: #1A0A08;
  --hero-grad: linear-gradient(135deg, #221010 0%, #2C1210 100%);
  --live-grad: linear-gradient(135deg, #200F0F 0%, #16170F 100%);
  --glow: radial-gradient(900px 520px at 90% -10%, rgba(207, 59, 46, .16), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(214, 165, 76, .07), transparent 60%);
  --grain-o: .045;
  --shadow-sm: none;
  --shadow: 0 24px 50px -28px rgba(0, 0, 0, .85);
  --shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, .9);
  --font-display: "Noto Serif SC", "Songti SC", Georgia, serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 600; --display-case: none; --display-track: .02em;
  --label-track: .16em;
  --btn-case: none; --btn-track: .02em; --btn-size: 14px; --btn-weight: 600;
  --nav-case: none; --nav-size: 14.5px; --nav-track: .01em;
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-btn: 6px;
}

[data-theme="zen"] {
  /* Zen — Japanese minimal. Washi paper, sumi ink, a single hanko-red accent. */
  color-scheme: light;
  --bg: #F2EEE5; --bg-2: #EEE9DE;
  --surface: #FAF8F3; --surface-2: #F6F3EC; --surface-3: #ECE7DC;
  --ink: #1D1C1A; --ink-2: #3C3A36; --muted: #7A756C; --faint: #AAA498;
  --line: #E2DDD1; --line-2: #D6D0C2; --line-3: #BDB5A4;
  --primary: #1D1C1A; --on-primary: #F6F3EC; --primary-hover: #34322E; --sel: #1D1C1A;
  --accent: #B5402F; --accent-ink: #9A3022; --accent-soft: #F4E3DD; --accent-line: #E3B9AE; --on-accent: #FFFFFF;
  --green: #5B7F5E; --green-soft: #E7EEE4; --green-line: #CADBC9; --on-green: #FFFFFF;
  --amber: #B98A3A; --amber-ink: #8C6420; --amber-soft: #F4ECDC;
  --red: #B5402F; --red-ink: #9A3022; --red-soft: #F4E3DD; --red-line: #E3B9AE;
  --blue: #44608E; --blue-soft: #E5EAF1;
  --violet: #6E5A8A; --violet-soft: #ECE8F1;
  --track: #E8E3D8; --bar: #1D1C1A; --dist: #E3DED3; --dist-strong: #BDB5A4;
  --star: #1D1C1A; --star-soft: #EFEBE2; --star-line: #BDB5A4;
  --allergen-bg: #F3EDE0; --allergen-ink: #6E5320; --allergen-line: #E1D5BC;
  --qr-bg: #FFFFFF; --knob: #FAF8F3; --glass: rgba(250, 248, 243, .92); --overlay: rgba(29, 28, 26, .32); --focus: rgba(29, 28, 26, .07);
  --toast-bg: #1D1C1A; --toast-ink: #F6F3EC;
  --hero-grad: linear-gradient(135deg, #FAF8F3 0%, #F4EFE5 100%);
  --live-grad: linear-gradient(135deg, #FAF8F3 0%, #EEF2EC 100%);
  --glow: none; --grain-o: .03;
  --shadow-sm: none;
  --shadow: 0 1px 0 rgba(29, 28, 26, .03);
  --shadow-lg: 0 24px 60px -24px rgba(29, 28, 26, .25);
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --font-body: "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 600; --display-case: none; --display-track: .02em;
  --label-track: .22em;
  --btn-case: none; --btn-track: .04em; --btn-size: 14px; --btn-weight: 500;
  --nav-case: none; --nav-size: 14.5px; --nav-track: .04em;
  --r-sm: 2px; --r: 3px; --r-lg: 4px; --r-btn: 2px;
}

[data-theme="street"] {
  /* Street — bold casual. Mustard, ink-black outlines, chunky type. Burger bars, food trucks. */
  color-scheme: light;
  --bg: #FFF6E3; --bg-2: #FFEFCC;
  --surface: #FFFFFF; --surface-2: #FFFAF0; --surface-3: #FFF0D2;
  --ink: #151515; --ink-2: #2B2B2B; --muted: #6B6459; --faint: #A39A8C;
  --line: #EFE2C6; --line-2: #151515; --line-3: #151515;
  --primary: #151515; --on-primary: #FFFFFF; --primary-hover: #2B2B2B; --sel: #151515;
  --accent: #FFC629; --accent-ink: #7A5A00; --accent-soft: #FFF1C2; --accent-line: #F0C94D; --on-accent: #151515;
  --green: #1F9D5B; --green-soft: #DDF5E7; --green-line: #A8E2C2; --on-green: #FFFFFF;
  --amber: #F29F05; --amber-ink: #9A6200; --amber-soft: #FFEFC9;
  --red: #F0502A; --red-ink: #C23812; --red-soft: #FFE3D9; --red-line: #F7B3A0;
  --blue: #2E62E6; --blue-soft: #E3EBFF;
  --violet: #7B4DE0; --violet-soft: #EFE7FF;
  --track: #F3E8D0; --bar: #151515; --dist: #F0E3C8; --dist-strong: #C9B992;
  --star: #FFB703; --star-soft: #FFF5D6; --star-line: #151515;
  --allergen-bg: #FFF1C2; --allergen-ink: #6B4E00; --allergen-line: #EBCB6A;
  --qr-bg: #FFFFFF; --knob: #FFFFFF; --glass: rgba(255, 255, 255, .95); --overlay: rgba(21, 21, 21, .45); --focus: rgba(21, 21, 21, .1);
  --toast-bg: #151515; --toast-ink: #FFC629;
  --hero-grad: linear-gradient(135deg, #FFFFFF 0%, #FFF3D3 100%);
  --live-grad: linear-gradient(135deg, #FFFFFF 0%, #E9F8EF 100%);
  --glow: none; --grain-o: 0;
  --shadow-sm: 3px 3px 0 #151515;
  --shadow: 4px 4px 0 #151515;
  --shadow-lg: 8px 8px 0 #151515;
  --font-display: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 800; --display-case: none; --display-track: -.025em;
  --label-track: .08em;
  --btn-case: none; --btn-track: 0; --btn-size: 14px; --btn-weight: 700;
  --nav-case: none; --nav-size: 14.5px; --nav-track: 0;
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-btn: 12px;
}
[data-theme="street"] .card, [data-theme="street"] .modal, [data-theme="street"] .g-q, [data-theme="street"] .g-hero { border: 2px solid #151515; }
[data-theme="street"] .btn { border-width: 2px; border-color: #151515; }
[data-theme="street"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #151515; }
[data-theme="street"] .btn-ghost, [data-theme="street"] .btn-ghost:hover { border-color: transparent; box-shadow: none; transform: none; }

[data-theme="garden"] {
  /* Garden — fresh & seasonal. Sage, terracotta, soft serif; plant-forward and healthy concepts. */
  color-scheme: light;
  --bg: #F2F3EC; --bg-2: #ECEEE4;
  --surface: #FFFFFF; --surface-2: #F8F9F4; --surface-3: #E9ECE1;
  --ink: #1F2A22; --ink-2: #39463C; --muted: #6E7A70; --faint: #A3ACA3;
  --line: #E1E5D9; --line-2: #D3D9C9; --line-3: #B9C2AE;
  --primary: #2F5D46; --on-primary: #F2F3EC; --primary-hover: #3A6E54; --sel: #2F5D46;
  --accent: #C96F4A; --accent-ink: #A6532F; --accent-soft: #F8E8E0; --accent-line: #EBC4B2; --on-accent: #FFFFFF;
  --green: #3E8A5F; --green-soft: #E3F1E8; --green-line: #C2E0CD; --on-green: #FFFFFF;
  --amber: #C99232; --amber-ink: #8E6417; --amber-soft: #F7EEDA;
  --red: #C25B43; --red-ink: #A0412B; --red-soft: #F8E6E0; --red-line: #EBC0B3;
  --blue: #3F6AA8; --blue-soft: #E6EDF6;
  --violet: #75609E; --violet-soft: #EEEAF5;
  --track: #E7EBE0; --bar: #2F5D46; --dist: #E2E7DA; --dist-strong: #B9C2AE;
  --star: #D49A2F; --star-soft: #FBF3E1; --star-line: #EBD39E;
  --allergen-bg: #F7EEDA; --allergen-ink: #7A5513; --allergen-line: #E7D3A5;
  --qr-bg: #FFFFFF; --knob: #FFFFFF; --glass: rgba(255, 255, 255, .92); --overlay: rgba(31, 42, 34, .34); --focus: rgba(47, 93, 70, .1);
  --toast-bg: #2F5D46; --toast-ink: #F2F3EC;
  --hero-grad: linear-gradient(135deg, #FFFFFF 0%, #EEF3E8 100%);
  --live-grad: linear-gradient(135deg, #FFFFFF 0%, #E8F3EC 100%);
  --glow: none; --grain-o: 0;
  --shadow-sm: 0 1px 2px rgba(31, 42, 34, .04);
  --shadow: 0 1px 2px rgba(31, 42, 34, .04), 0 10px 28px -14px rgba(31, 42, 34, .14);
  --shadow-lg: 0 28px 64px -24px rgba(31, 42, 34, .28);
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 400; --display-case: none; --display-track: -.01em;
  --label-track: .1em;
  --btn-case: none; --btn-track: 0; --btn-size: 14px; --btn-weight: 600;
  --nav-case: none; --nav-size: 14.5px; --nav-track: 0;
  --r-sm: 12px; --r: 16px; --r-lg: 24px; --r-btn: 999px;
}