/* ============================================
   Minoru Tech — Design Tokens
   Light & Dark theme variables
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --crimson: #c41e3a;
  --crimson-dark: #a01830;
  --crimson-light: #e8455d;
  --crimson-glow: rgba(196, 30, 58, 0.15);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Font Sizes (fluid) ── */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --fs-hero: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);

  /* ── Spacing ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Layout ── */
  --max-width: 1280px;
  --content-width: 800px;
  --header-height: 88px;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ── Light Theme (default) ── */
[data-theme="light"], :root {
  --bg-primary: #f8f7f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eeedeb;
  --bg-elevated: #ffffff;
  --bg-hero: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 40%, #1a1a2e 100%);

  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-tertiary: #64748b;
  --text-inverse: #f8f7f5;
  --text-on-hero: #ffffff;

  --border-color: #e2e0dc;
  --border-subtle: #f0efed;

  --card-bg: #ffffff;
  --card-border: #e2e0dc;
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  --nav-bg: rgba(248, 247, 245, 0.85);
  --nav-border: rgba(0, 0, 0, 0.06);

  --code-bg: #f1f0ee;

  --footer-bg: #1a1a1a;
  --footer-text: #a0a0a0;
  --footer-heading: #ffffff;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg-primary: #0d0d0f;
  --bg-secondary: #141418;
  --bg-tertiary: #1a1a1f;
  --bg-elevated: #1e1e24;
  --bg-hero: linear-gradient(135deg, #0d0d0f 0%, #14141a 40%, #0d0d1a 100%);

  --text-primary: #e8e6e3;
  --text-secondary: #a0a0a8;
  --text-tertiary: #6b6b75;
  --text-inverse: #1a1a1a;
  --text-on-hero: #e8e6e3;

  --border-color: #2a2a30;
  --border-subtle: #1e1e24;

  --card-bg: #141418;
  --card-border: #2a2a30;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4);

  --nav-bg: rgba(13, 13, 15, 0.9);
  --nav-border: rgba(255, 255, 255, 0.06);

  --code-bg: #1e1e24;

  --footer-bg: #0a0a0c;
  --footer-text: #6b6b75;
  --footer-heading: #e8e6e3;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ── Theme Transition ── */
[data-theme="light"],
[data-theme="dark"] {
  transition:
    background-color var(--duration-slow) var(--ease-out),
    color var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out);
}