/*
 * ScopePad design tokens (Design System Poster v1.0, "Industrial Minimalism").
 * Raw palette = --sp-* scale values. Semantic tokens (--sp-bg, --sp-surface, --sp-text ...) are what
 * components use; they flip between light and dark.
 * Theme selection: prefers-color-scheme by default; [data-theme="light"|"dark"] on <html> overrides it.
 * Keep the dark block in sync in both places below (media query + explicit attribute).
 */
:root {
  /* Brand */
  --sp-primary: #1F2A37; --sp-accent: #F97316; --sp-white: #FFFFFF;
  /* Neutral scale (light) */
  --sp-gray-50:#F8FAFC; --sp-gray-100:#F1F5F9; --sp-gray-200:#E2E8F0; --sp-gray-300:#CBD5E1;
  --sp-gray-400:#94A3B8; --sp-gray-500:#5E6C80; --sp-gray-600:#475569; --sp-gray-700:#334155;
  --sp-gray-800:#1F2A37; --sp-gray-900:#0F172A;
  /* Raw semantic */
  --sp-success:#16A34A; --sp-warning:#F59E0B; --sp-danger:#EF4444; --sp-info:#2563EB;

  /* Spacing (4px base) */
  --sp-space-0:0; --sp-space-1:4px; --sp-space-2:8px; --sp-space-3:12px; --sp-space-4:16px;
  --sp-space-5:24px; --sp-space-6:32px; --sp-space-7:48px; --sp-space-8:64px;
  /* Radius */
  --sp-radius-1:4px; --sp-radius-2:8px; --sp-radius-3:12px; --sp-radius-4:16px; --sp-radius-pill:999px;
  /* Type */
  --sp-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --sp-fs-display:56px; --sp-lh-display:64px;
  --sp-fs-h1:36px; --sp-lh-h1:44px;
  --sp-fs-h2:28px; --sp-lh-h2:36px;
  --sp-fs-h3:24px; --sp-lh-h3:32px;
  --sp-fs-h4:20px; --sp-lh-h4:28px;
  --sp-fs-body:16px; --sp-lh-body:24px;
  --sp-fs-small:14px; --sp-lh-small:20px;
  --sp-fs-caption:12px; --sp-lh-caption:16px;
  --sp-target:44px;          /* minimum touch target */
  --sp-motion:150ms;
  --sp-rail-w:88px; --sp-sidebar-w:248px; --sp-topbar-h:56px; --sp-tabbar-h:60px;

  /* Semantic surfaces (light) */
  --sp-bg: var(--sp-gray-50);
  --sp-surface: var(--sp-white);
  --sp-surface-raised: var(--sp-white);
  --sp-surface-sunken: var(--sp-gray-100);
  --sp-border: var(--sp-gray-200);
  --sp-border-strong: var(--sp-gray-300);
  --sp-field-border: #7E8DA3;     /* input outline: 3.4:1 on white (WCAG 1.4.11) */
  --sp-text: var(--sp-gray-800);
  --sp-text-muted: var(--sp-gray-500);
  --sp-text-faint: var(--sp-gray-400);
  --sp-text-on-accent: #111827;   /* dark ink on orange: 7.3:1 (white on #F97316 would be 2.8:1) */
  --sp-overlay: rgba(15, 23, 42, 0.5);

  /* Accent states */
  --sp-accent-hover: #FB8A3C;
  --sp-accent-active: #EA580C;
  --sp-accent-soft: #FFEDD5;
  --sp-accent-soft-text: #9A3412;
  --sp-accent-disabled: #FDD7B4;

  /* Interactive */
  --sp-focus-ring: #2563EB;
  --sp-focus-ring-width: 3px;
  --sp-disabled-bg: var(--sp-gray-100);
  --sp-disabled-text: var(--sp-gray-400);
  --sp-secondary-border: var(--sp-info);
  --sp-secondary-text: #1D4ED8;

  /* Status text/bg for feedback (banners, destructive buttons) */
  --sp-success-bg:#DCFCE7; --sp-success-text:#166534; --sp-success-border:#86EFAC;
  --sp-warning-bg:#FEF3C7; --sp-warning-text:#92400E; --sp-warning-border:#FCD34D;
  --sp-danger-bg:#FEE2E2; --sp-danger-text:#B91C1C; --sp-danger-border:#FCA5A5;
  --sp-info-bg:#DBEAFE; --sp-info-text:#1E40AF; --sp-info-border:#93C5FD;

  /* Document status chips: draft sent approved declined invoiced paid overdue */
  --sp-status-draft-bg:#F1F5F9;    --sp-status-draft-fg:#475569;
  --sp-status-sent-bg:#DBEAFE;     --sp-status-sent-fg:#1E40AF;
  --sp-status-approved-bg:#DCFCE7; --sp-status-approved-fg:#166534;
  --sp-status-declined-bg:#FEE2E2; --sp-status-declined-fg:#B91C1C;
  --sp-status-invoiced-bg:#E0E7FF; --sp-status-invoiced-fg:#3730A3;
  --sp-status-paid-bg:#D1FAE5;     --sp-status-paid-fg:#065F46;
  --sp-status-overdue-bg:#FFE4E6;  --sp-status-overdue-fg:#9F1239;
  /* Extra states shared by jobs/invoices */
  --sp-status-partial-bg:#FEF3C7;  --sp-status-partial-fg:#92400E;
  --sp-status-void-bg:#E2E8F0;     --sp-status-void-fg:#475569;
  --sp-status-archived-bg:#E2E8F0; --sp-status-archived-fg:#475569;

  /* Elevation */
  --sp-shadow-1:0 1px 2px #0B122012;
  --sp-shadow-2:0 4px 12px #0B12201A;
  --sp-shadow-3:0 8px 24px #0B122026;

  color-scheme: light;
}

/* Dark palette. Used by the OS preference (unless forced light) and by [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sp-primary:#F8FAFC;
    --sp-gray-50:#0B1220; --sp-gray-100:#111827; --sp-gray-200:#1F2937; --sp-gray-300:#374151;
    --sp-gray-400:#4B5563; --sp-gray-500:#6B7280; --sp-gray-600:#9CA3AF; --sp-gray-700:#D1D5DB;
    --sp-gray-800:#E5E7EB; --sp-gray-900:#F3F4F6;
    --sp-success:#22C55E; --sp-warning:#FBBF24; --sp-danger:#F87171; --sp-info:#3B82F6;
    --sp-bg:#0B1220; --sp-surface:#111827; --sp-surface-raised:#1F2937; --sp-surface-sunken:#0B1220;
    --sp-border:#1F2937; --sp-border-strong:#374151; --sp-field-border:#707B8A;
    --sp-text:#F8FAFC; --sp-text-muted:#9CA3AF; --sp-text-faint:#6B7280;
    --sp-text-on-accent:#111827; --sp-overlay:rgba(2, 6, 14, 0.7);
    --sp-accent-hover:#FB923C; --sp-accent-active:#EA580C;
    --sp-accent-soft:#3B1D0A; --sp-accent-soft-text:#FDBA74; --sp-accent-disabled:#5A3314;
    --sp-focus-ring:#60A5FA;
    --sp-disabled-bg:#1F2937; --sp-disabled-text:#6B7280;
    --sp-secondary-border:#60A5FA; --sp-secondary-text:#93C5FD;
    --sp-success-bg:#0F2E1B; --sp-success-text:#86EFAC; --sp-success-border:#166534;
    --sp-warning-bg:#33260A; --sp-warning-text:#FCD34D; --sp-warning-border:#92400E;
    --sp-danger-bg:#3A1416; --sp-danger-text:#FCA5A5; --sp-danger-border:#991B1B;
    --sp-info-bg:#10244A; --sp-info-text:#93C5FD; --sp-info-border:#1E40AF;
    --sp-status-draft-bg:#1F2937;    --sp-status-draft-fg:#CBD5E1;
    --sp-status-sent-bg:#10244A;     --sp-status-sent-fg:#93C5FD;
    --sp-status-approved-bg:#0F2E1B; --sp-status-approved-fg:#86EFAC;
    --sp-status-declined-bg:#3A1416; --sp-status-declined-fg:#FCA5A5;
    --sp-status-invoiced-bg:#1E1B4B; --sp-status-invoiced-fg:#A5B4FC;
    --sp-status-paid-bg:#064E3B;     --sp-status-paid-fg:#6EE7B7;
    --sp-status-overdue-bg:#4C0519;  --sp-status-overdue-fg:#FDA4AF;
    --sp-status-partial-bg:#33260A;  --sp-status-partial-fg:#FCD34D;
    --sp-status-void-bg:#1F2937;     --sp-status-void-fg:#9CA3AF;
    --sp-status-archived-bg:#1F2937; --sp-status-archived-fg:#9CA3AF;
    --sp-shadow-1:0 1px 2px #00000066; --sp-shadow-2:0 4px 12px #00000080; --sp-shadow-3:0 8px 24px #000000A0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sp-primary:#F8FAFC;
  --sp-gray-50:#0B1220; --sp-gray-100:#111827; --sp-gray-200:#1F2937; --sp-gray-300:#374151;
  --sp-gray-400:#4B5563; --sp-gray-500:#6B7280; --sp-gray-600:#9CA3AF; --sp-gray-700:#D1D5DB;
  --sp-gray-800:#E5E7EB; --sp-gray-900:#F3F4F6;
  --sp-success:#22C55E; --sp-warning:#FBBF24; --sp-danger:#F87171; --sp-info:#3B82F6;
  --sp-bg:#0B1220; --sp-surface:#111827; --sp-surface-raised:#1F2937; --sp-surface-sunken:#0B1220;
  --sp-border:#1F2937; --sp-border-strong:#374151; --sp-field-border:#707B8A;
  --sp-text:#F8FAFC; --sp-text-muted:#9CA3AF; --sp-text-faint:#6B7280;
  --sp-text-on-accent:#111827; --sp-overlay:rgba(2, 6, 14, 0.7);
  --sp-accent-hover:#FB923C; --sp-accent-active:#EA580C;
  --sp-accent-soft:#3B1D0A; --sp-accent-soft-text:#FDBA74; --sp-accent-disabled:#5A3314;
  --sp-focus-ring:#60A5FA;
  --sp-disabled-bg:#1F2937; --sp-disabled-text:#6B7280;
  --sp-secondary-border:#60A5FA; --sp-secondary-text:#93C5FD;
  --sp-success-bg:#0F2E1B; --sp-success-text:#86EFAC; --sp-success-border:#166534;
  --sp-warning-bg:#33260A; --sp-warning-text:#FCD34D; --sp-warning-border:#92400E;
  --sp-danger-bg:#3A1416; --sp-danger-text:#FCA5A5; --sp-danger-border:#991B1B;
  --sp-info-bg:#10244A; --sp-info-text:#93C5FD; --sp-info-border:#1E40AF;
  --sp-status-draft-bg:#1F2937;    --sp-status-draft-fg:#CBD5E1;
  --sp-status-sent-bg:#10244A;     --sp-status-sent-fg:#93C5FD;
  --sp-status-approved-bg:#0F2E1B; --sp-status-approved-fg:#86EFAC;
  --sp-status-declined-bg:#3A1416; --sp-status-declined-fg:#FCA5A5;
  --sp-status-invoiced-bg:#1E1B4B; --sp-status-invoiced-fg:#A5B4FC;
  --sp-status-paid-bg:#064E3B;     --sp-status-paid-fg:#6EE7B7;
  --sp-status-overdue-bg:#4C0519;  --sp-status-overdue-fg:#FDA4AF;
  --sp-status-partial-bg:#33260A;  --sp-status-partial-fg:#FCD34D;
  --sp-status-void-bg:#1F2937;     --sp-status-void-fg:#9CA3AF;
  --sp-status-archived-bg:#1F2937; --sp-status-archived-fg:#9CA3AF;
  --sp-shadow-1:0 1px 2px #00000066; --sp-shadow-2:0 4px 12px #00000080; --sp-shadow-3:0 8px 24px #000000A0;
  color-scheme: dark;
}