/* ==========================================================================
   NIRVANA SOFT — DESIGN TOKENS
   Light theme = default (:root). Dark theme = [data-theme="dark"].
   Brand colors are constant across themes; surfaces/text are semantic.
   ========================================================================== */

:root {
  /* ----- Brand (orange — matches logo, constant in both themes) ----- */
  --brand-50:  #fff7ed;
  --brand-100: #ffedd5;
  --brand-300: #fdba74;
  --brand-400: #fb923c;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;

  /* warm secondary accents (harmonize with orange) */
  --gold-500:   #d97706;
  --amber-500:  #f59e0b;
  --rose-500:   #e11d48;
  --green-500:  #16a34a; /* success/tick only */

  /* ----- Gradients (constant) ----- */
  --grad-brand:  linear-gradient(135deg, #c2410c 0%, #f97316 100%);
  --grad-cta:    linear-gradient(120deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
  --grad-accent: linear-gradient(90deg, #fdba74 0%, #f97316 50%, #c2410c 100%);
  --grad-text:   linear-gradient(120deg, #c2410c 0%, #f97316 55%, #fb923c 100%);

  /* ===================== LIGHT THEME (default) ===================== */
  --bg:          #eceefb; /* page background (soft lavender-gray) */
  --bg-soft:     #f5f6fd;
  --surface:     #ffffff;
  --surface-2:   #f4f5fb;
  --surface-3:   #eef0f8;
  --glass:       rgba(255, 255, 255, 0.72);
  --glass-strong:rgba(255, 255, 255, 0.9);

  --border:        rgba(40, 22, 8, 0.09);
  --border-strong: rgba(40, 22, 8, 0.16);
  --border-glow:   rgba(249, 115, 22, 0.4);

  --text:        #15172b;
  --text-muted:  #565c75;
  --text-faint:  #8a8fa6;
  --text-invert: #ffffff;

  --shadow-xs: 0 1px 2px rgba(40,22,8,.06);
  --shadow-sm: 0 4px 14px rgba(40,22,8,.08);
  --shadow-md: 0 14px 34px -12px rgba(40,22,8,.16);
  --shadow-lg: 0 30px 60px -22px rgba(40,22,8,.24);
  --shadow-brand: 0 16px 40px -14px rgba(234,88,12,.5);

  /* Surfaces that stay dark in BOTH themes (intentional design blocks) */
  --ink:        #11142a;
  --ink-2:      #161a36;
  --ink-soft:   #1d2244;
  --ink-border: rgba(255,255,255,.09);
  --ink-text:   #eef0fb;
  --ink-muted:  #a6abca;

  /* ----- Typography ----- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.6rem;
  --fs-2xl:  2.1rem;
  --fs-3xl:  clamp(2.1rem, 3.6vw, 3rem);
  --fs-hero: clamp(2.3rem, 4.4vw, 3.6rem);

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-base:  1.65;

  /* ----- Spacing (8px base) ----- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 7.5rem;

  /* ----- Layout ----- */
  --container: 1200px;
  --container-wide: 1280px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.32s;
  --dur-slow: 0.55s;

  /* ----- Z-index ----- */
  --z-base: 1;
  --z-float: 10;
  --z-header: 100;
  --z-overlay: 200;

  color-scheme: light;
}

/* ===================== DARK THEME ===================== */
[data-theme="dark"] {
  --bg:          #07080f;
  --bg-soft:     #0b1020;
  --surface:     #0f1120;
  --surface-2:   #14172a;
  --surface-3:   #1a1e36;
  --glass:       rgba(20, 22, 40, 0.55);
  --glass-strong:rgba(16, 18, 34, 0.82);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-glow:   rgba(251, 146, 60, 0.45);

  --text:        #f4f6ff;
  --text-muted:  #aab0c6;
  --text-faint:  #6f748c;
  --text-invert: #0c0e1a;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.45);
  --shadow-md: 0 16px 38px -14px rgba(0,0,0,.65);
  --shadow-lg: 0 34px 64px -22px rgba(0,0,0,.8);
  --shadow-brand: 0 18px 46px -14px rgba(234,88,12,.7);

  /* In dark mode the "ink" blocks blend with the page but stay distinct */
  --ink:        #0c0f1f;
  --ink-2:      #11152b;
  --ink-soft:   #161b36;
  --ink-border: rgba(255,255,255,.08);
  --ink-text:   #f4f6ff;
  --ink-muted:  #a6abca;

  color-scheme: dark;
}