/* ============================================================
   Dourak — Design tokens (single source of truth)
   Theme: Blue Premium (light). Dark-mode tokens are declared
   below, commented out, ready to be enabled in a future phase.
   ============================================================ */

:root {
    /* ---- Color system ---- */
    --color-primary: #123a7a;
    --color-primary-hover: #0f2f63;
    --color-primary-light: #edf4ff;
    --color-accent: #2f80ed;
    --color-accent-light: rgba(47, 128, 237, 0.16);
    --color-success: #20b15a;
    --color-success-light: #e9f9f0;
    --color-warning: #f59e0b;
    --color-warning-light: #fff7e8;
    /* Readable warning text on --color-warning-light (WCAG AA for normal text).
       Keep --color-warning for icons/fills; use this for body/label text. */
    --color-warning-text: #b45309;
    --color-danger: #ef4444;
    --color-danger-light: #fdeeee;

    /* ---- Surfaces ---- */
    --color-bg: #f6f8fc;
    --color-card: #ffffff;
    --color-input-bg: #ffffff;
    --color-border: #e5eaf2;
    --color-border-strong: #d4dce8;

    /* ---- Text ---- */
    --color-text: #17325c;
    --color-text-secondary: #6b7280;
    --color-text-muted: #98a4b8;
    --color-text-inverse: #ffffff;

    /* ---- Sidebar (dark navy) ---- */
    --color-sidebar: #0c1f42;
    --color-sidebar-2: #0a1833;
    --color-sidebar-text: rgba(255, 255, 255, 0.78);
    --color-sidebar-muted: rgba(255, 255, 255, 0.45);
    --color-sidebar-hover: rgba(255, 255, 255, 0.08);
    --color-sidebar-active: rgba(47, 128, 237, 0.22);

    /* ---- Typography ---- */
    --font-family: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-hero: clamp(2rem, 5vw, 3.25rem);
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --line-height: 1.7;

    /* ---- Spacing ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-y: 80px;

    /* ---- Layout ---- */
    --container-max: 1400px;
    --container-narrow: 920px;
    --header-height: 80px;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    /* ---- Radii ---- */
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-card: 0 15px 40px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 14px rgba(18, 58, 122, 0.06);
    --shadow-md: 0 10px 28px rgba(18, 58, 122, 0.10);
    --shadow-lg: 0 24px 60px rgba(18, 58, 122, 0.16);
    --shadow-primary: 0 12px 26px rgba(18, 58, 122, 0.30);
    --shadow-accent: 0 12px 26px rgba(47, 128, 237, 0.32);
    --shadow-danger: 0 10px 22px rgba(239, 68, 68, 0.30);
    --shadow-success: 0 10px 22px rgba(32, 177, 90, 0.30);

    /* ---- Focus / transitions ---- */
    --focus-ring: 0 0 0 4px rgba(47, 128, 237, 0.28);
    --transition-fast: 200ms cubic-bezier(0.25, 0.6, 0.3, 1);
    --transition: 300ms cubic-bezier(0.25, 0.6, 0.3, 1);
    --ease-lift: cubic-bezier(0.2, 0.8, 0.3, 1.1);

    /* ---- Controls ---- */
    --control-height: 52px;
    --input-height: 52px;
    --btn-height: 56px;

    /* ---- Z-index ---- */
    --z-header: 100;
    --z-sidebar: 200;
    --z-drawer: 300;
    --z-overlay: 10000;
}

/*
 * Dark mode — PREPARED, NOT ENABLED in this phase.
 * Enable by adding `data-theme="dark"` to <html> and uncommenting below.
 *
[data-theme="dark"] {
    --color-bg: #0b1324;
    --color-card: #111c33;
    --color-border: #1f2c47;
    --color-border-strong: #2c3c5c;
    --color-text: #eaf1ff;
    --color-text-secondary: #b4c2d8;
    --color-text-muted: #7e8da6;
    --color-primary: #2f80ed;
    --color-primary-hover: #5b9cf5;
    --color-primary-light: rgba(47, 128, 237, 0.14);
    --color-sidebar: #081120;
    --color-sidebar-2: #060c18;
    --shadow-card: 0 15px 40px rgba(0, 0, 0, 0.35);
}
*/