/* ===========================
   My Inner Window - Design Tokens
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Colors ---- */
  --bg-primary:     #0f0e17;
  --bg-secondary:   #1a1a2e;
  --bg-card:        #16213e;
  --bg-card-hover:  #1c2a4a;

  --text-primary:   #e8e6f0;
  --text-secondary: #a7a3b5;
  --text-muted:     #6b6880;

  --accent-purple:  #a855f7;
  --accent-teal:    #2dd4bf;
  --accent-pink:    #ec4899;
  --accent-gold:    #f59e0b;

  --purple-light:   #c084fc;
  --purple-dark:    #7c3aed;
  --teal-light:     #5eead4;
  --teal-dark:      #0d9488;

  --border-color:   rgba(168, 85, 247, 0.15);
  --border-light:   rgba(168, 85, 247, 0.3);

  --success:        #22c55e;
  --error:          #ef4444;
  --warning:        #f59e0b;

  /* ---- Gradients ---- */
  --gradient-hero:     linear-gradient(135deg, #0f0e17 0%, #1a1a2e 40%, #16213e 100%);
  --gradient-accent:   linear-gradient(135deg, var(--accent-purple), var(--accent-teal));
  --gradient-card:     linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
  --gradient-button:   linear-gradient(135deg, var(--accent-purple), var(--purple-dark));
  --gradient-glow:     linear-gradient(135deg, rgba(168,85,247,0.4), rgba(45,212,191,0.4));

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.75rem;

  --lh-tight:  1.2;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ---- Spacing ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- Borders & Radius ---- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 2px 4px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(168,85,247,0.3);
  --shadow-teal: 0 0 20px rgba(45,212,191,0.3);

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-Index ---- */
  --z-dropdown: 100;
  --z-nav:      200;
  --z-modal:    300;
  --z-overlay:  400;

  /* ---- Header ---- */
  --header-bg:        rgba(15, 14, 23, 0.85);
  --header-mobile-bg: rgba(15, 14, 23, 0.98);

  /* ---- Layout ---- */
  --max-width:    1200px;
  --nav-height:   72px;
  --sidebar-width: 280px;
}

/* ---- Light Theme Overrides ---- */
[data-theme="light"] {
  --bg-primary:     #f5f5f7;
  --bg-secondary:   #eeeef0;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f0f0f2;

  --text-primary:   #1a1a2e;
  --text-secondary: #4a4a5a;
  --text-muted:     #8888a0;

  --border-color:   rgba(0, 0, 0, 0.1);
  --border-light:   rgba(0, 0, 0, 0.15);

  --gradient-hero:  linear-gradient(135deg, #f5f5f7 0%, #eeeef0 40%, #e8e8ec 100%);
  --gradient-card:  linear-gradient(145deg, #ffffff, #f5f5f7);

  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(168, 85, 247, 0.15);
  --shadow-teal: 0 0 20px rgba(45, 212, 191, 0.15);

  --header-bg:        rgba(245, 245, 247, 0.85);
  --header-mobile-bg: rgba(245, 245, 247, 0.98);
}