/* ═══════════════════════════════════════════════════════════════
   01-tokens.css — Design Tokens
   ─────────────────────────────────────────────────────────────
   Single source of truth for the entire UI.
   Every other module (02–09) and every .razor.css isolation
   file references these CSS custom properties.

   Sections:
     • Font family & type scale  (--text-2xs … --text-2xl)
     • Line-heights & font-weights
     • Colour palette             (--color-primary, --color-bg …)
     • Semantic / surface colours
     • Spacing scale              (--space-xs … --space-2xl)
     • Border-radius tokens       (--radius-sm … --radius-pill)
     • Shadow tokens              (--shadow-sm … --shadow-xl)
     • Z-index layers             (--z-dropdown … --z-toast)
     • Transition tokens

   Consumers: every component in the app.
   Loaded first in app.css — no dependencies.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Font family ── */
    --font-family: "Cairo", "Cairo Fallback", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* ── Type scale (optimised for readability) ── */
    --text-2xs: 0.625rem;
    /* 10px – nav badge */
    --text-xs: 0.6875rem;
    /* 11px – section labels, avatar initials */
    --text-sm: 0.75rem;
    /* 12px – timestamps, field errors */
    --text-base: 0.8125rem;
    /* 13px – form labels, collapse btn */
    --text-md: 0.875rem;
    /* 14px – body, inputs, table headers */
    --text-lg: 0.9375rem;
    /* 15px – panel titles */
    --text-xl: 1rem;
    /* 16px – table body, brand */
    --text-2xl: 1.25rem;
    /* 20px – drawer title */

    /* ── Line heights ── */
    --lh-tight: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* ── Font weights ── */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ── Semantic colors (WCAG AA verified) ── */
    --color-bg: #f1f5f9;
    --color-bg-subtle: #f8fafc;
    --color-kanban-column: #f5f5f5;
    --color-kanban-column-border: #efefef;
    --color-surface: #fff;
    --color-surface-footer: #fafafa;
    --color-text: #334155;
    /* 7.5:1 on white  */
    --color-text-strong: #101014;
    /* 17:1 on white — near-black brand ink */
    --color-text-secondary: #475569;
    /* 5.5:1 on white  */
    --color-text-muted: #64748b;
    /* 4.6:1 on white  */
    --color-text-faint: #94a3b8;
    /* decorative only */
    --color-text-dimmed: #94a3b8;
    /* alias for faint — used by tabs */
    --color-text-main: #334155;
    /* alias for text — used by tab hover */
    --color-chip-bg: #BDBDCA;
    /* neutral chip / compact pill background */
    --color-chip-text: #101014;
    /* chip/pill foreground */
    --color-primary: #2563eb;
    /* 4.6:1 on white — bumped from #3b82f6 */
    --color-primary-600: #2563eb;
    /* explicit shade — active tabs  */
    --color-primary-700: #1d4ed8;
    /* darker shade — active tab hover */
    --color-primary-ring: rgba(37, 99, 235, 0.18);
    --color-border: #e2e8f0;
    /* Standard gray-200 for reliable rendering */
    --color-border-light: #f1f5f9;
    --color-border-hover: #cbd5e1;
    /* slate-300 — hover emphasis */
    --color-surface-hover: #f8fafc;
    /* subtle hover lift */
    --color-error-border: #fca5a5;
    --color-error-focus: #f87171;
    --color-error-text: #dc2626;
    --color-error-bg: rgba(239, 68, 68, 0.12);
    --color-success-bg: #ecfdf5;
    --color-success-text: #065f46;
    --color-success-border: #a7f3d0;

    --color-warning-bg: #fffbeb;
    --color-warning-text: #b45309;
    --color-warning-border: #fde68a;

    --color-info-bg: #eff6ff;
    --color-info-text: #1e40af;
    --color-info-border: #dbeafe;

    --color-hold-bg: #fef2f2;
    --color-hold-text: #b91c1c;
    --color-hold-border: #fecaca;

    /* ══════════════════════════════════════════════════════════════
       Universal badge palette — theme-overridable.
       Category × state × channel (bg / text / border / dot).
       Defaults map onto the semantic color tokens above.
       The per-tenant theme editor overrides these at runtime
       by injecting a <style id="zimam-theme-overrides"> tag.
       ══════════════════════════════════════════════════════════════ */

    /* حالة التنفيذ · Status */
    --badge-status-new-bg: #BDBDCA;
    --badge-status-new-text: #101014;
    --badge-status-new-border: #6b6b75;
    --badge-status-new-dot: #101014;

    --badge-status-in-progress-bg: #BDBDCA;
    --badge-status-in-progress-text: #101014;
    --badge-status-in-progress-border: #6b6b75;
    --badge-status-in-progress-dot: #101014;

    --badge-status-review-bg: #BDBDCA;
    --badge-status-review-text: #101014;
    --badge-status-review-border: #6b6b75;
    --badge-status-review-dot: #101014;

    --badge-status-completed-bg: #BDBDCA;
    --badge-status-completed-text: #101014;
    --badge-status-completed-border: #6b6b75;
    --badge-status-completed-dot: #101014;

    --badge-status-blocked-bg: #BDBDCA;
    --badge-status-blocked-text: #101014;
    --badge-status-blocked-border: #6b6b75;
    --badge-status-blocked-dot: #101014;

    --badge-status-archived-bg: #BDBDCA;
    --badge-status-archived-text: #101014;
    --badge-status-archived-border: #6b6b75;
    --badge-status-archived-dot: #101014;

    /* الأولوية · Priority (heat scale) */
    --badge-priority-low-bg: var(--color-bg-subtle);
    --badge-priority-low-text: var(--color-text-secondary);
    --badge-priority-low-border: var(--color-border);
    --badge-priority-low-dot: var(--color-text-muted);

    --badge-priority-medium-bg: var(--color-warning-bg);
    --badge-priority-medium-text: var(--color-warning-text);
    --badge-priority-medium-border: var(--color-warning-border);
    --badge-priority-medium-dot: var(--color-warning-text);

    --badge-priority-high-bg: var(--color-error-bg);
    --badge-priority-high-text: var(--color-error-text);
    --badge-priority-high-border: var(--color-error-border);
    --badge-priority-high-dot: var(--color-error-text);

    /* الصحة · Health (traffic light) */
    --badge-health-not-started-bg: var(--color-bg-subtle);
    --badge-health-not-started-text: var(--color-text-muted);
    --badge-health-not-started-border: var(--color-border);
    --badge-health-not-started-dot: var(--color-text-muted);

    --badge-health-on-time-bg: var(--color-success-bg);
    --badge-health-on-time-text: var(--color-success-text);
    --badge-health-on-time-border: var(--color-success-border);
    --badge-health-on-time-dot: var(--color-success-text);

    --badge-health-slightly-late-bg: var(--color-warning-bg);
    --badge-health-slightly-late-text: var(--color-warning-text);
    --badge-health-slightly-late-border: var(--color-warning-border);
    --badge-health-slightly-late-dot: var(--color-warning-text);

    --badge-health-late-bg: var(--color-error-bg);
    --badge-health-late-text: var(--color-error-text);
    --badge-health-late-border: var(--color-error-border);
    --badge-health-late-dot: var(--color-error-text);

    --badge-health-completed-bg: var(--color-success-bg);
    --badge-health-completed-text: var(--color-success-text);
    --badge-health-completed-border: var(--color-success-border);
    --badge-health-completed-dot: var(--color-success-text);

    --badge-health-on-hold-bg: var(--color-bg-subtle);
    --badge-health-on-hold-text: var(--color-text-muted);
    --badge-health-on-hold-border: var(--color-border);
    --badge-health-on-hold-dot: var(--color-text-muted);

    /* ── Layout ── */
    --zimam-sidebar-width: 280px;
    --zimam-sidebar-collapsed-width: 72px;
    --zimam-header-height: 3.5rem;
    --space-page-x: 1.5rem;
    --space-page-y: 1.75rem;
    --space-section: 2.25rem;
    --space-card: 1.75rem;
    --space-card-lg: 2.25rem;
    --radius-xs: 0.25rem;
    /* 4px */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-card: 1.25rem;
    /* 20px */
    --radius-card-lg: 0.375rem;
    /* 6px */
    --radius-kanban-col: var(--radius-sm);
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-floating: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* ── Z-index scale ── */
    --z-sticky: 10;
    --z-drawer-scrim: 40;
    --z-sidebar: 50;
    --z-drawer: 50;
    --z-drawer-stacked: 51;
    --z-modal: 100;
    --z-toast: 110;

    /* ── Transitions ── */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* ── Forms & drawers ── */
    --form-field-gap: 1rem;
    --task-sheet-width: 520px;
    --task-sheet-duration: var(--duration-normal);
    --task-sheet-ease-out: var(--ease-out);
    --task-sheet-ease-in: var(--ease-in);
    --task-scrim-opacity: 0.4;
    --task-sheet-body-padding: 1rem 1.5rem;
    --task-sheet-header-padding: 0.875rem 1.5rem;
    --task-sheet-footer-padding: 0.875rem 1.5rem;

    /* ── Shared focus ring ── */
    --focus-ring: 2px solid var(--color-primary);
    --focus-offset: 2px;

    /* ── Scrollbar ── */
    --scrollbar-size: 6px;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-track: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark mode — toggled by zimamTheme.setMode('dark') (adds data-theme="dark"
   on <html>). Keeps semantic status colors mostly unchanged; inverts neutrals.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    --color-bg:            #0f172a;
    --color-bg-subtle:     #1e293b;
    --color-surface:       #1e293b;
    --color-surface-footer:#111827;

    --color-text:          #e2e8f0;
    --color-text-strong:   #f8fafc;
    --color-text-secondary:#cbd5e1;
    --color-text-muted:    #94a3b8;
    --color-text-faint:    #64748b;

    --color-border:        #334155;
    --color-border-light:  #1e293b;
    --color-border-hover:  #475569;

    --scrollbar-thumb:     #475569;
    --scrollbar-thumb-hover:#64748b;

    --shadow-sm:           0 1px 2px 0 rgba(0, 0, 0, 0.45);
    --shadow-floating:     0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}