/* Five site themes, switched with <html data-theme="...">. Fonts are self-hosted (no third-party requests)
   and only downloaded by the theme that uses them. */
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin-800-normal.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url(/fonts/orbitron-latin-500-normal.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url(/fonts/orbitron-latin-800-normal.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(/fonts/rajdhani-latin-500-normal.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(/fonts/rajdhani-latin-700-normal.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(/fonts/playfair-display-latin-600-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url(/fonts/m-plus-rounded-1c-latin-500-normal.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url(/fonts/m-plus-rounded-1c-latin-800-normal.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --hue { syntax: "<number>"; initial-value: 0; inherits: true; }

@layer theme {
  :root { --zh: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

  /* 1. PROFESSIONAL — clean, trustworthy, light. */
  [data-theme="professional"] {
    --bg: #f4f6fb; --bg-2: #e9eefb; --surface: #fff; --surface-2: #f3f5fa; --border: #e1e6f0; --text: #0f172a; --muted: #64748b;
    --accent: #1d4ed8; --accent-2: #4338ca; --on-accent: #fff; --radius: 18px; --radius-sm: 14px;
    --shadow: 0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -16px rgb(15 23 42 / .22);
    --font-body: "Inter", var(--zh); --font-head: "Inter", var(--zh); --head-spacing: -0.025em;
  }
  [data-theme="professional"] .fx-bg { background: radial-gradient(60rem 30rem at 110% -10%, #dbe6ff 0, transparent 60%), radial-gradient(40rem 26rem at -20% 10%, #e8e3ff 0, transparent 60%), var(--bg); }

  /* 2. FUTURISTIC — dark glass, moving aurora, neon edges. */
  [data-theme="futuristic"] {
    color-scheme: dark;
    --bg: #04050d; --surface: rgb(255 255 255 / .06); --surface-2: rgb(255 255 255 / .07); --border: rgb(148 197 255 / .18);
    --text: #e8f1ff; --muted: #93a4c3; --accent: #22d3ee; --accent-2: #a855f7; --on-accent: #04050d;
    --ok: #34d399; --warn: #fbbf24; --bad: #fb7185; --card-bg: rgb(13 18 38 / .55); --blur: 18px;
    --shadow: 0 20px 60px -25px rgb(0 0 0 / .8); --glow: 0 0 22px -4px rgb(34 211 238 / .55);
    --font-body: "Inter", var(--zh); --font-head: "Orbitron", var(--zh); --head-spacing: .02em; --radius: 20px;
  }
  [data-theme="futuristic"] .fx-bg { background: #04050d; }
  /* Aurora: soft gradient blobs (no blur filter) on their own GPU layer, moved only with transform,
     so the phone never repaints or re-blurs the page while it drifts. */
  [data-theme="futuristic"] .fx-bg::before {
    inset: -40vmax; opacity: .75; will-change: transform; contain: strict;
    background:
      radial-gradient(32vmax 32vmax at 38% 40%, rgb(14 165 233 / .55), transparent 70%),
      radial-gradient(30vmax 30vmax at 62% 44%, rgb(124 58 237 / .5), transparent 70%),
      radial-gradient(26vmax 26vmax at 50% 62%, rgb(219 39 119 / .32), transparent 70%);
    animation: drift 48s linear infinite;
  }
  @keyframes drift { to { transform: rotate(360deg); } }
  [data-theme="futuristic"] .fx-bg::after {
    background-image: linear-gradient(rgb(148 197 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(148 197 255 / .07) 1px, transparent 1px);
    background-size: 44px 44px; mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  }
  @keyframes aurora { to { --angle: 360deg; } }
  [data-theme="futuristic"] .product { background: #0a0f22; }
  [data-theme="futuristic"] .product.in-cart, [data-theme="futuristic"] .btn:not(.ghost):not([disabled]) {
    border: 1.5px solid transparent;
    background: linear-gradient(#0a0f22, #0a0f22) padding-box, conic-gradient(from var(--angle), #22d3ee, #a855f7, #ec4899, #22d3ee) border-box;
    animation: aurora 4s linear infinite;
  }
  [data-theme="futuristic"] .btn:not(.ghost):not([disabled]) { background: linear-gradient(135deg, #22d3ee, #a855f7) padding-box, conic-gradient(from var(--angle), #fff, #22d3ee, #a855f7, #fff) border-box; }
  [data-theme="futuristic"] .hero h1 { text-shadow: 0 0 30px rgb(34 211 238 / .35); }
  [data-theme="futuristic"] .qr-wrap { box-shadow: 0 0 0 1px rgb(34 211 238 / .5), 0 0 40px -6px rgb(34 211 238 / .6); }

  /* Phones & tablets: same look, far less GPU work. Glass blur is swapped for near-opaque panels, and the
     spinning neon borders stand still (each one repaints every frame). */
  @media (hover: none), (max-width: 760px) {
    [data-theme="futuristic"] { --blur: 0px; --card-bg: rgb(10 15 34 / .9); }
    [data-theme="futuristic"] .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
    [data-theme="futuristic"] .topbar, [data-theme="futuristic"] .cartbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(8 12 28 / .94); }
    [data-theme="futuristic"] .product.in-cart, [data-theme="futuristic"] .btn:not(.ghost):not([disabled]),
    [data-theme="gamer"] .product.in-cart { animation: none; --angle: 200deg; }
    [data-theme="futuristic"] .hero h1 .grad { animation-duration: 10s; }
  }

  /* 3. GAMER — RGB edges, angled cuts, scanlines. */
  [data-theme="gamer"] {
    color-scheme: dark;
    --bg: #07070c; --surface: #11111b; --surface-2: #181826; --border: #2a2a40; --text: #f4f4ff; --muted: #9a9ab8;
    --accent: #ff2e63; --accent-2: #08d9d6; --on-accent: #fff; --ok: #39ff88; --warn: #ffd23f; --bad: #ff4d6d;
    --radius: 6px; --radius-sm: 4px; --shadow: 0 12px 40px -18px #000; --glow: 0 0 18px -2px rgb(255 46 99 / .6);
    --font-body: "Rajdhani", var(--zh); --font-head: "Rajdhani", var(--zh); --head-transform: uppercase; --head-spacing: .06em;
  }
  [data-theme="gamer"] body { font-size: 16.5px; font-weight: 500; }
  [data-theme="gamer"] .fx-bg { background: radial-gradient(50rem 30rem at 100% 0, rgb(255 46 99 / .18), transparent 60%), radial-gradient(50rem 30rem at 0 100%, rgb(8 217 214 / .14), transparent 60%), #07070c; }
  [data-theme="gamer"] .fx-bg::after { background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px); }
  [data-theme="gamer"] .card, [data-theme="gamer"] .product, [data-theme="gamer"] .btn, [data-theme="gamer"] .cartbar {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  }
  [data-theme="gamer"] .product.in-cart {
    border-color: transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--angle), #ff2e63, #ffd23f, #39ff88, #08d9d6, #7b5cff, #ff2e63) border-box;
    border: 2px solid transparent; animation: aurora 2.5s linear infinite;
  }
  [data-theme="gamer"] .hero h1 { position: relative; }
  [data-theme="gamer"] .hero h1 .grad { background-image: linear-gradient(90deg, #ff2e63, #ffd23f, #39ff88, #08d9d6, #7b5cff, #ff2e63); animation-duration: 3s; }
  [data-theme="gamer"] .step-num { border-radius: 3px; }
  [data-theme="gamer"] .btn { letter-spacing: .08em; text-transform: uppercase; }

  /* 4. LUXE — black & gold, editorial serif. */
  [data-theme="luxe"] {
    color-scheme: dark;
    --bg: #0b0907; --surface: #15120e; --surface-2: #1c1813; --border: #3a3022; --text: #f5ecd9; --muted: #b4a68a;
    --accent: #d4af37; --accent-2: #f3d27a; --on-accent: #1a1408; --ok: #8fd18b; --warn: #e8b04a; --bad: #e57373;
    --radius: 14px; --radius-sm: 10px; --shadow: 0 24px 60px -30px #000; --glow: 0 0 0 1px rgb(212 175 55 / .35);
    --font-body: "Inter", var(--zh); --font-head: "Playfair Display", "Songti SC", "SimSun", serif; --head-spacing: 0;
  }
  [data-theme="luxe"] .fx-bg { background: radial-gradient(45rem 25rem at 50% -10%, rgb(212 175 55 / .16), transparent 70%), #0b0907; }
  [data-theme="luxe"] .price, [data-theme="luxe"] .amount, [data-theme="luxe"] .hero h1 .grad {
    background: linear-gradient(100deg, #b8860b 20%, #fff3c4 40%, #d4af37 60%, #b8860b 80%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite;
  }
  [data-theme="luxe"] .card { border-image: linear-gradient(135deg, rgb(212 175 55 / .6), rgb(212 175 55 / .1), rgb(212 175 55 / .5)) 1; border-radius: 0; }

  /* 5. SAKURA — soft pastel, rounded, drifting petals. */
  [data-theme="sakura"] {
    --bg: #fff6f9; --surface: #ffffff; --surface-2: #fff0f5; --border: #f6d6e2; --text: #4a2638; --muted: #9b6b80;
    --accent: #ec4899; --accent-2: #a78bfa; --on-accent: #fff; --radius: 26px; --radius-sm: 20px;
    --shadow: 0 16px 40px -22px rgb(236 72 153 / .45); --glow: 0 8px 22px -8px rgb(236 72 153 / .55);
    --font-body: "M PLUS Rounded 1c", var(--zh); --font-head: "M PLUS Rounded 1c", var(--zh);
  }
  [data-theme="sakura"] .fx-bg { background: radial-gradient(30rem 22rem at 90% 0, #ffd6e7, transparent 65%), radial-gradient(30rem 22rem at 0 80%, #e9ddff, transparent 65%), var(--bg); }
  [data-theme="sakura"] .fx-bg::before, [data-theme="sakura"] .fx-bg::after {
    inset: -10% 0 auto 0; height: 120%;
    background-image: radial-gradient(6px 4px at 10% 10%, #f9a8d4 60%, transparent 62%), radial-gradient(5px 4px at 30% 40%, #fbcfe8 60%, transparent 62%),
      radial-gradient(6px 5px at 55% 20%, #f9a8d4 60%, transparent 62%), radial-gradient(4px 3px at 75% 60%, #fbcfe8 60%, transparent 62%), radial-gradient(6px 4px at 90% 30%, #f472b6 55%, transparent 60%);
    background-size: 100% 50%; animation: petals 18s linear infinite; opacity: .8;
  }
  [data-theme="sakura"] .fx-bg::after { animation-duration: 27s; animation-delay: -9s; opacity: .5; transform: scaleX(-1); }
  @keyframes petals { from { translate: 0 -50%; rotate: 0deg; } to { translate: 40px 0%; rotate: 8deg; } }

  /* Theme-aware view transitions (cart & step changes). */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}