/* ========================================================================== 
   Park ERP tokens
   Canonical visual values for light/dark themes and comfortable/compact density.
   This file intentionally follows design-system.css while legacy modules migrate.
   ========================================================================== */

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

    /* Premium organisational palette */
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #14283a;

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

    --color-accent-50: #ecfeff;
    --color-accent-100: #cffafe;
    --color-accent-200: #a5f3fc;
    --color-accent-300: #67e8f9;
    --color-accent-400: #22d3ee;
    --color-accent-500: #06b6d4;
    --color-accent-600: #0891b2;
    --color-accent-700: #0e7490;
    --color-accent-800: #155e75;
    --color-accent-900: #164e63;

    --color-canvas: #f3f6fa;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-subtle: #f8fafc;
    --color-surface-muted: #eef3f8;
    --color-surface-strong: #e3eaf2;
    --color-surface-inverse: #14283a;
    --color-surface-glass: rgb(255 255 255 / 88%);
    --color-surface-glass-strong: rgb(255 255 255 / 96%);
    --color-border-glass: rgb(255 255 255 / 82%);
    --color-border: #d8e1eb;
    --color-border-strong: #8796a8;
    --color-text: #334155;
    --color-text-secondary: #475569;
    --color-text-strong: #14283a;
    --color-text-muted: #64748b;
    --color-text-subtle: #64748b;
    --color-on-brand: #ffffff;
    --color-on-inverse: #ffffff;
    --color-on-inverse-muted: rgb(255 255 255 / 76%);
    --color-focus: var(--color-brand-600);
    --color-backdrop: rgba(11, 18, 32, 0.58);

    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-200: #bfdbfe;
    --color-info-300: #93c5fd;
    --color-info-400: #60a5fa;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;
    --color-info-800: #1e40af;
    --color-info-900: #1e3a8a;
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;
    --color-violet-50: #f5f3ff;
    --color-violet-100: #ede9fe;
    --color-violet-200: #ddd6fe;
    --color-violet-400: #a78bfa;
    --color-violet-600: #7c3aed;
    --color-violet-700: #6d28d9;
    --color-violet-800: #5b21b6;
    --color-violet-900: #4c1d95;

    /* Role-based semantic colors; feature CSS consumes these instead of raw scales. */
    --color-info-surface: #eff6ff;
    --color-info-border: #bfdbfe;
    --color-info-text: #1e40af;
    --color-info-solid: #2563eb;
    --color-accent-surface: #ecfeff;
    --color-accent-border: #a5f3fc;
    --color-accent-text: #155e75;
    --color-accent-solid: #0e7490;
    --color-success-surface: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-success-text: #166534;
    --color-success-solid: #15803d;
    --color-warning-surface: #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;
    --color-warning-solid: #b45309;
    --color-danger-surface: #fef2f2;
    --color-danger-border: #fecaca;
    --color-danger-text: #991b1b;
    --color-danger-solid: #b91c1c;
    --color-violet-surface: #f5f3ff;
    --color-violet-border: #ddd6fe;
    --color-violet-text: #5b21b6;
    --color-violet-solid: #6d28d9;

    /* Type scale: 12px is reserved for metadata, never body copy. */
    --font-sans: "Vazirmatn", Tahoma, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.0625rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.625rem;
    --font-size-3xl: 2rem;
    --line-height-tight: 1.4;
    --line-height-normal: 1.75;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(20, 40, 58, 0.05);
    --shadow-sm: 0 6px 18px rgba(20, 40, 58, 0.07);
    --shadow-md: 0 14px 36px rgba(20, 40, 58, 0.11);
    --shadow-lg: 0 24px 60px rgba(20, 40, 58, 0.16);
    --shadow-xl: 0 36px 90px rgba(20, 40, 58, 0.22);
    --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.2);

    --motion-fast: 120ms;
    --motion-normal: 180ms;
    --motion-slow: 260ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

    --control-height: 2.75rem;
    --touch-target: 2.75rem;
    --density-row-padding: 0.75rem;
    --density-section-gap: 1.25rem;
    --header-height: 4rem;
    --sidebar-width-expanded: 18rem;
    --sidebar-width-compact: 4.75rem;
    --sidebar-width: var(--sidebar-width-expanded);
    --content-max-width: 112rem;

    --z-header: 40;
    --z-sidebar: 50;
    --z-overlay: 60;
    --z-dialog: 100;
    --z-toast: 120;

    /* Compatibility aliases while historical styles are migrated. */
    --surface: var(--color-surface);
    --surface-subtle: var(--color-surface-subtle);
    --border: var(--color-border);
    --border-color: var(--color-border);
    --primary: var(--color-brand-600);
    --muted-color: var(--color-text-muted);
    --slate-50: var(--color-surface-subtle);
    --slate-100: var(--color-surface-muted);
    --slate-200: var(--color-border);
    --slate-300: var(--color-border-strong);
    --slate-500: var(--color-text-muted);
    --slate-600: var(--color-text-secondary);
    --slate-700: var(--color-text);
    --slate-800: var(--color-text-strong);
    --slate-900: var(--color-brand-900);
    --blue-50: var(--color-brand-50);
    --blue-100: var(--color-brand-100);
    --blue-600: var(--color-brand-600);
    --blue-700: var(--color-brand-700);
    --color-emerald-50: var(--color-success-surface);
    --color-emerald-100: var(--color-success-surface);
    --color-emerald-200: var(--color-success-border);
    --color-emerald-700: var(--color-success-solid);
    --color-emerald-800: var(--color-success-text);
    --color-cyan-800: var(--color-accent-text);
    --color-purple-800: var(--color-violet-text);
    --color-rose-50: var(--color-danger-surface);
    --color-rose-100: var(--color-danger-surface);
    --color-rose-200: var(--color-danger-border);
    --color-rose-400: var(--color-danger-solid);
    --color-rose-700: var(--color-danger-solid);
    --color-rose-800: var(--color-danger-text);
    --settings-primary: var(--color-brand-600);
    --settings-primary-dark: var(--color-brand-700);
    --settings-border: var(--color-border);
    --settings-muted: var(--color-text-muted);
    --settings-text: var(--color-text-strong);
    --settings-surface: var(--color-surface);
    --settings-soft: var(--color-surface-subtle);
    --success-50: var(--color-success-surface);
    --success-700: var(--color-success-text);
    --warning-50: var(--color-warning-surface);
    --warning-800: var(--color-warning-text);
}

html[data-density="compact"] {
    --control-height: 2.75rem;
    --density-row-padding: 0.5rem;
    --density-section-gap: 0.875rem;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #0b1220;
    --color-surface: #111c2e;
    --color-surface-elevated: #162238;
    --color-surface-subtle: #162238;
    --color-surface-muted: #1d2c43;
    --color-surface-strong: #24364f;
    --color-surface-inverse: #07101d;
    --color-surface-glass: rgb(17 28 46 / 90%);
    --color-surface-glass-strong: rgb(22 34 56 / 96%);
    --color-border-glass: rgb(66 87 117 / 76%);
    --color-border: #2e405a;
    --color-border-strong: #607999;
    --color-text: #d7e2f0;
    --color-text-secondary: #bac8da;
    --color-text-strong: #f8fafc;
    --color-text-muted: #a8b6c8;
    --color-text-subtle: #94a3b8;
    --color-on-brand: #ffffff;
    --color-backdrop: rgba(0, 0, 0, 0.72);

    --color-brand-50: #10264a;
    --color-brand-100: #173464;
    --color-brand-200: #1e478a;
    --color-brand-300: #3b82f6;
    --color-brand-400: #60a5fa;
    --color-brand-500: #60a5fa;
    --color-brand-600: #3b82f6;
    --color-brand-700: #93c5fd;
    --color-brand-800: #bfdbfe;
    --color-brand-900: #dbeafe;

    --color-info-surface: #10264a;
    --color-info-border: #1e478a;
    --color-info-text: #bfdbfe;
    --color-info-solid: #2563eb;
    --color-accent-surface: #082f36;
    --color-accent-border: #0d5260;
    --color-accent-text: #a5f3fc;
    --color-accent-solid: #0e7490;
    --color-success-surface: #0b2e22;
    --color-success-border: #14543c;
    --color-success-text: #a7f3d0;
    --color-success-solid: #15803d;
    --color-warning-surface: #35230a;
    --color-warning-border: #604514;
    --color-warning-text: #fde68a;
    --color-warning-solid: #b45309;
    --color-danger-surface: #3c171c;
    --color-danger-border: #662630;
    --color-danger-text: #fecdd3;
    --color-danger-solid: #b91c1c;
    --color-violet-surface: #291c47;
    --color-violet-border: #48327a;
    --color-violet-text: #ddd6fe;
    --color-violet-solid: #6d28d9;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.42);
    --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.52);
    --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.32);
}

@media (prefers-contrast: more) {
    :root {
        --color-border: #94a3b8;
        --color-border-strong: #64748b;
        --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.38);
    }
}