/* ============================================================
   Modern Approach — Design Tokens
   Brooklyn-modern: dense, tactile, editorial
   ============================================================ */

:root {
  /* ── BASE COLORS (Dark Mode First) ─────────────────────── */
  --color-bg: #0A0A0B;
  --color-bg-elevated: #111114;
  --color-surface: #16161B;
  --color-surface-hover: #1E1E25;
  --color-border: #26262E;
  --color-border-subtle: #1A1A20;
  --color-border-strong: #38383F;

  /* ── TEXT ──────────────────────────────────────────────── */
  --color-text-primary: #F5F5F7;
  --color-text-secondary: #A8A8B3;
  --color-text-muted: #6B6B75;
  --color-text-disabled: #4A4A55;

  /* ── BRAND (default: Electric Mint) ────────────────────── */
  --color-accent: #7CFFB9;
  --color-accent-hover: #5FECC4;
  --color-accent-glow: rgba(124, 255, 185, 0.5);
  --color-accent-subtle: rgba(124, 255, 185, 0.08);
  --color-accent-ink: #0A0A0B;

  /* Secondary accents for gradients & 3D */
  --color-cobalt: #3B82F6;
  --color-violet: #8B5CF6;
  --color-amber: #F59E0B;

  /* ── STATUS ────────────────────────────────────────────── */
  --color-info: #3B82F6;
  --color-success: #10B981;
  --color-warning: #FBBF24;
  --color-danger: #EF4444;

  /* ── TYPOGRAPHY ────────────────────────────────────────── */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace;
  --font-display: "Fraunces", "Geist", ui-serif, Georgia, serif;

  /* ── SPACING ───────────────────────────────────────────── */
  --spacing-section: 6rem;
  --spacing-section-lg: 8rem;

  /* ── RADII ─────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 32px var(--color-accent-glow);
  --shadow-glow-sm: 0 0 16px var(--color-accent-glow);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ── MOTION ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ── LAYOUT ────────────────────────────────────────────── */
  --nav-height: 64px;
  --nav-height-mobile: 56px;
  --ticker-height: 32px;
  --container-sm: 768px;
  --container-md: 1024px;
  --container-lg: 1280px;
  --container-xl: 1440px;
}

/* ── LIGHT MODE (Brooklyn cream) ─────────────────────────── */
:root[data-theme="light"] {
  --color-bg: #F2EEE5;
  --color-bg-elevated: #FAF7F0;
  --color-surface: #FFFFFF;
  --color-surface-hover: #ECE7DB;
  --color-border: #D9D4C7;
  --color-border-subtle: #E5E0D2;
  --color-border-strong: #BFB9A8;

  --color-text-primary: #14140F;
  --color-text-secondary: #44443A;
  --color-text-muted: #6F6F62;
  --color-text-disabled: #A8A89B;

  --color-accent-ink: #0A0A0B;
  --shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* ── BASE RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-feature-settings: "ss01", "ss03", "cv11";
  font-variant-ligatures: common-ligatures;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* ── GLOBAL GRAIN OVERLAY (Brooklyn tactile feel) ────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}
:root[data-theme="light"] body::before { opacity: 0.08; mix-blend-mode: multiply; }

/* ── UTILITIES ───────────────────────────────────────────── */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.gradient-text {
  background: linear-gradient(100deg, #FFFFFF 0%, #C4FFD9 35%, #7CFFB9 60%, #87B6FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.accent-text { color: var(--color-accent); }

.glow-on-hover { transition: box-shadow var(--duration-base) var(--ease-out); }
.glow-on-hover:hover { box-shadow: var(--shadow-glow); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.tabular { font-variant-numeric: tabular-nums; }

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

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