/**
 * EPC Employee Portal — Design Tokens
 * Taskori-inspired minimal aesthetic
 * All components consume these tokens — no hard-coded values anywhere.
 */

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

:root {
  /* ── Surfaces ── */
  --surface-0: #FFFFFF;
  --surface-1: #FAFAFA;
  --surface-2: #F5F5F5;
  --surface-3: #EFEFEF;

  /* ── Text ── */
  --text-primary:   #0A0A0A;
  --text-secondary: #525252;
  --text-tertiary:  #A3A3A3;
  --text-inverse:   #FFFFFF;

  /* ── Borders ── */
  --border-subtle:  #EFEFEF;
  --border-default: #E5E5E5;
  --border-strong:  #D4D4D4;

  /* ── Accent (near-black primary) ── */
  --accent:       #0A0A0A;
  --accent-hover: #1F1F1F;
  --accent-soft:  #F5F5F5;
  --accent-ring:  rgba(10, 10, 10, .08);

  /* ── Brand (indigo — KPI, onboarding) ── */
  --brand-primary:  #6366F1;
  --brand-soft:     #EEF0FF;
  --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);

  /* ── Coral (sparingly — charts, setup CTA) ── */
  --coral:      #F97056;
  --coral-soft: #FEF1ED;

  /* ── Status pills ── */
  --status-success-bg: #E7F7EE;  --status-success-fg: #117A3D;
  --status-warning-bg: #FEF3E2;  --status-warning-fg: #B45309;
  --status-danger-bg:  #FDECEC;  --status-danger-fg:  #B42318;
  --status-info-bg:    #E6EEFB;  --status-info-fg:    #1D4FD0;
  --status-neutral-bg: #F2F2F2;  --status-neutral-fg: #525252;

  /* ── KPI score pills ── */
  --score-active:   #111111;
  --score-inactive: #F5F5F5;
  --score-border:   #E5E5E5;

  /* ── Spacing ── */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ── Shadow ── */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.08);

  /* ── Transitions ── */
  --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --transition:      180ms cubic-bezier(.4, 0, .2, 1);

  /* ── Typography scale ── */
  --font-family:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  --font-display-size:   48px;  --font-display-weight: 700;  --font-display-tracking: -0.03em;
  --font-h1-size:        28px;  --font-h1-weight:      600;  --font-h1-tracking:      -0.02em;
  --font-h2-size:        20px;  --font-h2-weight:      600;  --font-h2-tracking:      -0.01em;
  --font-h3-size:        16px;  --font-h3-weight:      600;  --font-h3-tracking:      0;
  --font-body-size:      14px;  --font-body-weight:    400;
  --font-small-size:     13px;  --font-small-weight:   400;
  --font-caption-size:   11px;  --font-caption-weight: 500;  --font-caption-tracking: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition: 0.01ms;
  }
}