/* ============================================================
   variables.css
   Design tokens — colors, spacing, typography, breakpoints.
   Edit values here to re-theme the entire site at once.
   ============================================================ */

:root {
    /* === Surfaces === */
    --bg-primary: #0a0a0a;          /* page background */
    --bg-elevated: #111111;         /* navbar, footer, section accents */
    --bg-card: #161616;             /* cards, panels */
    --bg-input: #1a1a1a;            /* form fields */
    --border: #1f1f1f;              /* card / input borders */
    --border-strong: #2a2a2a;       /* hover borders */

    /* === Brand === */
    --accent: #2dd4a8;              /* mint — primary brand color */
    --accent-hover: #25b890;        /* mint, slightly darker for hover */
    --accent-glow: rgba(45, 212, 168, 0.15);   /* soft halo behind avatar */
    --accent-soft: rgba(45, 212, 168, 0.08);   /* tag backgrounds */

    /* === Text === */
    --text-primary: #ffffff;
    --text-secondary: #a8a8a8;
    --text-muted: #6b6b6b;

    /* === Status colors === */
    --danger: #ef4444;              /* PROBLEM label */

    /* === Radii === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* === Spacing scale (used by layout + components) === */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* === Typography === */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', system-ui, sans-serif;

    /* === Layout === */
    --container: 1200px;            /* max content width */
    --nav-height: 72px;

    /* === Effects === */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 60px rgba(45, 212, 168, 0.25);
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;

    /* === Breakpoints (used in JS only — CSS uses literal values) === */
    --bp-tablet: 968px;
    --bp-mobile: 640px;
}