/* Self-hosted Clash Grotesk */
@font-face {
  font-family: "Clash Grotesk";
  src: url("/fonts/WEB/fonts/ClashGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.08);
  --elevation-3: 0 4px 8px rgba(0, 0, 0, 0.12);

  --transition-fast: 120ms;
  --transition-normal: 240ms;
  --transition-slow: 420ms;

  /* Compatibility layer: map legacy vars to new palette tokens */
  --bg-dark: var(--background-900);
  --bg-panel: var(--background-800);
  --bg-widget: var(--background-700);
  --bg-hover: var(--background-600);

  --text-primary: var(--text-900);
  --text-secondary: var(--text-600);
  --text-tertiary: var(--text-400);

  --accent: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-active: var(--accent-700);
  --accent-subtle: var(--accent-100);
  --accent-text: var(--text-50);

  --border: rgba(0, 0, 0, 0.08);
  --error: #e53935;
  --success: #2e7d32;
  --warning: #f57f17;
  --info: #0288d1;
  --font-primary:
    "Plus Jakarta Sans", "Clash Grotesk", system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-monospace: "SF Mono", "Monaco", "Cascadia Code", "Consolas", monospace;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type Scale - Following 1.25 (Major Third) ratio */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
}

/* ===== INDEX.HTML PALETTE (Warm Night) ===== */

:root[data-theme="light"] {
  /* Text */
  --text-50: #ffffff;
  --text-100: #f8f7f4;
  --text-200: #f0ede8;
  --text-300: #e8e5e0;
  --text-400: #d4d0c8;
  --text-500: #bdb7ad;
  --text-600: #9ca3af;
  --text-700: #6b7280;
  --text-800: #3d3d3d;
  --text-900: #1a1a1a;
  --text-950: #0f0f0f;

  /* Background / Surfaces */
  --background-50: #f8f7f4; /* light-bg */
  --background-100: #ffffff; /* light-bg-elevated */
  --background-200: #f0ede8; /* light-surface */
  --background-300: #e8e5e0; /* light-surface-hover */
  --background-400: #e8e5e0;
  --background-500: #d4d0c8; /* light-border */
  --background-600: #bdb7ad;
  --background-700: #a89f95;
  --background-800: #8f8578;
  --background-900: #74685a;
  --background-950: #5a5045;

  /* Primary / Accent (from style.css) */
  --primary-50: #eaf4ff;
  --primary-100: #d6eaff;
  --primary-200: #bde0ff;
  --primary-300: #94c8ff;
  --primary-400: #4a90d9;
  --primary-500: #1e77bc; /* primary */
  --primary-600: #155a8a; /* primary-hover */
  --primary-700: #12304a;
  --primary-800: #0d1b2a;
  --primary-900: #08121a;

  --secondary-50: #f0f6fb;
  --secondary-100: #e2eef9;
  --secondary-200: #cfe1f6;
  --secondary-300: #9fcbe9;
  --secondary-400: #4a90d9;
  --secondary-500: #17446b; /* secondary */
  --secondary-600: #12304a;
  --secondary-700: #0d1b2a;
  --secondary-800: #08121a;
  --secondary-900: #04090d;

  --accent-50: #eaf4ff;
  --accent-100: #d6eaff;
  --accent-200: #bde0ff;
  --accent-300: #94c8ff;
  --accent-400: #4a90d9;
  --accent-500: #1e77bc; /* accent */
  --accent-600: #155a8a; /* accent-hover */
  --accent-700: #12304a;
  --accent-800: #0d1b2a;
  --accent-900: #08121a;
  --accent-950: #04090d;
}
:root[data-theme="dark"] {
  /* Text */
  --text-50: #f3f1ef;
  --text-100: #e8e6e3; /* dark-text */
  --text-200: #d0cdca;
  --text-300: #b8b4b0;
  --text-400: #9ca3af; /* dark-text-secondary */
  --text-500: #888477;
  --text-600: #6b7280; /* dark-text-muted */
  --text-700: #4f5153;
  --text-800: #303235;
  --text-900: #1a1d21;
  --text-950: #0f1011;

  /* Background / Surfaces */
  --background-50: #1a1d21; /* dark-bg */
  --background-100: #242830; /* dark-bg-elevated / dark-panel */
  --background-200: #2d323b; /* dark-surface */
  --background-300: #3d4451; /* dark-surface-hover */
  --background-400: #4a505b;
  --background-500: #585f69;
  --background-600: #6b7280;
  --background-700: #7f868f;
  --background-800: #9aa0a8;
  --background-900: #b5bbbf;
  --background-950: #d0d4d6;

  /* Primary / Accent */
  --primary-50: #071428;
  --primary-100: #0c2a50;
  --primary-200: #123c7a;
  --primary-300: #194e9e;
  --primary-400: #1e77bc; /* primary */
  --primary-500: #2a8ad0;
  --primary-600: #4a90d9;
  --primary-700: #6fb2ff;
  --primary-800: #95cbff;
  --primary-900: #cfe9ff;

  --secondary-50: #071428;
  --secondary-100: #0c2a50;
  --secondary-200: #12304a; /* secondary-light */
  --secondary-300: #17446b; /* secondary */
  --secondary-400: #12304a;
  --secondary-500: #0d1b2a;
  --secondary-600: #08121a;
  --secondary-700: #04090d;
  --secondary-800: #020406;
  --secondary-900: #010203;

  --accent-50: #071428;
  --accent-100: #0c2a50;
  --accent-200: #123c7a;
  --accent-300: #194e9e;
  --accent-400: #1e77bc; /* accent */
  --accent-500: #2a8ad0;
  --accent-600: #4a90d9;
  --accent-700: #6fb2ff;
  --accent-800: #95cbff;
  --accent-900: #cfe9ff;
}

/* ===== COMPATIBILITY LAYER: map old variable names to Realtime palette ===== */
/* These ensure existing pages using the original variable names keep working. */
:root[data-theme="light"] {
  --bg-dark: var(--background-50);
  --bg-panel: var(--background-100);
  --bg-widget: var(--background-50);
  --bg-hover: var(--background-100);

  --text-primary: var(--text-900);
  --text-secondary: var(--text-600);
  --text-tertiary: var(--text-500);

  --accent: var(--accent-500);
  --accent-hover: var(--accent-400);
  --accent-active: var(--accent-600);
  --accent-subtle: rgba(38, 98, 217, 0.08);
  --accent-text: #ffffff;

  --border: var(--background-300);
  --border-subtle: var(--background-200);
  --border-strong: var(--background-400);

  --error: #f85149;
  --error-subtle: rgba(248, 81, 73, 0.15);
  --success: #3fb950;
  --success-subtle: rgba(63, 185, 80, 0.15);
  --warning: #d29922;
  --warning-subtle: rgba(210, 153, 34, 0.15);
  --info: var(--primary-500);
  --info-subtle: rgba(88, 166, 255, 0.15);
}

:root[data-theme="dark"] {
  --bg-dark: var(--background-50);
  --bg-panel: var(--background-100);
  --bg-widget: var(--background-200);
  --bg-hover: var(--background-300);

  /* Use a light gray for primary text in dark mode to avoid pure black */
  --text-primary: var(--text-100);
  --text-secondary: var(--text-300);
  --text-tertiary: var(--text-400);

  --accent: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-active: var(--accent-700);
  --accent-subtle: rgba(38, 98, 217, 0.08);
  --accent-text: #ffffff;

  --border: var(--background-300);
  --border-subtle: var(--background-200);
  --border-strong: var(--background-400);

  --error: #f85149;
  --error-subtle: rgba(248, 81, 73, 0.15);
  --success: #3fb950;
  --success-subtle: rgba(63, 185, 80, 0.15);
  --warning: #d29922;
  --warning-subtle: rgba(210, 153, 34, 0.15);
  --info: var(--primary-500);
  --info-subtle: rgba(88, 166, 255, 0.15);
}

/* Global spacing, radius, elevation and transition tokens (previously in theme blocks) */
:root {
  --elevation-0: 0 0 0 0 transparent;
  --elevation-1:
    0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --elevation-2:
    0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
  --elevation-3:
    0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
  --elevation-4:
    0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.08);

  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */

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

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== GLOBAL BASE STYLES ===== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-dark);
  font-weight: var(--font-weight-normal);
}

/* Heading Styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
}
h4 {
  font-size: var(--text-lg);
}
h5 {
  font-size: var(--text-base);
}
h6 {
  font-size: var(--text-sm);
}

/* Text Elements */
p {
  margin-bottom: var(--spacing-md);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

code,
pre {
  font-family: var(--font-monospace);
  font-size: 0.9em;
}

/* ===== THEME TOGGLE BUTTON (Material 3 Style) ===== */

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  padding: 0.5rem 1rem;
  transition: all var(--transition-base);
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.theme-toggle:hover::before {
  opacity: 0.08;
}

.theme-toggle:active {
  transform: scale(0.96);
}

/* Mobile optimization for theme toggle */
@media (max-width: 768px) {
  .theme-toggle {
    min-height: 44px;
    font-size: var(--text-base);
    padding: 0.625rem 1.25rem;
  }
}

/* ===== SMOOTH THEME TRANSITIONS ===== */

*,
*::before,
*::after {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Disable transitions on theme change for instant feedback */
[data-theme-transitioning] * {
  transition: none !important;
}

/* ===== UTILITY CLASSES ===== */

.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --border: currentColor;
    --border-strong: currentColor;
  }
}