/* ═══════════════════════════════════════════════════════════
   DRES PPM — Design Tokens
   ═══════════════════════════════════════════════════════════ */

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

  /* ── Colours: Primary (Navy) ── */
  --primary-50:  #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  --primary-800: #12213E;
  --primary-900: #0F172A;

  /* ── Colours: Accent (Blue) ── */
  --accent-50:  #EFF6FF;
  --accent-100: #DBEAFE;
  --accent-200: #BFDBFE;
  --accent-300: #93C5FD;
  --accent-500: #3B82F6;
  --accent-600: #2563EB;
  --accent-700: #1D4ED8;
  --accent-800: #1E40AF;

  /* ── Colours: Semantic ── */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-700: #15803D;
  --success-800: #166534;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-800: #78350F;

  --error-50:  #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-800: #991B1B;

  /* ── Phase colours ── */
  --phase-triage:            var(--gray-500);
  --phase-triage-bg:         var(--gray-100);
  --phase-triage-text:       var(--gray-700);
  --phase-analysis:          var(--accent-500);
  --phase-analysis-bg:       var(--accent-100);
  --phase-analysis-text:     var(--accent-800);
  --phase-implementation:    var(--warning-500);
  --phase-implementation-bg: var(--warning-100);
  --phase-implementation-text: var(--warning-800);
  --phase-completed:         var(--success-500);
  --phase-completed-bg:      var(--success-100);
  --phase-completed-text:    var(--success-800);
  --phase-rejected:          var(--error-500);
  --phase-rejected-bg:       var(--error-100);
  --phase-rejected-text:     var(--error-800);

  /* ── Priority colours ── */
  --priority-low:        var(--success-500);
  --priority-low-bg:     var(--success-100);
  --priority-low-text:   var(--success-800);
  --priority-medium:     var(--warning-500);
  --priority-medium-bg:  var(--warning-100);
  --priority-medium-text: var(--warning-800);
  --priority-high:       var(--error-500);
  --priority-high-bg:    var(--error-100);
  --priority-high-text:  var(--error-800);

  /* ── Class colours ── */
  --class-fast-bg:      var(--success-100);
  --class-fast-text:    var(--success-800);
  --class-std-bg:       var(--accent-100);
  --class-std-text:     var(--accent-800);
  --class-complex-bg:   var(--warning-100);
  --class-complex-text: var(--warning-800);

  /* ── Type colours ── */
  --type-incident:      var(--error-500);
  --type-incident-bg:   var(--error-100);
  --type-incident-text: var(--error-800);
  --type-change:        #8B5CF6;
  --type-change-bg:     #EDE9FE;
  --type-change-text:   #5B21B6;
  --type-new:           #10B981;
  --type-new-bg:        #D1FAE5;
  --type-new-text:      #065F46;
  --type-data:          var(--warning-500);
  --type-data-bg:       var(--warning-100);
  --type-data-text:     var(--warning-800);
  --type-migration:     var(--accent-500);
  --type-migration-bg:  var(--accent-100);
  --type-migration-text: var(--accent-800);
  --type-study:         var(--gray-500);
  --type-study-bg:      var(--gray-100);
  --type-study-text:    var(--gray-700);

  /* ── Typography ── */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  --font-size-2xs: 0.625rem;  /* 10px */
  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.75rem;   /* 28px – KPI values */
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-wide:  0.025em;

  /* ── Spacing (4px base) ── */
  --space-0h: 2px;            /* half-step for tight padding */
  --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 */

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

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* Interactive shadow states */
  --shadow-hover-sm:  0 2px 4px rgba(0,0,0,0.06);
  --shadow-hover-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-hover-lg:  0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-accent-sm: 0 1px 3px rgba(37,99,235,0.3);
  --shadow-accent-md: 0 2px 6px rgba(37,99,235,0.35);
  --shadow-modal:     0 24px 48px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);

  /* ── Focus Ring ── */
  --focus-ring-color:  var(--accent-500);
  --focus-ring-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--focus-ring-color);
  --focus-ring-inset:  0 0 0 3px rgba(59,130,246,0.12);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ── Z-index ── */
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-panel:    300;
  --z-overlay:  400;
  --z-modal:    500;

  /* ── Layout ── */
  --header-height: 60px;
  --panel-width:   560px;
  --content-max:   1600px;

  /* ── Surfaces ── */
  --bg-app:           #f5f7fb;
  --bg-primary:       #ffffff;
  --bg-surface:       #fafbfd;
  --bg-surface-hover: #f0f4fa;
}