/*
 * Cirometre Design Tokens
 * Brand primary: #012970 (navy) → --color-primary-600
 * Font: Poppins (primary), JetBrains Mono (code)
 * Base spacing: 8px
 */

:root {

  /* ─── Primary Scale (Navy #012970) ─────────────────────────── */
  --color-primary-50:  #e6ecf8;
  --color-primary-100: #c2d1ef;
  --color-primary-200: #99b2e4;
  --color-primary-300: #6d91d7;
  --color-primary-400: #4876cd;
  --color-primary-500: #1e59c3;
  --color-primary-600: #012970;  /* BRAND */
  --color-primary-700: #01215b;
  --color-primary-800: #011847;
  --color-primary-900: #000e2c;

  /* ─── Neutral Scale ─────────────────────────────────────────── */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* ─── Semantic — Success ────────────────────────────────────── */
  --color-success-50:  #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-500: #10B981;
  --color-success-700: #047857;

  /* ─── Semantic — Warning ────────────────────────────────────── */
  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-500: #F59E0B;
  --color-warning-700: #B45309;

  /* ─── Semantic — Danger ─────────────────────────────────────── */
  --color-danger-50:  #FEF2F2;
  --color-danger-100: #FEE2E2;
  --color-danger-500: #EF4444;
  --color-danger-700: #B91C1C;

  /* ─── Semantic — Info ───────────────────────────────────────── */
  --color-info-50:  #EFF6FF;
  --color-info-100: #DBEAFE;
  --color-info-500: #3B82F6;
  --color-info-700: #1D4ED8;

  /* ─── Surface ───────────────────────────────────────────────── */
  --surface-base:    #FFFFFF;
  --surface-subtle:  #f6f9ff;   /* app background */
  --surface-muted:   #F3F4F6;   /* card bg alt */
  --surface-overlay: #FFFFFF;   /* modal, dropdown */
  --border-subtle:   #E5E7EB;
  --border-default:  #D1D5DB;

  /* ─── Spacing (8px base) ────────────────────────────────────── */
  --space-0:   0;
  --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;

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

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

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

  /* ─── Border Radius ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ─── Shadow ────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

  /* ─── Legacy aliases (backward compat during migration) ─────── */
  --brand-navy:       var(--color-primary-600);
  --brand-navy-dark:  var(--color-primary-700);
  --brand-accent:     var(--color-primary-400);
}