/* ════════════════════════════════════════════════════════════════
   JERP — COLOR TOKENS
   Ported from apps/web/src/theme.css (source of truth).

   Two layers:
   1. Base scales      → --color-brand-*, --color-neutral-* (raw hex)
   2. Themeable aliases → --brand-*, --neutral-*, semantic, status
      These are what UI reads. Dark mode re-points the aliases only,
      so components flip without touching the base scales.

   Brand defaults to EMERALD but is customised per-tenant at runtime
   by re-setting --color-brand-500. Never hardcode hex — always read
   a token so per-tenant branding + dark mode keep working.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND (default Emerald) ─────────────────────────── */
  --color-brand-50:  #ECFDF5;
  --color-brand-100: #D1FAE5;
  --color-brand-200: #A7F3D0;
  --color-brand-300: #6EE7B7;
  --color-brand-400: #34D399;
  --color-brand-500: #10B981;   /* primary */
  --color-brand-600: #059669;   /* primary hover */
  --color-brand-700: #047857;   /* primary pressed / brand text */
  --color-brand-800: #065F46;
  --color-brand-900: #064E3B;

  --brand-50:  var(--color-brand-50);
  --brand-100: var(--color-brand-100);
  --brand-200: var(--color-brand-200);
  --brand-300: var(--color-brand-300);
  --brand-400: var(--color-brand-400);
  --brand-500: var(--color-brand-500);
  --brand-600: var(--color-brand-600);
  --brand-700: var(--color-brand-700);
  --brand-800: var(--color-brand-800);
  --brand-900: var(--color-brand-900);

  /* ─── NEUTRAL (cool grey) ─────────────────────────────── */
  --color-neutral-0:   #FFFFFF;  /* card surface */
  --color-neutral-50:  #F9FAFB;  /* page bg / input fill */
  --color-neutral-100: #F3F4F6;  /* hover, divider gap */
  --color-neutral-200: #E5E7EB;  /* standard border */
  --color-neutral-300: #D1D5DB;  /* stronger border */
  --color-neutral-400: #9CA3AF;  /* placeholder, uppercase label, dim icon */
  --color-neutral-500: #6B7280;  /* secondary text */
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;  /* body text */
  --color-neutral-800: #1F2937;  /* strong text */
  --color-neutral-900: #111827;  /* heading */

  --neutral-0:   var(--color-neutral-0);
  --neutral-50:  var(--color-neutral-50);
  --neutral-100: var(--color-neutral-100);
  --neutral-200: var(--color-neutral-200);
  --neutral-300: var(--color-neutral-300);
  --neutral-400: var(--color-neutral-400);
  --neutral-500: var(--color-neutral-500);
  --neutral-600: var(--color-neutral-600);
  --neutral-700: var(--color-neutral-700);
  --neutral-800: var(--color-neutral-800);
  --neutral-900: var(--color-neutral-900);

  /* ─── SEMANTIC (alert / status surfaces) ──────────────── */
  --color-success-bg:     #EDFAF3;
  --color-success-border: #6DD8A4;
  --color-success-text:   #166534;
  --color-success-icon:   #22C55E;

  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FCD34D;
  --color-warning-text:   #854D0E;
  --color-warning-icon:   #F59E0B;

  --color-danger-bg:      #FEF2F2;
  --color-danger-border:  #FCA5A5;
  --color-danger-text:    #991B1B;
  --color-danger-icon:    #EF4444;

  --color-info-bg:        #ECFDF5;
  --color-info-border:    #A7F3D0;
  --color-info-text:      #065F46;
  --color-info-icon:      #10B981;

  --success-bg: var(--color-success-bg);
  --success-border: var(--color-success-border);
  --success-text: var(--color-success-text);
  --warning-bg: var(--color-warning-bg);
  --warning-border: var(--color-warning-border);
  --warning-text: var(--color-warning-text);
  --danger-bg: var(--color-danger-bg);
  --danger-border: var(--color-danger-border);
  --danger-text: var(--color-danger-text);
  --info-bg: var(--color-info-bg);
  --info-border: var(--color-info-border);
  --info-text: var(--color-info-text);

  /* ─── STATUS BADGE (document lifecycle) ───────────────── */
  --status-draft-bg:       #F3F4F6; --status-draft-text:       #374151; --status-draft-dot:       #9CA3AF;
  --status-pending-bg:     #FFFBEB; --status-pending-text:     #854D0E; --status-pending-dot:     #F59E0B;
  --status-approved-bg:    #ECFDF5; --status-approved-text:    #065F46; --status-approved-dot:    #10B981;
  --status-confirmed-bg:   #ECFDF5; --status-confirmed-text:   #047857; --status-confirmed-dot:   #059669;
  --status-in-progress-bg: #F0FDF4; --status-in-progress-text: #065F46; --status-in-progress-dot: #34D399;
  --status-done-bg:        #F0FDF4; --status-done-text:        #14532D; --status-done-dot:        #16A34A;
  --status-cancelled-bg:   #FEF2F2; --status-cancelled-text:   #991B1B; --status-cancelled-dot:   #EF4444;
  --status-overdue-bg:     #FFF7ED; --status-overdue-text:     #7C2D12; --status-overdue-dot:     #F97316;

  /* ─── SEMANTIC SURFACE ALIASES (convenience) ──────────── */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-hover:  var(--neutral-100);
  --surface-sunken: var(--neutral-50);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --text-heading:   var(--neutral-900);
  --text-strong:    var(--neutral-800);
  --text-body:      var(--neutral-700);
  --text-secondary: var(--neutral-500);
  --text-muted:     var(--neutral-400);
  --text-on-brand:  #FFFFFF;
  --accent:         var(--brand-500);
  --accent-hover:   var(--brand-600);
  --accent-subtle:  var(--brand-50);

  /* ─── PRIMARY BUTTON ──────────────────────────────────── */
  --color-btn-primary-bg:      var(--color-brand-500);
  --color-btn-primary-hover:   var(--color-brand-600);
  --color-btn-primary-pressed: var(--color-brand-700);
  --color-btn-primary-text:    #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — re-points themeable aliases only.
   Neutral scale is INVERTED: low index = dark surface, high = light text.
   Base --color-brand-* is left untouched so the per-tenant CTA keeps
   its vivid accent; brand tints use color-mix onto the dark surface.
   ════════════════════════════════════════════════════════════════ */
.dark {
  color-scheme: dark;

  --neutral-0:   #19212C;  /* card surface */
  --neutral-50:  #0E141B;  /* page bg (darkest) */
  --neutral-100: #232C38;  /* hover / subtle fill */
  --neutral-200: #2D3744;  /* border */
  --neutral-300: #3A4553;  /* stronger border */
  --neutral-400: #828C9C;  /* dim icon / placeholder */
  --neutral-500: #9BA4B3;  /* dim text */
  --neutral-600: #B2BBC8;  /* secondary text */
  --neutral-700: #C4CCD8;  /* body text */
  --neutral-800: #DDE3EB;  /* strong text */
  --neutral-900: #F1F4F8;  /* heading / near-white */

  --brand-50:  color-mix(in srgb, var(--color-brand-500) 14%, transparent);
  --brand-100: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
  --brand-200: color-mix(in srgb, var(--color-brand-500) 30%, transparent);
  --brand-300: color-mix(in srgb, var(--color-brand-500) 75%, white);
  --brand-400: color-mix(in srgb, var(--color-brand-500) 88%, white);
  --brand-500: var(--color-brand-500);
  --brand-600: color-mix(in srgb, var(--color-brand-500) 88%, white);
  --brand-700: color-mix(in srgb, var(--color-brand-500) 62%, white);
  --brand-800: color-mix(in srgb, var(--color-brand-500) 46%, white);
  --brand-900: color-mix(in srgb, var(--color-brand-500) 32%, white);

  --success-bg:     rgba(34, 197, 94, 0.14);
  --success-border: rgba(34, 197, 94, 0.40);
  --success-text:   #6EE7B7;
  --warning-bg:     rgba(245, 158, 11, 0.14);
  --warning-border: rgba(245, 158, 11, 0.40);
  --warning-text:   #FCD34D;
  --danger-bg:      rgba(239, 68, 68, 0.14);
  --danger-border:  rgba(239, 68, 68, 0.40);
  --danger-text:    #FCA5A5;
  --info-bg:        rgba(16, 185, 129, 0.14);
  --info-border:    rgba(16, 185, 129, 0.40);
  --info-text:      #6EE7B7;

  --status-draft-bg:       #232C38; --status-draft-text:       #C4CCD8; --status-draft-dot:       #6B7686;
  --status-pending-bg:     rgba(245, 158, 11, 0.16); --status-pending-text:     #FCD34D; --status-pending-dot:     #F59E0B;
  --status-approved-bg:    rgba(16, 185, 129, 0.16); --status-approved-text:    #6EE7B7; --status-approved-dot:    #10B981;
  --status-confirmed-bg:   rgba(5, 150, 105, 0.18);  --status-confirmed-text:   #6EE7B7; --status-confirmed-dot:   #059669;
  --status-in-progress-bg: rgba(52, 211, 153, 0.16); --status-in-progress-text: #6EE7B7; --status-in-progress-dot: #34D399;
  --status-done-bg:        rgba(22, 163, 74, 0.18);  --status-done-text:        #86EFAC; --status-done-dot:        #16A34A;
  --status-cancelled-bg:   rgba(239, 68, 68, 0.16);  --status-cancelled-text:   #FCA5A5; --status-cancelled-dot:   #EF4444;
  --status-overdue-bg:     rgba(249, 115, 22, 0.16); --status-overdue-text:     #FDBA74; --status-overdue-dot:     #F97316;
}