/* ==========================================================================
   SlikWeb Design System Tokens & Brand System
   Strict Monochrome Architecture (Vercel, Linear, Stripe, Apple quality)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;550;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand Typography */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Sizing & Layout */
  --container-width: 1240px;
  --container-wide: 1400px;
  --section-spacing: 120px;
  --section-spacing-mobile: 72px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Operational Accent (strictly for live health & indicators) */
  --status-green: #10B981;
  --status-green-glow: rgba(16, 185, 129, 0.15);

  /* DARK THEME (DEFAULT) */
  --background: #000000;
  --surface: #080808;
  --surface-secondary: #0D0D0D;
  --border: #222222;
  --border-subtle: #181818;
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #737373;
  --text-inverse: #090909;

  /* Compatibility & Semantic Aliases */
  --bg-primary: var(--background);
  --bg-secondary: var(--surface);
  --bg-card: var(--surface);
  --bg-card-secondary: var(--surface-secondary);
  --bg-card-hover: #121212;
  --bg-input: #0A0A0A;
  --bg-glass: rgba(8, 8, 8, 0.85);
  --bg-glass-hover: rgba(18, 18, 18, 0.95);

  --border-primary: var(--border);
  --border-focus: #FFFFFF;

  --btn-primary-bg: #FFFFFF;
  --btn-primary-text: #000000;
  --btn-primary-hover: #E5E5E5;

  --btn-secondary-bg: #0D0D0D;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-border: var(--border);
  --btn-secondary-hover: #161616;

  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);

  --grid-line-color: rgba(255, 255, 255, 0.04);
}

/* Explicit Dark Theme */
[data-theme="dark"] {
  --background: #000000;
  --surface: #080808;
  --surface-secondary: #0D0D0D;
  --border: #222222;
  --border-subtle: #181818;
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #737373;
  --text-inverse: #090909;

  --bg-primary: #000000;
  --bg-secondary: #080808;
  --bg-card: #080808;
  --bg-card-secondary: #0D0D0D;
  --bg-card-hover: #121212;
  --bg-input: #0A0A0A;
  --bg-glass: rgba(8, 8, 8, 0.85);
  --bg-glass-hover: rgba(18, 18, 18, 0.95);

  --border-primary: #222222;
  --border-focus: #FFFFFF;

  --btn-primary-bg: #FFFFFF;
  --btn-primary-text: #000000;
  --btn-primary-hover: #E5E5E5;

  --btn-secondary-bg: #0D0D0D;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-border: #222222;
  --btn-secondary-hover: #161616;

  --grid-line-color: rgba(255, 255, 255, 0.04);
}

/* LIGHT THEME */
[data-theme="light"] {
  --background: #FFFFFF;
  --surface: #FAFAFA;
  --surface-secondary: #F5F5F5;
  --border: #E5E5E5;
  --border-subtle: #EEEEEE;
  --text-primary: #090909;
  --text-secondary: #525252;
  --text-muted: #737373;
  --text-inverse: #FFFFFF;

  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --bg-card: #FAFAFA;
  --bg-card-secondary: #F5F5F5;
  --bg-card-hover: #F0F0F0;
  --bg-input: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-hover: rgba(245, 245, 245, 0.95);

  --border-primary: #E5E5E5;
  --border-focus: #090909;

  --btn-primary-bg: #090909;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #222222;

  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-text: #090909;
  --btn-secondary-border: #E5E5E5;
  --btn-secondary-hover: #F5F5F5;

  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.03);

  --grid-line-color: rgba(0, 0, 0, 0.03);
}