/* ============================================================
   JEWEL TONES — Design Tokens v3 (Jewel Tones rebuild)
   דפוס קשת — Premium dark with logo colors as gemstones
   (Light theme below is unchanged — Royal warm cream + gold)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&display=swap');

:root {
  /* === Gold accent (metallic frame for jewels) === */
  --gold:           #C9A961;
  --gold-bright:    #E0C277;
  --gold-deep:      #A88A45;
  --copper:         #B8703F;
  --copper-deep:    #8A4F26;
  --amber-glow:     #E8C171;

  /* === Jewel tones — logo colors as deep gemstones === */
  --jewel-ruby:           #C7264A;
  --jewel-ruby-deep:      #8B1538;
  --jewel-amethyst:       #7B3FAB;
  --jewel-amethyst-deep:  #5B2A86;
  --jewel-emerald:        #1A8B8B;
  --jewel-emerald-deep:   #0F5B5B;
  --jewel-topaz:          #D88A2B;
  --jewel-topaz-deep:     #A86620;

  /* === Surfaces — navy-black === */
  --bg-base:        #0A0E1A;
  --bg-elevated:    #0F1424;
  --bg-card:        #14182C;
  --bg-overlay:     rgba(15, 20, 36, 0.85);
  --bg-glass:       rgba(201, 169, 97, 0.04);

  /* === Borders (gold metallic) === */
  --border-faint:   rgba(201, 169, 97, 0.10);
  --border-soft:    rgba(201, 169, 97, 0.22);
  --border-bold:    rgba(201, 169, 97, 0.45);
  --border-glow:    rgba(201, 169, 97, 0.70);

  /* === Text === */
  --text-primary:   #F7EFDF;
  --text-secondary: #C9BCA0;
  --text-tertiary:  #A2916F;
  --text-muted:     #786A50;

  /* === Gradients === */
  --gradient-gold:    linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, var(--jewel-ruby) 100%);
  --gradient-jewels:  linear-gradient(135deg, var(--jewel-ruby) 0%, var(--jewel-amethyst) 50%, var(--jewel-emerald) 100%);
  --gradient-radial:  radial-gradient(circle at 50% 50%, var(--gold) 0%, var(--jewel-amethyst-deep) 100%);
  --gradient-text:    linear-gradient(135deg, #fff 0%, var(--gold) 50%, #fff 100%);
  --gradient-card:    linear-gradient(180deg, rgba(201,169,97,0.06) 0%, rgba(0,0,0,0.10) 100%);
  --gradient-hover:   linear-gradient(180deg, rgba(201,169,97,0.16) 0%, rgba(123,63,171,0.08) 100%);

  /* === Shadows & glows === */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.45);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:      0 24px 60px rgba(0,0,0,0.65);
  --shadow-glow:    0 0 40px rgba(201,169,97,0.30);
  --shadow-glow-lg: 0 0 80px rgba(201,169,97,0.45);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.10);

  /* === Spacing scale === */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 72px;

  /* === Radii === */
  --r-sm: 8px;   --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;

  /* === Typography === */
  --font-display: 'Heebo', sans-serif;
  --font-sans:    'Heebo', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-numeric: 'Heebo', sans-serif;

  /* === Motion === */
  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast:         180ms;
  --t-base:         320ms;
  --t-slow:         600ms;

  /* ========================================================
     Compatibility aliases for legacy kiosk-styles.css
     Old pages use --accent / --surface-page etc — alias them.
     ======================================================== */
  --surface-page:    var(--bg-base);
  --surface-1:       var(--bg-elevated);
  --surface-2:       var(--bg-card);
  --surface-3:       var(--bg-card);
  --surface-glass:   var(--bg-glass);

  --border-subtle:   var(--border-faint);
  --border-default:  var(--border-soft);
  --border-strong:   var(--border-bold);
  --border-accent:   var(--border-bold);

  --text-disabled:   var(--text-muted);

  --neon-purple:      var(--jewel-amethyst);
  --neon-purple-deep: var(--jewel-amethyst-deep);
  --neon-pink:        var(--jewel-ruby);
  --neon-cyan:        var(--jewel-emerald);
  --neon-green:       #4dff9e;

  --accent:           var(--gold);
  --accent-strong:    var(--gold-deep);
  --accent-soft:      rgba(201, 169, 97, 0.12);
  --accent-glow:      rgba(201, 169, 97, 0.35);

  --gradient:         var(--gradient-gold);
  --gradient-soft:    var(--gradient-card);

  --success:          #4dff9e;
  --warning:          #fbbf24;
  --danger:           #f87171;

  --bg-grid-line:     rgba(201, 169, 97, 0.05);
  --bg-blob-1:        var(--jewel-ruby-deep);
  --bg-blob-2:        var(--jewel-amethyst-deep);
  --bg-blob-opacity:  0.26;
  --topbar-bg:        rgba(10, 14, 26, 0.85);
  --color-scheme:     dark;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px;

  --shadow-focus:    0 0 0 3px var(--accent-soft);

  --motion-fast:     180ms;
  --motion-base:     280ms;
  --motion-slow:     600ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

  --topbar-height:   72px;
}

/* ============================================================
   Light theme — Warm cream & deep gold (+ legacy aliases)
   ============================================================ */
[data-theme="light"] {
  --accent-soft:     rgba(184, 136, 46, 0.12);
  --accent-glow:     rgba(184, 136, 46, 0.28);
  --bg-blob-opacity: 0.12;
  --topbar-bg:       rgba(246, 240, 228, 0.88);
  --bg-base:        #F6F0E4;
  --bg-elevated:    #FFFFFF;
  --bg-card:        #FAF3E2;
  --bg-overlay:     rgba(246, 240, 228, 0.92);
  --bg-glass:       rgba(184, 136, 46, 0.06);

  --border-faint:   rgba(30, 20, 5, 0.08);
  --border-soft:    rgba(184, 136, 46, 0.28);
  --border-bold:    rgba(184, 136, 46, 0.55);
  --border-glow:    rgba(184, 136, 46, 0.75);

  --text-primary:   #1C1408;
  --text-secondary: #6B5530;
  --text-tertiary:  #9A7E48;
  --text-muted:     #C0A472;

  --gradient-card:    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(250,243,226,0.65) 100%);
  --gradient-hover:   linear-gradient(180deg, rgba(212,168,83,0.16) 0%, rgba(200,112,64,0.06) 100%);
  --gradient-text:    linear-gradient(135deg, #1C1408 0%, var(--copper-deep) 50%, #1C1408 100%);

  --shadow-sm:      0 1px 3px rgba(30, 20, 5, 0.07);
  --shadow-md:      0 4px 16px rgba(30, 20, 5, 0.11);
  --shadow-lg:      0 16px 42px rgba(30, 20, 5, 0.15);
  --shadow-glow:    0 8px 24px rgba(184, 136, 46, 0.28);
  --shadow-glow-lg: 0 16px 50px rgba(184, 136, 46, 0.45);

  color-scheme: light;
}

/* ============================================================
   Base & reset
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: dark;
  background: var(--bg-base);
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Homepage-only: lock to single screen (no scroll) */
body.home, html:has(body.home) { height: 100dvh; overflow: hidden; }

/* ============================================================
   Background is now handled by <div class="stars"> in HTML
   (body::before/::after removed — they were drawing orbs)
   ============================================================ */

/* Subtle film grain overlay */
body > .grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Typography helpers
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.t-gold {
  
  
  
  color: #F2D79A;
}
.t-shimmer {
  
  background-size: 200% 100%;
  
  
  color: #F2D79A;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-6);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--gradient-gold);
  color: #1a1208;
  box-shadow: var(--shadow-md), var(--shadow-glow), var(--shadow-inset);
  letter-spacing: 0.02em;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-glow-lg), var(--shadow-inset); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: var(--bg-glass);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.btn-ghost:hover { border-color: var(--border-bold); background: var(--bg-card); transform: translateY(-1px); }

/* ============================================================
   NUMERIC FONT OVERRIDE — Orbitron everywhere numbers appear
   Applies last with !important so it beats hardcoded
   `font-family: var(--font-display)` on price/qty/total classes.
   ============================================================ */
.price, .qty, .total, .amount, .sum, .val, .value, .savings, .num,
.item-price, .price-muted,
.arch-file-price, .arch-total-value, .arch-pricing-card .price,
.qt-stat-n,
.ad-stat .val, .ad-coupon-disc,
.orders-stat .v, .orders-list-total,
.cart-bar-total .v,
.coupon-applied .savings,
.pending-item .total,
.pp-table .qty, .pp-table .price, .pp-table .price-muted,
.bk-price-big, .bk-price-sub, .bk-price-badge, .bk-brow b, .bk-unit-row b,
[class$="-price"], [class$="-total"], [class$="-amount"], [class$="-sum"], [class$="-qty"],
[class*="-price "], [class*="-total "], [class*="-amount "], [class*="-qty "] {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums;
}

/* PWA Window Controls Overlay — מסתיר את שורת ה-URL/title של Edge/Chrome ב-PWA.
   ב-RTL על Windows: כפתורי X/מזער יושבים בפינה הימנית-עליונה של החלון, אז מרפדים את צד ימין של הסרגלים הדביקים. */
@media (display-mode: window-controls-overlay) {
  .topbar, .wk-topbar, .mn-topbar, .app-topbar {
    padding-inline-start: max(16px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)));
  }
}