/* ============================================================
   OpenBooth — Design tokens & themes
   Single source of truth for color / type / radius / spacing.
   Components must reference these variables, never hardcode hex.
   ============================================================ */

:root {
  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  /* display face for headings / prices / totals — themes may override */
  --font-display: var(--font-sans);

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* elevation */
  --shadow-sheet: 0 -4px 24px rgba(45, 42, 38, 0.12);
  --shadow-float: 0 8px 24px rgba(45, 42, 38, 0.25);
  --shadow-card: 0 1px 2px rgba(45, 42, 38, 0.04);

  /* safe-area (notch) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- Theme: warm-craft (default) ---------- */
:root,
[data-theme="warm"] {
  --bg: #faf6f0;
  --surface: #ffffff;
  --surface-2: #f4ede2;
  --border: #ece4d6;
  --border-strong: #d8cfbe;
  --text: #2d2a26;
  --text-secondary: #847b70;
  --text-muted: #b5ac9f;
  --accent: #c46b43;
  --accent-dark: #a8552f;
  --accent-light: #fbefe6;
  --on-accent: #ffffff;
  --success: #4a8b5c;
  --success-light: #e8f0e6;
  --combo: #6b5b95;
  --combo-light: #efebf5;
  --danger: #c44343;
  --warning: #c98a1e;
}

/* ---------- Theme: sakura ---------- */
[data-theme="sakura"] {
  --bg: #fdf3f5;
  --surface: #ffffff;
  --surface-2: #fbe8ee;
  --border: #f6dbe3;
  --border-strong: #eec3d1;
  --text: #3a2a30;
  --text-secondary: #8a6b75;
  --text-muted: #c2a3ac;
  --accent: #e0688a;
  --accent-dark: #c64d72;
  --accent-light: #fce4ec;
  --on-accent: #ffffff;
  --success: #5aa17a;
  --success-light: #e6f1ea;
  --combo: #8a6bc4;
  --combo-light: #efe8f8;
  --danger: #d65066;
  --warning: #cf942b;
}

/* ---------- Theme: ocean ---------- */
[data-theme="ocean"] {
  --bg: #eef8f8;
  --surface: #ffffff;
  --surface-2: #ddf0f2;
  --border: #cbe4e7;
  --border-strong: #9fcbd1;
  --text: #17323a;
  --text-secondary: #55717a;
  --text-muted: #8fa8ae;
  --accent: #087f8c;
  --accent-dark: #05616e;
  --accent-light: #dff4f5;
  --on-accent: #ffffff;
  --success: #2f8f67;
  --success-light: #e0f2e9;
  --combo: #356da8;
  --combo-light: #e1edf8;
  --danger: #c94848;
  --warning: #b88418;
}

/* ---------- Theme: mono (minimal) ---------- */
[data-theme="mono"] {
  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface-2: #ededec;
  --border: #e3e3e1;
  --border-strong: #cfcfcc;
  --text: #1c1c1a;
  --text-secondary: #6e6e69;
  --text-muted: #a3a39d;
  --accent: #1c1c1a;
  --accent-dark: #000000;
  --accent-light: #ececeb;
  --on-accent: #ffffff;
  --success: #2f7d4f;
  --success-light: #e7f1ea;
  --combo: #4a4a47;
  --combo-light: #ededec;
  --danger: #c0392b;
  --warning: #b5851f;
}

/* ---------- Theme: night (dark, battery-friendly) ---------- */
[data-theme="night"] {
  --bg: #1b1916;
  --surface: #26231f;
  --surface-2: #2f2b26;
  --border: #38332c;
  --border-strong: #4a443b;
  --text: #f2ece2;
  --text-secondary: #b3aa9c;
  --text-muted: #7e766a;
  --accent: #e08a5c;
  --accent-dark: #c4703f;
  --accent-light: #3a2c22;
  --on-accent: #1b1916;
  --success: #6fb585;
  --success-light: #28332a;
  --combo: #a48fd6;
  --combo-light: #2e2838;
  --danger: #e2675f;
  --warning: #d9a441;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #1b1916;
    --surface: #26231f;
    --surface-2: #2f2b26;
    --border: #38332c;
    --border-strong: #4a443b;
    --text: #f2ece2;
    --text-secondary: #b3aa9c;
    --text-muted: #7e766a;
    --accent: #e08a5c;
    --accent-dark: #c4703f;
    --accent-light: #3a2c22;
    --on-accent: #1b1916;
    --success: #6fb585;
    --success-light: #28332a;
    --combo: #a48fd6;
    --combo-light: #2e2838;
    --danger: #e2675f;
    --warning: #d9a441;
  }
}

/* ============================================================
   PROTOTYPE DESIGN THEMES (big visual overhauls)
   These override structural tokens too (font/radius/shadow),
   plus a scoped css/theme-*.css for signature treatments.
   The 5 themes above stay byte-identical.
   ============================================================ */

/* ---------- Theme: press — Thermal Press (mono receipt / ink on paper) ---------- */
[data-theme="press"] {
  --bg: #f1e7d4;
  --surface: #fbf6ea;
  --surface-2: #ebe0cc;
  --border: #d9cdb6;
  --border-strong: #2b241b; /* ink line — 13:1 on paper */
  --text: #211c16; /* 14.4:1 */
  --text-secondary: #5c5347; /* 6.4:1 */
  --text-muted: #8a8072; /* 3.3:1 — decoration/hints only */
  --accent: #d81b60; /* money + primary action only */
  --accent-dark: #b01050;
  --accent-light: #fce3ec;
  --on-accent: #fbf6ea;
  --success: #1f6b43;
  --success-light: #e2efe6;
  --combo: #234ba0;
  --combo-light: #e2e8f6;
  --danger: #c0392b;
  --warning: #8a5a0f;
  /* structural overrides — flat ink-line look, hard offset shadow */
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Space Grotesk", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  --r-xl: 7px;
  --shadow-card: none;
  --shadow-float: 3px 3px 0 rgba(43, 36, 27, 0.92);
  --shadow-sheet: 0 -6px 30px rgba(43, 36, 27, 0.18);
}

/* ---------- Theme: cotton — Letterpress Craft (serif, cream, debossed) ---------- */
[data-theme="cotton"] {
  --bg: #f3ecdf;
  --surface: #fbf7ee;
  --surface-2: #ede3d1;
  --border: #e0d5c0;
  --border-strong: #c9bca2;
  --text: #2a2018;
  --text-secondary: #6b5e4e;
  --text-muted: #a99c86;
  --accent: #9c3d2e; /* warm brick ink */
  --accent-dark: #7e2f22;
  --accent-light: #f3e0d8;
  --on-accent: #fbf7ee;
  --success: #4a7c59;
  --success-light: #e7efe6;
  --combo: #5b5191;
  --combo-light: #ece9f4;
  --danger: #b23a2e;
  --warning: #9a6b1e;
  --font-display: "Fraunces", Georgia, "Songti TC", "PingFang TC", serif;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --shadow-card: 0 1px 2px rgba(60, 45, 30, 0.07);
  --shadow-float: 0 8px 22px rgba(60, 45, 30, 0.16);
  --shadow-sheet: 0 -6px 30px rgba(60, 45, 30, 0.16);
}

/* ---------- Theme: market — Market Brutalist (bold grotesk, hard black shadows) ---------- */
[data-theme="market"] {
  --bg: #fdf3d9;
  --surface: #ffffff;
  --surface-2: #fbe9c0;
  --border: #1a1a18;
  --border-strong: #1a1a18; /* heavy black borders */
  --text: #161512;
  --text-secondary: #4a463e;
  --text-muted: #807a6e;
  --accent: #e03e2f; /* vermillion — money + action */
  --accent-dark: #b82a1e;
  --accent-light: #fbe0dc;
  --on-accent: #ffffff;
  --success: #1e7a3e;
  --success-light: #ddf0e1;
  --combo: #6b3fd4;
  --combo-light: #eae2fb;
  --danger: #c0271b;
  --warning: #b06f0c;
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Space Grotesk", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --shadow-card: 3px 3px 0 #1a1a18;
  --shadow-float: 5px 5px 0 #1a1a18;
  --shadow-sheet: 0 -6px 0 #1a1a18;
}

/* ---------- Theme: koishi (小石) — warm plaster / pebble clay, Japanese cozy-minimal ---------- */
[data-theme="koishi"] {
  --bg: #ece3d2; /* warm plaster wall */
  --surface: #f7f1e6; /* raised warm clay */
  --surface-2: #e3d8c4;
  --border: #e0d5c0; /* soft — shape comes from shadow, not edges */
  --border-strong: #c7b89c;
  --text: #423b33; /* warm cocoa, not black — deeper for hierarchy */
  --text-secondary: #8a7f6d;
  --text-muted: #a99d87;
  --accent: #b3704c; /* warm terracotta clay, gently desaturated */
  --accent-dark: #975a30;
  --accent-light: #f2e4d6;
  --on-accent: #fff7ef;
  --success: #4e7e5a; /* soft sage */
  --success-light: #e4eedd;
  --combo: #6e6196; /* dusty lavender */
  --combo-light: #ece7f2;
  --danger: #bd5b47;
  --warning: #a9762c;
  /* rounded, soft, tactile */
  --font-sans: "Quicksand", "Hiragino Maru Gothic ProN", "Zen Maru Gothic",
    -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
    "Noto Sans JP", sans-serif;
  --font-display: "Quicksand", "Hiragino Maru Gothic ProN", "Zen Maru Gothic",
    "PingFang TC", "Noto Sans TC", sans-serif;
  /* pebble radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  /* claymorphic dual-soft shadows: warm cast below-right + light lift above-left
     (refined — softer cast, cleaner lift, tinted to the plaster) */
  --shadow-card: 5px 6px 15px rgba(150, 120, 84, 0.28), -4px -4px 11px rgba(255, 252, 246, 0.8);
  --shadow-float: 8px 11px 26px rgba(150, 120, 84, 0.32), -5px -6px 15px rgba(255, 252, 246, 0.85);
  --shadow-sheet: 0 -10px 38px rgba(120, 96, 64, 0.18);
}

/* ---------- Theme: titanium — Brushed Titanium (light machined silver) ---------- */
[data-theme="titanium"] {
  --bg: #d6dadf;
  --surface: #e7eaee;
  --surface-2: #cdd2d8;
  --border: #b3bac2;
  --border-strong: #8a929c;
  --text: #1a1e24;
  --text-secondary: #4c545d;
  --text-muted: #737b85; /* AA-large hints only */
  --accent: #205aa6; /* cobalt-steel — money + primary only */
  --accent-dark: #1a4885;
  --accent-light: #dde7f3;
  --on-accent: #f4f8fd;
  --success: #2c734c;
  --success-light: #dcecdf;
  --combo: #5a4fa3;
  --combo-light: #e6e2f3;
  --danger: #b5362c;
  --warning: #8d5c0e;
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Space Grotesk", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(20, 26, 34, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 3px 10px rgba(20, 26, 34, 0.16);
  --shadow-float: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(20, 26, 34, 0.26),
    0 2px 4px rgba(20, 26, 34, 0.18);
  --shadow-sheet: inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 -8px 30px rgba(20, 26, 34, 0.22);
}

/* ---------- Theme: gunmetal — Dark Tech (graphite + glass + cyan HUD) ---------- */
[data-theme="gunmetal"] {
  --bg: #14181f;
  --surface: #1d232c;
  --surface-2: #262d38;
  --border: #2f3744;
  --border-strong: #46505e;
  --text: #e8edf4;
  --text-secondary: #9aa6b5;
  --text-muted: #6e7a8a; /* AA-large hints only */
  --accent: #3ad1ff; /* rationed electric cyan */
  --accent-dark: #16a8d8;
  --accent-light: #0e2730;
  --on-accent: #04222a; /* dark ink on cyan — never white */
  --success: #4fd6a0;
  --success-light: #10231d;
  --combo: #9d8cff;
  --combo-light: #1b1830;
  --danger: #ff6b6b;
  --warning: #f5b13a;
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Space Grotesk", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --shadow-card: 0 1px 2px rgba(8, 11, 16, 0.5), 0 6px 16px rgba(8, 11, 16, 0.45),
    inset 0 1px 0 rgba(234, 242, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  --shadow-float: 0 10px 30px rgba(8, 11, 16, 0.6), inset 0 1px 0 rgba(234, 242, 255, 0.14);
  --shadow-sheet: 0 -10px 36px rgba(8, 11, 16, 0.55);
}

/* ---------- Theme: chrome — Liquid Chrome / Mercury (dark mirror + shimmer) ---------- */
[data-theme="chrome"] {
  --bg: #161a20;
  --surface: #20262e;
  --surface-2: #272e38;
  --border: #333c48;
  --border-strong: #4a5564;
  --text: #eef2f8;
  --text-secondary: #aab4c2;
  --text-muted: #7c8696; /* hints/decoration only */
  --accent: #3ad9f0; /* ice-cyan */
  --accent-dark: #1f9fb8;
  --accent-light: #0f2a30;
  --on-accent: #04222a;
  --success: #3bb083;
  --success-light: #13291f;
  --combo: #9183e2;
  --combo-light: #221d33;
  --danger: #ef6863;
  --warning: #dd9e2e;
  /* body keeps system --font-sans for CJK legibility; only display gets grotesk */
  --font-display: "Space Grotesk", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(234, 242, 255, 0.06);
  --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -10px 36px rgba(0, 0, 0, 0.5);
}

/* ---------- Theme: sabi (錆) — wabi-sabi aged metal / stone, restrained & calm ---------- */
[data-theme="sabi"] {
  --bg: #d9d6cc; /* warm ash-stone */
  --surface: #e6e3d9; /* raised stone */
  --surface-2: #cdc9bd; /* recess */
  --border: #c6c1b4; /* hairline */
  --border-strong: #a39d8f;
  --text: #34322c; /* sumi ink — 9.8:1 on surface */
  --text-secondary: #6c685d; /* 4.9:1 */
  --text-muted: #9c9789; /* AA-large hints only */
  --accent: #4e635c; /* muted 錆 patina — calm, reserved for money/action */
  --accent-dark: #3a4b45;
  --accent-light: #dde2dd;
  --on-accent: #f0efe9;
  --success: #5a6e4f;
  --success-light: #e1e6da;
  --combo: #6a6477;
  --combo-light: #e6e3ea;
  --danger: #97564a;
  --warning: #8f7539;
  /* keep the calm system stack (no loud display face) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-card: 0 1px 2px rgba(60, 56, 48, 0.06);
  --shadow-float: 0 6px 20px rgba(60, 56, 48, 0.12);
  --shadow-sheet: 0 -8px 28px rgba(60, 56, 48, 0.12);
}

/* ---------- Theme: linen — warm editorial minimal (Fraunces serif) ---------- */
[data-theme="linen"] {
  --bg: #f0ece2;
  --surface: #faf7f0;
  --surface-2: #e7e1d3;
  --border: #e3ddce;
  --border-strong: #cfc7b5;
  --text: #2b2824; /* off-black charcoal */
  --text-secondary: #6e675b;
  --text-muted: #a59d8d;
  --accent: #a3564e; /* muted terracotta-rose — one desaturated accent */
  --accent-dark: #874740;
  --accent-light: #f0e2dd;
  --on-accent: #faf7f0;
  --success: #4f7a55;
  --success-light: #e3ecdf;
  --combo: #6d6385;
  --combo-light: #ebe7f1;
  --danger: #b1493e;
  --warning: #9a7733;
  --font-display: "Fraunces", Georgia, "Songti TC", "PingFang TC", serif;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-card: 0 1px 2px rgba(60, 52, 40, 0.05), 0 6px 18px rgba(60, 52, 40, 0.07);
  --shadow-float: 0 12px 30px rgba(60, 52, 40, 0.13);
  --shadow-sheet: 0 -8px 28px rgba(60, 52, 40, 0.12);
}

/* ---------- Theme: graphite — premium dark (zinc + muted emerald) ---------- */
[data-theme="graphite"] {
  --bg: #17171a; /* off-black, not pure black */
  --surface: #202024;
  --surface-2: #2a2a30;
  --border: #313138;
  --border-strong: #45454d;
  --text: #ededf0;
  --text-secondary: #a2a2ab;
  --text-muted: #71717a;
  --accent: #4f9d80; /* desaturated emerald — calm, not neon */
  --accent-dark: #3d7d66;
  --accent-light: #16302a;
  --on-accent: #0e1f1a;
  --success: #5aa98a;
  --success-light: #16302a;
  --combo: #7e8aa0; /* muted slate (avoids the AI-purple cliché) */
  --combo-light: #232830;
  --danger: #d6695f;
  --warning: #c9a04f;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Outfit", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -10px 34px rgba(0, 0, 0, 0.45);
}

/* ---------- Theme: sage — calm natural premium (warm stone + muted sage) ---------- */
[data-theme="sage"] {
  --bg: #e6e8df;
  --surface: #f2f3ec;
  --surface-2: #dadecf;
  --border: #d6dac9;
  --border-strong: #b6bca6;
  --text: #33372f; /* olive-charcoal */
  --text-secondary: #686d5e;
  --text-muted: #9aa08c;
  --accent: #5f7d68; /* desaturated sage/forest */
  --accent-dark: #496150;
  --accent-light: #e2ebe1;
  --on-accent: #f4f7f1;
  --success: #5a7d54;
  --success-light: #e1ecdd;
  --combo: #6a7088;
  --combo-light: #e6e8f0;
  --danger: #a85a4c;
  --warning: #91793a;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Outfit", -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-card: 0 2px 5px rgba(70, 80, 60, 0.07), 0 8px 22px rgba(70, 80, 60, 0.09);
  --shadow-float: 0 12px 30px rgba(70, 80, 60, 0.14);
  --shadow-sheet: 0 -8px 28px rgba(70, 80, 60, 0.12);
}