/* ==========================================================================
   מסירה חכמה — design tokens
   Light is the default. Dark applies via [data-theme="dark"] (any subtree)
   or prefers-color-scheme when no explicit light theme is chosen.
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- Brand ---------------------------------------------------------- */
  --ink: #0E1A3A;
  --ink-2: #14234B;
  --ink-3: #1C2E5E;
  --ink-text: #E9EDF8;
  --ink-muted: #9AA7C7;
  --ink-border: rgba(255, 255, 255, 0.08);
  --ink-hover: rgba(255, 255, 255, 0.06);
  --ink-active: rgba(255, 255, 255, 0.11);

  --primary: #2F5BEA;
  --primary-hover: #2449C8;
  --primary-active: #1E3DAA;
  --primary-soft: #E8EEFF;
  --primary-soft-2: #D7E1FF;
  --primary-text: #2449C8;
  --primary-ring: rgba(47, 91, 234, 0.28);
  --on-primary: #FFFFFF;

  /* ---- Semantic ------------------------------------------------------- */
  --success: #0E9F6E;
  --success-hover: #0B8A5F;
  --success-soft: #E4F6EF;
  --success-text: #047857;
  --warning: #D97706;
  --warning-hover: #B96504;
  --warning-soft: #FEF3E2;
  --warning-text: #9A5806;
  --danger: #DC2626;
  --danger-hover: #C01F1F;
  --danger-soft: #FDECEC;
  --danger-text: #B91C1C;
  --danger-ring: rgba(220, 38, 38, 0.22);
  --info: #0284C7;
  --info-soft: #E2F2FB;
  --info-text: #0369A1;

  /* ---- Surfaces & text ----------------------------------------------- */
  --canvas: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-3: #EFF2F8;
  --surface-sunken: #EBEFF6;
  --surface-overlay: rgba(255, 255, 255, 0.82);
  --surface-raised: #FFFFFF;
  --border: #E3E8F2;
  --border-subtle: #EDF0F6;
  --border-strong: #CDD5E3;
  --hc-border: #4B5563;
  --text: #111827;
  --text-muted: #5B6478;
  --text-subtle: #687185;
  --text-placeholder: #6E778A;
  --text-inverse: #FFFFFF;
  --backdrop: rgba(14, 26, 58, 0.42);
  --skeleton: #E8ECF4;
  --skeleton-shine: rgba(255, 255, 255, 0.65);
  --selection: rgba(47, 91, 234, 0.18);
  --scrollbar: #C9D1E0;
  --scrollbar-hover: #A9B3C7;
  --paper: #FFFFFF;
  --paper-line: #C5CDDD;
  --paper-ink: #0B1A4A;
  --mark: #FFF1B8;
  --mark-text: #3D2E00;
  --link-highlight: #FFF3A3;

  /* ---- Stage colours (solid · soft background · text on soft) -------- */
  --stage-draft: #D97706;        --stage-draft-soft: #FEF3C7;        --stage-draft-text: #8A4B06;
  --stage-on_hold: #64748B;      --stage-on_hold-soft: #EEF2F6;      --stage-on_hold-text: #334155;
  --stage-pending: #0EA5E9;      --stage-pending-soft: #E0F2FE;      --stage-pending-text: #075985;
  --stage-offered: #0284C7;      --stage-offered-soft: #DDEFFC;      --stage-offered-text: #0B5281;
  --stage-unassigned: #DC2626;   --stage-unassigned-soft: #FEE2E2;   --stage-unassigned-text: #991B1B;
  --stage-assigned: #4F46E5;     --stage-assigned-soft: #E0E7FF;     --stage-assigned-text: #3730A3;
  --stage-in_progress: #7C3AED;  --stage-in_progress-soft: #EDE9FE;  --stage-in_progress-text: #5B21B6;
  --stage-served: #0D9488;       --stage-served-soft: #CCFBF1;       --stage-served-text: #115E59;
  --stage-completed: #16A34A;    --stage-completed-soft: #DCFCE7;    --stage-completed-text: #166534;
  --stage-failed: #E11D48;       --stage-failed-soft: #FFE4E6;       --stage-failed-text: #9F1239;
  --stage-cancelled: #6B7280;    --stage-cancelled-soft: #F1F2F4;    --stage-cancelled-text: #374151;

  /* ---- Courier tiers -------------------------------------------------- */
  --tier-starter: #64748B;   --tier-starter-soft: #EEF2F6;
  --tier-bronze: #A8572A;    --tier-bronze-soft: #FBEDE4;
  --tier-silver: #64748B;    --tier-silver-soft: #EEF1F5;
  --tier-gold: #A87405;      --tier-gold-soft: #FDF3D7;
  --tier-platinum: #2E7FA3;  --tier-platinum-soft: #E1F2F8;

  /* ---- Elevation (soft, layered) ------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 10px 20px -6px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 10px 20px -6px rgba(16, 24, 40, 0.10), 0 24px 40px -12px rgba(16, 24, 40, 0.14);
  --shadow-xl: 0 4px 8px rgba(14, 26, 58, 0.05), 0 18px 36px -8px rgba(14, 26, 58, 0.16), 0 40px 72px -20px rgba(14, 26, 58, 0.26);
  --shadow-inset: inset 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 24, 40, 0.14);
  --shadow-ring: 0 0 0 1px rgba(16, 24, 40, 0.04);

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Heebo Variable", "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-readable: Arial, "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-body: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Spacing (4-pt) ------------------------------------------------ */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Layout -------------------------------------------------------- */
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --mobile-header-h: 56px;
  --bottomnav-h: 66px;
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --courier-max: 520px;
  --page-pad: var(--space-8);
  --control-h-sm: 32px;
  --control-h: 42px;
  --control-h-lg: 50px;
  --touch: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 160ms;
  --dur-3: 200ms;
  --dur-4: 220ms;
  --dur-5: 320ms;

  /* ---- Z-index scale ------------------------------------------------- */
  --z-base: 1;
  --z-raised: 5;
  --z-sticky: 20;
  --z-header: 30;
  --z-sidebar: 40;
  --z-dropdown: 50;
  --z-overlay: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-popover: 90;
  --z-toast: 100;
  --z-tooltip: 110;
  --z-skip: 120;

  /* ---- Focus --------------------------------------------------------- */
  --focus-color: var(--primary);
  --focus-width: 2px;
  --focus-offset: 2px;

  --font-scale: 1;
}

/* ==========================================================================
   Dark theme — explicit attribute (works on any subtree, e.g. the gallery)
   ========================================================================== */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #080E1B;
  --ink-2: #0D1527;
  --ink-3: #142039;
  --ink-text: #E6EAF4;
  --ink-muted: #8E9BB8;
  --ink-border: rgba(255, 255, 255, 0.06);
  --ink-hover: rgba(255, 255, 255, 0.05);
  --ink-active: rgba(255, 255, 255, 0.09);
  --primary: #3D68F0;
  --primary-hover: #5279F3;
  --primary-active: #6587F5;
  --primary-soft: rgba(91, 127, 245, 0.16);
  --primary-soft-2: rgba(91, 127, 245, 0.27);
  --primary-text: #9AB2FF;
  --primary-ring: rgba(120, 152, 255, 0.42);
  --on-primary: #FFFFFF;
  --success: #12A877;
  --success-hover: #17BA85;
  --success-soft: rgba(16, 185, 129, 0.14);
  --success-text: #63DDB0;
  --warning: #E08A10;
  --warning-hover: #EC9A26;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --warning-text: #F8BE5E;
  --danger: #E5484D;
  --danger-hover: #EC5E62;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --danger-text: #FF9393;
  --danger-ring: rgba(239, 68, 68, 0.35);
  --info: #1C9AD6;
  --info-soft: rgba(14, 165, 233, 0.14);
  --info-text: #74CDF5;
  --canvas: #0B1220;
  --surface: #111A2D;
  --surface-2: #142036;
  --surface-3: #1A2741;
  --surface-sunken: #0D1526;
  --surface-overlay: rgba(17, 26, 45, 0.80);
  --surface-raised: #162239;
  --border: #223050;
  --border-subtle: #1A2641;
  --border-strong: #31426A;
  --hc-border: #A3AEC4;
  --text: #E8ECF5;
  --text-muted: #9DA9C1;
  --text-subtle: #8C98B0;
  --text-placeholder: #7F8BA3;
  --text-inverse: #0B1220;
  --backdrop: rgba(2, 6, 16, 0.62);
  --skeleton: #1A2640;
  --skeleton-shine: rgba(255, 255, 255, 0.06);
  --selection: rgba(110, 145, 255, 0.32);
  --scrollbar: #2B3A5C;
  --scrollbar-hover: #3B4D75;
  --paper: #F6F7FA;
  --paper-line: #B9C2D4;
  --paper-ink: #0B1A4A;
  --mark: rgba(250, 204, 21, 0.28);
  --mark-text: #FFF3C4;
  --link-highlight: rgba(250, 204, 21, 0.3);

  --stage-draft: #F59E0B;        --stage-draft-soft: rgba(245, 158, 11, 0.16);       --stage-draft-text: #FCD34D;
  --stage-on_hold: #94A3B8;      --stage-on_hold-soft: rgba(148, 163, 184, 0.16);    --stage-on_hold-text: #CBD5E1;
  --stage-pending: #38BDF8;      --stage-pending-soft: rgba(56, 189, 248, 0.15);     --stage-pending-text: #7DD3FC;
  --stage-offered: #0EA5E9;      --stage-offered-soft: rgba(14, 165, 233, 0.17);     --stage-offered-text: #7CCBF6;
  --stage-unassigned: #F05252;   --stage-unassigned-soft: rgba(240, 82, 82, 0.17);   --stage-unassigned-text: #FCA5A5;
  --stage-assigned: #818CF8;     --stage-assigned-soft: rgba(129, 140, 248, 0.17);   --stage-assigned-text: #B4BCFC;
  --stage-in_progress: #A78BFA;  --stage-in_progress-soft: rgba(167, 139, 250, 0.17); --stage-in_progress-text: #CDBEFD;
  --stage-served: #2DD4BF;       --stage-served-soft: rgba(45, 212, 191, 0.15);      --stage-served-text: #7FE9DA;
  --stage-completed: #22C55E;    --stage-completed-soft: rgba(34, 197, 94, 0.15);    --stage-completed-text: #86EFAC;
  --stage-failed: #FB7185;       --stage-failed-soft: rgba(251, 113, 133, 0.16);     --stage-failed-text: #FDA4AF;
  --stage-cancelled: #9CA3AF;    --stage-cancelled-soft: rgba(156, 163, 175, 0.14);  --stage-cancelled-text: #D1D5DB;

  --tier-starter: #94A3B8;   --tier-starter-soft: rgba(148, 163, 184, 0.15);
  --tier-bronze: #E0915F;    --tier-bronze-soft: rgba(224, 145, 95, 0.15);
  --tier-silver: #B8C3D4;    --tier-silver-soft: rgba(184, 195, 212, 0.14);
  --tier-gold: #F2C14E;      --tier-gold-soft: rgba(242, 193, 78, 0.15);
  --tier-platinum: #7DD3EE;  --tier-platinum-soft: rgba(125, 211, 238, 0.15);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -10px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.35), 0 30px 60px -16px rgba(0, 0, 0, 0.7);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.03);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #080E1B;
    --ink-2: #0D1527;
    --ink-3: #142039;
    --ink-text: #E6EAF4;
    --ink-muted: #8E9BB8;
    --ink-border: rgba(255, 255, 255, 0.06);
    --ink-hover: rgba(255, 255, 255, 0.05);
    --ink-active: rgba(255, 255, 255, 0.09);
    --primary: #3D68F0;
    --primary-hover: #5279F3;
    --primary-active: #6587F5;
    --primary-soft: rgba(91, 127, 245, 0.16);
    --primary-soft-2: rgba(91, 127, 245, 0.27);
    --primary-text: #9AB2FF;
    --primary-ring: rgba(120, 152, 255, 0.42);
    --on-primary: #FFFFFF;
    --success: #12A877;
    --success-hover: #17BA85;
    --success-soft: rgba(16, 185, 129, 0.14);
    --success-text: #63DDB0;
    --warning: #E08A10;
    --warning-hover: #EC9A26;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --warning-text: #F8BE5E;
    --danger: #E5484D;
    --danger-hover: #EC5E62;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --danger-text: #FF9393;
    --danger-ring: rgba(239, 68, 68, 0.35);
    --info: #1C9AD6;
    --info-soft: rgba(14, 165, 233, 0.14);
    --info-text: #74CDF5;
    --canvas: #0B1220;
    --surface: #111A2D;
    --surface-2: #142036;
    --surface-3: #1A2741;
    --surface-sunken: #0D1526;
    --surface-overlay: rgba(17, 26, 45, 0.80);
    --surface-raised: #162239;
    --border: #223050;
    --border-subtle: #1A2641;
    --border-strong: #31426A;
    --hc-border: #A3AEC4;
    --text: #E8ECF5;
    --text-muted: #9DA9C1;
    --text-subtle: #8C98B0;
    --text-placeholder: #7F8BA3;
    --text-inverse: #0B1220;
    --backdrop: rgba(2, 6, 16, 0.62);
    --skeleton: #1A2640;
    --skeleton-shine: rgba(255, 255, 255, 0.06);
    --selection: rgba(110, 145, 255, 0.32);
    --scrollbar: #2B3A5C;
    --scrollbar-hover: #3B4D75;
    --paper: #F6F7FA;
    --paper-line: #B9C2D4;
    --paper-ink: #0B1A4A;
    --mark: rgba(250, 204, 21, 0.28);
    --mark-text: #FFF3C4;
    --link-highlight: rgba(250, 204, 21, 0.3);

    --stage-draft: #F59E0B;        --stage-draft-soft: rgba(245, 158, 11, 0.16);       --stage-draft-text: #FCD34D;
    --stage-on_hold: #94A3B8;      --stage-on_hold-soft: rgba(148, 163, 184, 0.16);    --stage-on_hold-text: #CBD5E1;
    --stage-pending: #38BDF8;      --stage-pending-soft: rgba(56, 189, 248, 0.15);     --stage-pending-text: #7DD3FC;
    --stage-offered: #0EA5E9;      --stage-offered-soft: rgba(14, 165, 233, 0.17);     --stage-offered-text: #7CCBF6;
    --stage-unassigned: #F05252;   --stage-unassigned-soft: rgba(240, 82, 82, 0.17);   --stage-unassigned-text: #FCA5A5;
    --stage-assigned: #818CF8;     --stage-assigned-soft: rgba(129, 140, 248, 0.17);   --stage-assigned-text: #B4BCFC;
    --stage-in_progress: #A78BFA;  --stage-in_progress-soft: rgba(167, 139, 250, 0.17); --stage-in_progress-text: #CDBEFD;
    --stage-served: #2DD4BF;       --stage-served-soft: rgba(45, 212, 191, 0.15);      --stage-served-text: #7FE9DA;
    --stage-completed: #22C55E;    --stage-completed-soft: rgba(34, 197, 94, 0.15);    --stage-completed-text: #86EFAC;
    --stage-failed: #FB7185;       --stage-failed-soft: rgba(251, 113, 133, 0.16);     --stage-failed-text: #FDA4AF;
    --stage-cancelled: #9CA3AF;    --stage-cancelled-soft: rgba(156, 163, 175, 0.14);  --stage-cancelled-text: #D1D5DB;

    --tier-starter: #94A3B8;   --tier-starter-soft: rgba(148, 163, 184, 0.15);
    --tier-bronze: #E0915F;    --tier-bronze-soft: rgba(224, 145, 95, 0.15);
    --tier-silver: #B8C3D4;    --tier-silver-soft: rgba(184, 195, 212, 0.14);
    --tier-gold: #F2C14E;      --tier-gold-soft: rgba(242, 193, 78, 0.15);
    --tier-platinum: #7DD3EE;  --tier-platinum-soft: rgba(125, 211, 238, 0.15);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 14px -4px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -10px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.35), 0 30px 60px -16px rgba(0, 0, 0, 0.7);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
}

/* ==========================================================================
   Accessibility preferences (set by js/lib/a11y.js / the boot script)
   ========================================================================== */
:root[data-font-scale="1"] { --font-scale: 1.125; }
:root[data-font-scale="2"] { --font-scale: 1.25; }
:root[data-font-scale="3"] { --font-scale: 1.375; }
:root[data-font-scale="4"] { --font-scale: 1.5; }

:root[data-readable-font="true"] {
  --font-sans: var(--font-readable);
}

/* High contrast: stronger borders and text in either theme. Must stay last. */
:root[data-contrast="high"] {
  --border: var(--hc-border);
  --border-strong: var(--hc-border);
  --border-subtle: var(--hc-border);
  --text-muted: var(--text);
  --text-subtle: var(--text);
  --text-placeholder: var(--text-muted);
  --focus-width: 3px;
  --shadow-sm: none;
  --shadow-xs: none;
}
:root[data-contrast="high"]:not([data-theme="dark"]) {
  --text: #000000;
  --primary: #1A3FC0;
  --primary-hover: #12319C;
  --primary-text: #12319C;
  --canvas: #FFFFFF;
}
:root[data-contrast="high"][data-theme="dark"] {
  --text: #FFFFFF;
  --canvas: #000000;
  --surface: #0A0F1A;
  --primary-text: #C3D2FF;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) {
    --text: #FFFFFF;
    --canvas: #000000;
    --surface: #0A0F1A;
    --primary: #3D68F0;
    --primary-text: #C3D2FF;
  }
}