/**
 * Design Tokens - Lakes Directory 2030
 * Modern design system with light/dark theme support
 */

:root {
  /* Spacing scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 28px;
  --space-6: 32px;
  --space-8: 48px;
  --space-12: 64px;

  /* Radius scale */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* Typography scale */
  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* Light theme defaults */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-hover: #f0f2fa;
  --text: #0f1222;
  --text-secondary: #5d6171;
  --text-muted: #7d8295;
  --text-inverse: #ffffff;
  --border: #e6e8ef;
  --brand: #2b7fff;
  --brand-hover: #1b66d1;
  --brand-2: #00e0a4;
  --brand-light: rgba(43, 127, 255, 0.12);
  --accent: #8a7cff;
  --warn: #ffb020;
  --danger: #ff5a6f;
  --glass: rgba(255, 255, 255, 0.65);
  --shadow-sm: 0 4px 18px rgba(15, 18, 34, 0.08);
  --shadow-md: 0 10px 30px rgba(15, 18, 34, 0.12);
  --shadow-lg: 0 18px 50px rgba(15, 18, 34, 0.16);
  --shadow-xl: 0 24px 65px rgba(15, 18, 34, 0.18);
  --backdrop-blur: saturate(1.2) blur(22px);
  --z-sticky: 90;
  --z-fixed: 100;
  --z-modal: 1000;
  --z-tooltip: 1100;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 360ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0f17;
    --surface: #131827;
    --surface-hover: #1b2135;
    --text: #e8ecff;
    --text-secondary: #9aa4bf;
    --text-muted: #6c7394;
    --text-inverse: #0c0f17;
    --border: #252a3a;
    --brand: #5aa2ff;
    --brand-hover: #82b9ff;
    --brand-2: #27f3bd;
    --brand-light: rgba(90, 162, 255, 0.18);
    --accent: #a696ff;
    --warn: #ffc266;
    --danger: #ff7d8e;
    --glass: rgba(19, 24, 39, 0.6);
    --shadow-sm: 0 4px 18px rgba(2, 6, 18, 0.45);
    --shadow-md: 0 10px 30px rgba(2, 6, 18, 0.55);
    --shadow-lg: 0 18px 55px rgba(2, 6, 18, 0.6);
    --shadow-xl: 0 26px 70px rgba(2, 6, 18, 0.65);
    --backdrop-blur: saturate(1.1) blur(28px);
  }
}

html[data-theme="light"] {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-hover: #f0f2fa;
  --text: #0f1222;
  --text-secondary: #5d6171;
  --text-muted: #7d8295;
  --text-inverse: #ffffff;
  --border: #e6e8ef;
  --brand: #2b7fff;
  --brand-hover: #1b66d1;
  --brand-2: #00e0a4;
  --brand-light: rgba(43, 127, 255, 0.12);
  --accent: #8a7cff;
  --warn: #ffb020;
  --danger: #ff5a6f;
  --glass: rgba(255, 255, 255, 0.65);
  --shadow-sm: 0 4px 18px rgba(15, 18, 34, 0.08);
  --shadow-md: 0 10px 30px rgba(15, 18, 34, 0.12);
  --shadow-lg: 0 18px 50px rgba(15, 18, 34, 0.16);
  --shadow-xl: 0 24px 65px rgba(15, 18, 34, 0.18);
  --backdrop-blur: saturate(1.2) blur(22px);
}

html[data-theme="dark"] {
  --bg: #0c0f17;
  --surface: #131827;
  --surface-hover: #1b2135;
  --text: #e8ecff;
  --text-secondary: #9aa4bf;
  --text-muted: #6c7394;
  --text-inverse: #0c0f17;
  --border: #252a3a;
  --brand: #5aa2ff;
  --brand-hover: #82b9ff;
  --brand-2: #27f3bd;
  --brand-light: rgba(90, 162, 255, 0.18);
  --accent: #a696ff;
  --warn: #ffc266;
  --danger: #ff7d8e;
  --glass: rgba(19, 24, 39, 0.6);
  --shadow-sm: 0 4px 18px rgba(2, 6, 18, 0.45);
  --shadow-md: 0 10px 30px rgba(2, 6, 18, 0.55);
  --shadow-lg: 0 18px 55px rgba(2, 6, 18, 0.6);
  --shadow-xl: 0 26px 70px rgba(2, 6, 18, 0.65);
  --backdrop-blur: saturate(1.1) blur(28px);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}