/* ========================================
   VARIABLES.CSS — Design Tokens (Phase 2)
   ======================================== */

:root {
  /* ——— Color Palette — Light Mode ——— */
  --color-bg: #f5f0e8;
  --color-bg-alt: #ebe3d7;
  --color-bg-dark: #1a1816;
  --color-surface: #ffffff;
  --color-text: #171717;
  --color-text-soft: #4a4642;
  --color-text-muted: #6b6762;
  --color-text-inverse: #f5f0e8;
  --color-accent: #9b4f3f;
  --color-accent-hover: #7d3f32;
  --color-accent-soft: rgba(155, 79, 63, 0.12);
  --color-accent-light: #c97a65;
  --color-border: #d4ccc4;
  --color-border-light: #e8e2da;
  --color-focus: #9b4f3f;
  --color-overlay: rgba(23, 23, 23, 0.6);
  --color-overlay-light: rgba(245, 240, 232, 0.85);
  --color-success: #2d6a4f;
  --color-warning: #b5651d;

  /* ——— Typography ——— */
  --font-sans: 'Space Grotesk', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2rem, 4vw, 3rem);
  --text-4xl: clamp(2.5rem, 5vw, 4rem);
  --text-5xl: clamp(4rem, 8vw, 6rem);
  --text-6xl: clamp(5rem, 10vw, 8rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* ——— Spacing ——— */
  --space-0: 0;
  --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;
  --space-5xl: 6rem;
  --space-6xl: 8rem;

  /* ——— Layout ——— */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-full: 100%;

  --header-height: 80px;

  /* ——— Border Radius ——— */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* ——— Shadows ——— */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16);

  /* ——— Transitions ——— */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-slower: 600ms ease;
  --transition-slowest: 900ms ease;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-circ: cubic-bezier(0.07, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ——— Z-Index ——— */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;

  /* ——— Viewport ——— */
  --viewport-padding: var(--space-xl);
  --viewport-padding-sm: var(--space-lg);
}

/* ——— Dark Mode ——— */
[data-theme="dark"] {
  --color-bg: #12110f;
  --color-bg-alt: #1a1816;
  --color-bg-dark: #0a0908;
  --color-surface: #1e1c19;
  --color-text: #f5f0e8;
  --color-text-soft: #d4ccc4;
  --color-text-muted: #a8a29a;
  --color-text-inverse: #171717;
  --color-accent: #c97a65;
  --color-accent-hover: #d48a75;
  --color-accent-soft: rgba(201, 122, 101, 0.15);
  --color-accent-light: #9b4f3f;
  --color-border: #3d3834;
  --color-border-light: #2d2926;
  --color-focus: #c97a65;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(18, 17, 15, 0.85);
  --color-success: #52b788;
  --color-warning: #e09f3e;
}

/* System preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #12110f;
    --color-bg-alt: #1a1816;
    --color-bg-dark: #0a0908;
    --color-surface: #1e1c19;
    --color-text: #f5f0e8;
    --color-text-soft: #d4ccc4;
    --color-text-muted: #a8a29a;
    --color-text-inverse: #171717;
    --color-accent: #c97a65;
    --color-accent-hover: #d48a75;
    --color-accent-soft: rgba(201, 122, 101, 0.15);
    --color-accent-light: #9b4f3f;
    --color-border: #3d3834;
    --color-border-light: #2d2926;
    --color-focus: #c97a65;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-light: rgba(18, 17, 15, 0.85);
    --color-success: #52b788;
    --color-warning: #e09f3e;
  }
}

/* Smooth theme transition */
html {
  transition: background-color 300ms ease, color 300ms ease;
}

/* High contrast */
@media (prefers-contrast: high) {
  :root {
    --color-accent: #6b3528;
    --color-border: #000;
    --color-text-muted: #333;
  }
}