/**
 * Global CSS Variables - Color Scheme & Typography
 * Based on GitHub Copilot's professional dark theme with custom enhancements
 */

:root {
  /* ── BACKGROUND COLORS ── */
  --bg-primary: #06080f;      /* Main background - darkest */
  --bg-secondary: #151c2c;    /* Alternate background - noticeably lighter */
  --surface-1: #10141f;       /* Surface layer 1 */
  --surface-2: #161b28;       /* Surface layer 2 */
  --surface-3: #1d2335;       /* Surface layer 3 (hover) */

  /* ── BORDERS & DIVIDERS ── */
  --border-primary: #1e2538;
  --border-secondary: #252d42;
  --border-light: rgba(30, 37, 56, 0.5);

  /* ── TEXT COLORS ── */
  --text-primary: #dce3f5;    /* Main text */
  --text-secondary: #6b7799;  /* Muted/secondary text */
  --text-dim: #374060;        /* Very dim text */
  --text-white: #ffffff;      /* Pure white for emphasis */
  --text-bright: #eeeef6;     /* Bright text */

  /* ── ACCENT COLORS ── */
  --color-blue: #4d9fff;      /* Primary blue */
  --color-purple: #9b7ff8;    /* Purple accent */
  --color-teal: #2dd4bf;      /* Teal/cyan */
  --color-green: #34d399;     /* Green accent */
  --color-yellow: #fbbf24;    /* Yellow accent */
  --color-orange: #fb923c;    /* Orange accent */
  --color-pink: #f472b6;      /* Pink accent */
  --color-red: #f87171;       /* Red accent */
  --color-cyan: #22d3ee;      /* Bright cyan */
  --color-lime: #a3e635;      /* Lime green */

  /* ── SEMANTIC COLORS ── */
  --color-success: var(--color-green);
  --color-warning: var(--color-orange);
  --color-error: var(--color-red);
  --color-info: var(--color-blue);

  /* ── SHADOWS & GLOWS ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);

  --glow-blue: 0 0 20px rgba(77, 159, 255, 0.3);
  --glow-purple: 0 0 20px rgba(155, 127, 248, 0.3);
  --glow-teal: 0 0 20px rgba(45, 212, 191, 0.3);
  --glow-green: 0 0 20px rgba(52, 211, 153, 0.3);

  /* ── TYPOGRAPHY ── */
  --font-primary: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ── SPACING ── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

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

  /* ── TRANSITIONS ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── BREAKPOINTS (for reference) ── */
  /* Mobile: 320px, Tablet: 768px, Desktop: 1024px, Wide: 1440px */
}

/* ────────────────────────────────────────────────────────────
   UTILITY CLASSES
──────────────────────────────────────────────────────────────── */

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

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

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

.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.border-primary {
  border-color: var(--border-primary);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.rounded {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.glow-blue {
  box-shadow: var(--glow-blue);
}

.glow-purple {
  box-shadow: var(--glow-purple);
}

/* ════════════════════════════════════════════════════════════
   DIM THEME (lighter, muted — not bright white)
════════════════════════════════════════════════════════════ */

[data-theme="dim"] {
  /* VS Code blue-light palette */
  --bg-primary: #f3f3f3;
  --bg-secondary: #ebeef5;
  --surface-1: #dfe3ec;
  --surface-2: #d3d8e8;
  --surface-3: #c7cde0;

  --border-primary: #b4bcd6;
  --border-secondary: #9aa4c1;
  --border-light: rgba(180, 188, 214, 0.5);

  --text-primary: #1a1a2e;
  --text-secondary: #2d3055;
  --text-dim: #616587;
  --text-white: #0a0a1a;
  --text-bright: #0f0f24;

  --color-blue: #0066b8;
  --color-purple: #6a0dad;
  --color-green: #16825d;
  --color-orange: #c76b00;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12);
}