/* ============================================================
   MZperX Design System — Colors & Type
   ============================================================ */

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Surfaces (light, default) ───────────────────────────── */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-hover: #e9ecef;

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary: #333333;
  --text-secondary: #666666;

  /* ── Lines ───────────────────────────────────────────────── */
  --border-color: #dee2e6;

  /* ── Accent (brand blue) ─────────────────────────────────── */
  --accent-color: #007bff;
  --accent-color-hover: #0056b3;
  --accent-color-alpha: rgba(0, 123, 255, 0.1);
  --accent-hover: #0056b3;

  /* ── Semantic colors ─────────────────────────────────────── */
  --success: #28a745;
  --success-alt: #20c997;
  --success-bg: #d4edda;
  --success-text: #155724;
  --success-border: #c3e6cb;

  --warning: #ffc107;
  --warning-alt: #fd7e14;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
  --warning-border: #ffeaa7;

  --danger: #dc3545;
  --danger-alt: #e74c3c;
  --danger-hover: #c82333;
  --danger-bg: #f8d7da;
  --danger-text: #721c24;
  --danger-border: #f5c6cb;

  --info-bg: #e7f3ff;
  --info-text: #0c5aa6;
  --info-border: #b8daff;

  --neutral: #6c757d;
  --neutral-hover: #5a6268;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Roboto', 'Helvetica Neue', sans-serif;
  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

  /* Type ramp */
  --fs-xs:   0.75rem;
  --fs-sm:   0.85rem;
  --fs-base: 0.9rem;
  --fs-md:   1rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.6rem;
  --fs-3xl:  1.8rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --ls-wide:  0.5px;
  --ls-tight: 0.3px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-pill: 25px;
  --radius-full: 50%;

  /* ── Shadow / focus ──────────────────────────────────────── */
  --shadow-sm:           0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-focus:        0 0 0 2px var(--accent-color-alpha);
  --shadow-focus-blue:   0 0 0 2px rgba(0, 123, 255, 0.25);
  --shadow-focus-blue-dk:0 0 0 2px rgba(13, 110, 253, 0.25);

  /* ── Motion ──────────────────────────────────────────────── */
  --transition-fast:  all 0.15s;
  --transition-base:  all 0.2s;
  --transition-slow:  0.3s ease;
  --transition-score: width 0.5s ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1400px;
  --sidebar-w: 280px;
}

/* ── Dark theme ────────────────────────────────────────────── */
body.dark-theme {
  --bg-primary:        #1a1a1a;
  --bg-secondary:      #2d2d2d;
  --bg-hover:          #404040;
  --text-primary:      #ffffff;
  --text-secondary:    #cccccc;
  --border-color:      #404040;
  --accent-color:      #0d6efd;
  --accent-color-hover:#0b5ed7;
  --accent-color-alpha:rgba(13, 110, 253, 0.1);
  --accent-hover:      #0b5ed7;
}

/* ── Base resets ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color var(--transition-slow), color var(--transition-slow);
}