/* ===== Design Tokens ===== */
:root {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code",
    "Consolas", "Source Code Pro", monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --max-width: 1200px;
  --header-height: 56px;
  --search-bar-height: 56px;

  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ===== Dark Theme (Default) ===== */
:root,
[data-theme="dark"] {
  --color-bg-primary: #0d1117;
  --color-bg-secondary: #161b22;
  --color-bg-tertiary: #21262d;
  --color-bg-elevated: #1c2128;
  --color-bg-overlay: rgba(13, 17, 23, 0.88);
  --color-bg-input: #0d1117;
  --color-bg-code: #161b22;

  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-border-emphasis: #484f58;

  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-tertiary: #6e7681;
  --color-text-inverse: #0d1117;
  --color-text-link: #58a6ff;

  --color-accent: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-accent-muted: rgba(88, 166, 255, 0.12);
  --color-accent-subtle: rgba(88, 166, 255, 0.06);

  --color-success: #3fb950;
  --color-success-emphasis: #238636;
  --color-success-muted: rgba(63, 185, 80, 0.15);

  --color-danger: #f85149;
  --color-danger-emphasis: #da3633;
  --color-danger-muted: rgba(248, 81, 73, 0.15);

  --color-warning: #d2991d;
  --color-warning-muted: rgba(210, 153, 29, 0.15);

  --color-header-bg: rgba(13, 17, 23, 0.85);
  --color-card-bg: #161b22;
  --color-card-hover: #1c2128;
  --color-card-border: #30363d;
}

/* ===== Light Theme ===== */
[data-theme="light"] {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f6f8fa;
  --color-bg-tertiary: #e8eaed;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: rgba(255, 255, 255, 0.88);
  --color-bg-input: #ffffff;
  --color-bg-code: #f6f8fa;

  --color-border-default: #d0d7de;
  --color-border-muted: #e8eaed;
  --color-border-emphasis: #afb8c1;

  --color-text-primary: #1f2328;
  --color-text-secondary: #656d76;
  --color-text-tertiary: #8b949e;
  --color-text-inverse: #ffffff;
  --color-text-link: #0969da;

  --color-accent: #0969da;
  --color-accent-emphasis: #0550ae;
  --color-accent-muted: rgba(9, 105, 218, 0.1);
  --color-accent-subtle: rgba(9, 105, 218, 0.05);

  --color-success: #1a7f37;
  --color-success-emphasis: #116329;
  --color-success-muted: rgba(26, 127, 55, 0.12);

  --color-danger: #cf222e;
  --color-danger-emphasis: #a40e26;
  --color-danger-muted: rgba(207, 34, 46, 0.12);

  --color-warning: #9a6700;
  --color-warning-muted: rgba(154, 103, 0, 0.12);

  --color-header-bg: rgba(255, 255, 255, 0.85);
  --color-card-bg: #ffffff;
  --color-card-hover: #f6f8fa;
  --color-card-border: #d0d7de;

  --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.06);
  --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 35, 40, 0.12);
  --shadow-xl: 0 20px 48px rgba(31, 35, 40, 0.15);
}

/* ===== Zone Accent Colors ===== */
[data-zone="dungeon"] {
  --zone-accent: #e5534b;
  --zone-accent-emphasis: #c93c37;
  --zone-accent-muted: rgba(229, 83, 75, 0.12);
  --zone-accent-subtle: rgba(229, 83, 75, 0.06);
}

[data-zone="forest"] {
  --zone-accent: #57ab5a;
  --zone-accent-emphasis: #38853d;
  --zone-accent-muted: rgba(87, 171, 90, 0.12);
  --zone-accent-subtle: rgba(87, 171, 90, 0.06);
}

[data-zone="desert"] {
  --zone-accent: #e09b56;
  --zone-accent-emphasis: #c47d38;
  --zone-accent-muted: rgba(224, 155, 86, 0.12);
  --zone-accent-subtle: rgba(224, 155, 86, 0.06);
}

[data-zone="mountain"] {
  --zone-accent: #71b7e6;
  --zone-accent-emphasis: #4a91c2;
  --zone-accent-muted: rgba(113, 183, 230, 0.12);
  --zone-accent-subtle: rgba(113, 183, 230, 0.06);
}

[data-zone="glacier"] {
  --zone-accent: #91cdf0;
  --zone-accent-emphasis: #66a8d4;
  --zone-accent-muted: rgba(145, 205, 240, 0.12);
  --zone-accent-subtle: rgba(145, 205, 240, 0.06);
}

/* ===== Theme Transitions ===== */
body {
  transition: background-color var(--transition-base), color var(--transition-base);
}

body * {
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}