/* ─────────────────────────────────────────────
   Crystal AI Club — Design tokens
   Liquid Glass. Orange accent. Dark default. Bilingual (EN/HE).
   ───────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Heebo:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ── Type ──────────────────────────────────
     Heebo is included in every stack so Hebrew always renders in a real face,
     never the system default. Geist wins for Latin glyphs because it's first.   */
  --font-sans:  "Geist", "Heebo", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:  "Geist Mono", "Heebo", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", "Times New Roman", serif;       /* Latin only — see below */

  /* fluid type scale */
  --t-display:  clamp(60px, 8vw, 120px);
  --t-h1:       clamp(40px, 5vw, 64px);
  --t-h2:       clamp(28px, 3.2vw, 40px);
  --t-h3:       20px;
  --t-body:     16px;
  --t-small:    14px;
  --t-micro:    12px;

  /* ── Spacing ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Radii ───────────────────────────────────
     Aligned with the redesign scale below so every component (old and new
     classes alike) shares the same rounder geometry. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── Redesign design tokens (rounded, consistent) ── */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --orange:       #F97316;
  --orange-dim:   rgba(249,115,22,0.15);
  --orange-glow:  rgba(249,115,22,0.25);
  --surface:        rgba(255,255,255,0.055);
  --surface-hover:  rgba(255,255,255,0.085);
  --border:         rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --text-muted2:    rgba(255,255,255,0.50);
  --text-dim:       rgba(255,255,255,0.30);

  /* Visible Liquid Glass card recipe */
  --card-glass-bg:    rgba(255,255,255,0.055);
  --card-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
                       0 0 0 1px rgba(0,0,0,0.3),
                       0 8px 32px rgba(0,0,0,0.4);
  --card-glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.08),
                             0 0 0 1px rgba(0,0,0,0.3),
                             0 8px 32px rgba(0,0,0,0.4),
                             0 0 40px rgba(249,115,22,0.08);

  /* ── Motion ──────────────────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* strong ease-out — punchy initial movement */
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);  /* gentle overshoot-free spring */
  --dur-fast: 160ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;

  /* ── Redesign v2 · gradients + elevation ──── */
  --grad-orange:      linear-gradient(135deg, #FDBA74 0%, #F97316 48%, #EA580C 100%);
  --grad-orange-text: linear-gradient(120deg, #FFE7D1 0%, #FDBA74 55%, #F97316 100%);
  --sheen:            linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  --elev-1: 0 1px 2px rgba(0,0,0,0.20);
  --elev-2: 0 12px 34px -14px rgba(0,0,0,0.55);
  --elev-3: 0 28px 70px -24px rgba(0,0,0,0.62);

  /* ── Orange accent (constant across themes) ─
     A true orange. Energetic, warm, used sparingly against the near-black canvas.
     Gold (#FFD700) is reserved for the Max tier badge only.                     */
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;   /* primary */
  --orange-600: #EA580C;   /* pressed / light-theme primary */
  --glow:       0 0 32px rgba(249, 115, 22, 0.28);
  --glow-soft:  0 0 64px rgba(249, 115, 22, 0.16);

  /* gold — reserved exclusively for the Max tier badge */
  --gold-500:   #FFD700;

  /* tweakable runtime knobs (overridden by Tweaks) */
  --glow-intensity: 1;
  --blur-intensity: 18px;
  --density: 1;
}

/* ── Dark (default) ────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           oklch(14% 0.012 250);
  --bg-elev:      oklch(17% 0.013 250);
  --bg-deep:      oklch(10% 0.012 250);
  --surface:      oklch(20% 0.014 250);
  --hairline:     oklch(28% 0.014 250 / 0.6);

  --ink:          oklch(96% 0.005 250);
  --ink-muted:    oklch(72% 0.012 250);
  --ink-faint:    oklch(54% 0.012 250);
  --ink-inverse:  oklch(14% 0.012 250);

  /* glass — translucent overlay over the canvas */
  --glass-bg:     color-mix(in oklab, var(--bg-elev) 60%, transparent);
  --glass-edge:   color-mix(in oklab, white 8%, transparent);
  --glass-shadow: 0 1px 0 0 color-mix(in oklab, white 6%, transparent) inset,
                  0 0 0 1px color-mix(in oklab, white 4%, transparent),
                  0 24px 60px -20px rgba(0,0,0,0.55);

  /* aurora — orange ambient lighting in the page background */
  --aurora-1: radial-gradient(72vw 62vw at 74% -14%, rgba(249,115,22,calc(0.17 * var(--glow-intensity))), transparent 60%);
  --aurora-2: radial-gradient(56vw 56vw at -12% 16%, rgba(186,118,66,calc(0.09 * var(--glow-intensity))), transparent 58%);
  --aurora-3: radial-gradient(48vw 48vw at 48% 118%, rgba(249,115,22,calc(0.11 * var(--glow-intensity))), transparent 60%);

  --orange-primary: var(--orange-500);

  /* Theme-aware roles for orange used as TEXT/icon/border (not on a solid
     orange fill). orange-300/400 were tuned to glow against near-black —
     on the light canvas they read washed-out and low-contrast. Light mode
     swaps both to the deeper 600 below. */
  --orange-text: var(--orange-300);   /* subtle accent text (active nav, tags) */
  --orange-icon: var(--orange-400);   /* icons, links, focus borders */
  /* Small/regular-weight orange text (prices, badges, checkmarks below ~18px
     bold) needs the full 4.5:1 AA ratio, not the 3:1 "large text" minimum
     --orange-text meets. orange-300 is fine here against near-black. */
  --orange-text-sm: var(--orange-300);
}

/* ── Light ─────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  /* Warmer, more visible cream — the near-white 98%/0.006 version read as flat,
     undesigned "default light mode" rather than a considered warm canvas. */
  --bg:           oklch(96% 0.014 75);
  --bg-elev:      oklch(94% 0.017 72);
  --bg-deep:      oklch(97% 0.010 78);
  --surface:      oklch(91% 0.018 70);
  --hairline:     oklch(74% 0.020 65 / 0.6);

  --ink:          oklch(20% 0.020 70);
  --ink-muted:    oklch(45% 0.018 70);
  /* was 60% — only 3.5:1 against --bg, failing WCAG AA (4.5:1) for normal
     text; found by the nightly accessibility audit (footer tagline, pack
     card captions, etc. across the light theme). 50% clears AA with margin
     (~5.3:1) while staying visibly lighter than --ink-muted. */
  --ink-faint:    oklch(50% 0.016 70);
  --ink-inverse:  oklch(98% 0.006 80);

  --glass-bg:     color-mix(in oklab, white 70%, transparent);
  --glass-edge:   color-mix(in oklab, var(--ink) 8%, transparent);
  --glass-shadow: 0 1px 0 0 color-mix(in oklab, white 80%, transparent) inset,
                  0 0 0 1px color-mix(in oklab, var(--ink) 6%, transparent),
                  0 24px 60px -20px rgba(50, 32, 0, 0.12);

  /* Card recipe in light mode — opaque white so glass stays visible on a light bg */
  --card-glass-bg:     color-mix(in oklab, white 78%, transparent);
  --border:            color-mix(in oklab, var(--ink) 10%, transparent);
  --border-strong:     color-mix(in oklab, var(--ink) 18%, transparent);
  --surface:           color-mix(in oklab, var(--ink) 5%, transparent);
  --surface-hover:     color-mix(in oklab, var(--ink) 8%, transparent);
  --card-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
                       0 0 0 1px rgba(0,0,0,0.09),
                       0 8px 32px rgba(50,32,0,0.14);
  --card-glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.6),
                             0 0 0 1px rgba(0,0,0,0.09),
                             0 10px 36px rgba(50,32,0,0.16),
                             0 0 40px rgba(249,115,22,0.14);

  /* Stronger than the dark aurora's alphas — the same values read as barely
     perceptible against a near-white base, so the canvas felt flat. */
  --aurora-1: radial-gradient(60vw 60vw at 70% -10%, rgba(249,115,22,calc(0.26 * var(--glow-intensity))), transparent 62%);
  --aurora-2: radial-gradient(50vw 50vw at -10% 20%, rgba(255,150,80,calc(0.30 * var(--glow-intensity))), transparent 60%);
  --aurora-3: radial-gradient(40vw 40vw at 50% 110%, rgba(255,190,130,calc(0.26 * var(--glow-intensity))), transparent 60%);

  /* In light mode, the deeper orange-600 holds better contrast on white. */
  --orange-primary: var(--orange-600);
  --orange-text: var(--orange-600);
  --orange-icon: var(--orange-600);
  /* orange-600 only clears 3.17:1 here — fine for large text (3:1) but not
     small/regular-weight text (needs 4.5:1). Verified against --bg and
     --bg-elev: #9A3412 clears both (6.1–6.5:1) while still reading orange. */
  --orange-text-sm: #9A3412;
}

/* The hidden attribute must always win, even over component display rules
   like `.upsell { display: flex }`. Without this, toggling el.hidden in JS
   silently does nothing on pages that don't load glass.css. */
[hidden] { display: none !important; }

/* Avoid a flash of English before i18n applies. The head boot snippet sets
   data-i18n-boot="he" for Hebrew visitors; we keep the body invisible until
   i18n.js applies translations and sets data-i18n-ready. A failsafe timeout
   in the snippet reveals the page even if the script never runs. */
html[data-i18n-boot="he"]:not([data-i18n-ready]) body { visibility: hidden; }

/* ── Density ───────────────────────────────── */
:root[data-density="compact"]     { --density: 0.75; }
:root[data-density="comfortable"] { --density: 1; }
:root[data-density="spacious"]    { --density: 1.35; }

/* ── Hebrew (RTL) typography overrides ──────
   Hebrew has no italic. Hebrew has no Latin serif. So in :root[lang="he"]:
   - .t-serif-italic falls back to Heebo 600 in orange — the contrast still
     reads as "voice" without trying to fake italic.
   - All elements explicitly set lang="en" still render Geist + Instrument Serif. */
:root[lang="he"] .t-serif-italic {
  font-family: "Heebo", var(--font-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
}
:root[lang="he"] .t-serif {
  font-family: "Heebo", var(--font-sans);
}