/* ============================================================
   MAYAV 2.0 — DESIGN TOKENS
   Dual-mode (Dark / Light), Typography System, Motion
   ============================================================ */

/* ── Google Fonts: loaded via <link> in HTML head for best performance ── */

/* ─────────────────────────────────────────────
   DARK MODE TOKENS (default)
───────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-void:       #04040a;
  --bg-deep:       #08080f;
  --bg-surface:    #0d0d1a;
  --bg-card:       #111120;
  --bg-card-hover: #161630;
  --bg-glass:      rgba(13,13,26,0.7);
  --bg-overlay:    rgba(4,4,10,0.92);

  /* Borders */
  --border-subtle:  rgba(201,162,39,0.08);
  --border-default: rgba(201,162,39,0.18);
  --border-strong:  rgba(201,162,39,0.38);
  --border-card:    rgba(255,255,255,0.06);

  /* Text */
  --text-primary:   #f0ead8;
  --text-secondary: #a89f8a;
  --text-muted:     #665e50;
  --text-inverse:   #04040a;

  /* Gold palette */
  --gold-100: #f8efc0;
  --gold-300: #e5c566;
  --gold-500: #c9a227;
  --gold-700: #8a6c10;
  --gold-900: #3d2f05;

  /* Crimson palette */
  --crimson-100: #f5c0c8;
  --crimson-300: #e0627a;
  --crimson-500: #9b1f35;
  --crimson-700: #5c0f1e;

  /* Indigo palette */
  --indigo-100: #c8c8f5;
  --indigo-300: #7878d0;
  --indigo-500: #2d2d70;
  --indigo-700: #141440;

  /* Semantic */
  --accent:       var(--gold-500);
  --accent-light: var(--gold-300);
  --accent-glow:  rgba(201,162,39,0.25);
  --danger:       var(--crimson-300);
  --link:         var(--gold-300);

  /* Shadows */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 60px rgba(201,162,39,0.12);
  --shadow-glow-strong: 0 0 100px rgba(201,162,39,0.22);
  --shadow-lift:  0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(201,162,39,0.08);

  /* Noise overlay */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-heading: 'Cormorant', 'Georgia', serif;
  --font-body:    'Outfit', sans-serif;
  --font-devanagari: 'Noto Serif Devanagari', serif;

  /* Motion */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   220ms;
  --dur-base:   380ms;
  --dur-slow:   600ms;
  --dur-xslow:  900ms;

  /* Layout */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;
  --nav-h: 72px;

  /* Mode flag */
  --mode: dark;
  color-scheme: dark;
}

/* ─────────────────────────────────────────────
   LIGHT MODE TOKENS
───────────────────────────────────────────── */
[data-theme="light"] {
  --bg-void:       #faf8f2;
  --bg-deep:       #f3efe4;
  --bg-surface:    #ede8da;
  --bg-card:       #ffffff;
  --bg-card-hover: #f9f6ee;
  --bg-glass:      rgba(250,248,242,0.85);
  --bg-overlay:    rgba(250,248,242,0.96);

  --border-subtle:  rgba(139,100,20,0.08);
  --border-default: rgba(139,100,20,0.18);
  --border-strong:  rgba(139,100,20,0.40);
  --border-card:    rgba(0,0,0,0.07);

  --text-primary:   #1a140a;
  --text-secondary: #5c4f38;
  --text-muted:     #9e8e72;
  --text-inverse:   #faf8f2;

  --gold-100: #5c3d00;
  --gold-300: #7a5010;
  --gold-500: #9a6b18;
  --gold-700: #c49535;
  --gold-900: #e8c870;

  --crimson-100: #5c0a18;
  --crimson-300: #8b1a2a;
  --crimson-500: #c0304a;

  --accent:       #8a6018;
  --accent-light: #c49535;
  --accent-glow:  rgba(138,96,24,0.15);
  --link:         #7a5010;

  --shadow-card:  0 2px 16px rgba(0,0,0,0.10);
  --shadow-glow:  0 0 40px rgba(138,96,24,0.08);
  --shadow-glow-strong: 0 0 80px rgba(138,96,24,0.14);
  --shadow-lift:  0 12px 40px rgba(0,0,0,0.12), 0 0 30px rgba(138,96,24,0.06);

  --mode: light;
  color-scheme: light;
}