@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;300;400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* theme.tokens.css — SINGLE SOURCE OF TRUTH for all AMMN design tokens.
   Loaded in both static HTML and Blazor (App.razor).
   All color, font, and layout tokens live here.
   Font-face declarations live in theme.fonts.css.
   Landing-specific tokens live in theme.landing.tokens.css. */

:root {
    /* ── Neutral scale (n0 = lightest, n900 = darkest) ── */
    --n0: #FFFFFF;
    --n10: #FAFBFC;
    --n20: #F4F5F7;
    --n30: #EBECF0;
    --n40: #DFE1E6;
    --n50: #F8FAFC;
    --n60: #F1F3F5;
    --n70: #E8EAED;
    --n80: #97A0AF;
    --n90: #8993A4;
    --n100: #B3BAC5;
    --n200: #C1C7D0;
    --n300: #5E6C84;
    --n400: #505F79;
    --n500: #42526E;
    --n600: #344563;
    --n700: #253858;
    --n800: #172B4D;
    --n900: #091E42;
    /* ── Brand green ── */
    --brand-green: #0D9488;
    --brand-green-rgb: 4, 120, 87;
    --brand-green-hover: #065f46;
    --brand-green-dark: #064e3b;
    --brand-green-light: #059669;
    --brand-green-lighter: #34d399;
    --brand-green-bg: #F0FDF4;
    --brand-green-border: var(--brand-primary-border);
    /* Brand green gradient — matches IbsPageBanner .banner-icon (wizard.css). */
    --brand-green-gradient: linear-gradient(135deg, var(--brand-green), var(--brand-green-lighter));
    --brand-green-gradient-hover: linear-gradient(135deg, var(--brand-green-hover), var(--brand-green-light));
    /* ── Brand blue ── */
    --brand-blue: #2863E4;
    --brand-blue-rgb: 40, 99, 228;
    --brand-blue-hover: #1d4ed8;
    --brand-blue-dark: #1e40af;
    --brand-blue-light: #5b8ef5;
    --brand-blue-bg: #EBF2FE;
    --brand-blue-border: #B3CBFA;
    /* ── Brand misc ── */
    --brand-navy: #0b1d52;
    --brand-white: #ffffff;
    /* ── Primary alias — change this ONE line to switch brand color ── */
    --brand-primary: #18c92f;
    --brand-primary-hover: #0a7a70;
    --brand-primary-light: #059669;
    --brand-primary-lighter: #34d399;
    --brand-primary-dark: #064e3b;
    --brand-primary-bg: #f0fdf4;
    --brand-primary-border: #6ee7b7;
    /* ── Legacy aliases (used by wizard/ibs/platform CSS) ── */
    --blue: var(--brand-green);
    --green: var(--brand-green-light);
    --primary: var(--brand-green);
    --primary-rgb: var(--brand-green-rgb);
    --teal: var(--brand-green);
    --teal-rgb: var(--brand-green-rgb);
    --teal-light: var(--brand-green-light);
    --teal-light-rgb: 5, 150, 105;
    --teal-lighter: var(--brand-green-lighter);
    --teal-lightest: var(--brand-green-border);
    /* ── Semantic state colors ── */
    --error: #EF4444;
    --error-rgb: 239, 68, 68;
    --success: #16A34A;
    --success-rgb: 22, 163, 74;
    --warning: #F59E0B;
    --warning-rgb: 245, 158, 11;
    --amber: #D97706;
    --amber-rgb: 217, 119, 6;
    /* ── Medical insurance class colors ── */
    --class-basic: #64748b;
    --class-basic-bg: #f1f5f9;
    --class-c: #0891b2;
    --class-c-bg: #ecfeff;
    --class-b: #2563eb;
    --class-b-bg: #eff6ff;
    --class-a: #d97706;
    --class-a-bg: #fffbeb;
    --class-vib: #7c3aed;
    --class-vib-bg: #f5f3ff;
    /* ── Typography ── */
    --font-en: 'Inter', sans-serif;
    --font-ar: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-body: var(--font-en);
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    /* ── Surfaces (light mode) ── */
    --bg: #ffffff;
    --surface: #f8f9fa;
    --text: #1a1a2e;
    --text-muted: #6b7280;
    --border: rgba(0, 0, 0, 0.1);
    /* ── Page accents ── */
    --page-accent: var(--brand-green);
    --page-accent-light: var(--brand-green-light);
    --page-accent-dark: var(--brand-green-hover);
    --dark-bg: #16162b;
    --dark-bg-rgb: 22, 22, 43;
    --dark-surface: #12122a;
    --footer-muted: #94a3b8;
    /* ── Navbar ── */
    --navbar-height: 75px;
    --navbar-bg: rgba(0, 0, 0, 0.3);
    /* ── Radius ── */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-full: 9999px;
    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    /* — Auth modal — */
    --auth-glass-bg: color-mix(in srgb, var(--n0) 22%, transparent);
    --auth-glass-border: color-mix(in srgb, var(--n0) 35%, transparent);
    --auth-glass-shadow: 0 20px 60px color-mix(in srgb, var(--n900) 12%, transparent), inset 2px 2px 4px color-mix(in srgb, var(--n0) 20%, transparent);
    --auth-overlay-bg: color-mix(in srgb, black 40%, transparent);
    --auth-card-width: 440px;
    --auth-card-radius: 24px;
    --auth-input-height: 46px;
    --auth-input-radius: 14px;
    --auth-btn-radius: 14px;
    --auth-text-primary: var(--n0);
    --auth-text-secondary: var(--brand-primary-lighter);
    --auth-text-muted: color-mix(in srgb, var(--n0) 65%, transparent);
    --auth-input-bg: color-mix(in srgb, var(--n0) 12%, transparent);
    --auth-input-border: color-mix(in srgb, var(--n0) 25%, transparent);
    --auth-input-text: #FFFFFF;
    --auth-input-placeholder: color-mix(in srgb, var(--n0) 50%, transparent);
    --auth-error: var(--error);
    --auth-success: var(--brand-primary-lighter);
}

/* ── Language-based font resolution ── */
html[lang="ar"],
html[lang="ur"] {
    --font-body: var(--font-ar);
}

/* ── Dark mode overrides ── */
[data-theme="dark"] {
    /* Surfaces */
    --bg: #0e1117;
    --surface: #1c2230;
    --text: #e8eaf0;
    --text-muted: #9ca3af;
    --border: rgba(255, 255, 255, 0.12);
    --navbar-bg: #13192a;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Neutral palette — inverted (n0 = darkest, n900 = lightest) */
    --n0: #0e1117;
    --n10: #131720;
    --n20: #1c2230;
    --n30: #252b3a;
    --n40: #2d3344;
    --n50: #131720;
    --n60: #1a2030;
    --n70: #222838;
    --n80: #7a8290;
    --n90: #6e7684;
    --n100: #4a5264;
    --n200: #3d4558;
    --n300: #a0a8b8;
    --n400: #b0b8c8;
    --n500: #c0c8d4;
    --n600: #d0d6de;
    --n700: #e0e4ea;
    --n800: #eceff4;
    --n900: #f5f7fa;

    /* Medical insurance class colors â€" dark */
    --class-basic: #94a3b8;
    --class-basic-bg: #1e293b;
    --class-c: #22d3ee;
    --class-c-bg: #164e63;
    --class-b: #60a5fa;
    --class-b-bg: #1e3a5f;
    --class-a: #fbbf24;
    --class-a-bg: #451a03;
    --class-vib: #a78bfa;
    --class-vib-bg: #2e1065;

    /* Primary overrides */
    --brand-primary-bg: #022c22;
    --brand-primary-lighter: #34d399;
    --brand-primary-border: #059669;

    /* Auth modal dark — use absolute colors (neutral scale inverts in dark mode) */
    --auth-glass-bg: color-mix(in srgb, #ffffff 10%, transparent);
    --auth-glass-border: color-mix(in srgb, #ffffff 15%, transparent);
    --auth-text-primary: #f5f7fa;
    --auth-text-muted: color-mix(in srgb, #f5f7fa 60%, transparent);
    --auth-input-bg: color-mix(in srgb, #ffffff 10%, transparent);
    --auth-input-border: color-mix(in srgb, #ffffff 18%, transparent);
    --auth-input-text: #e8eaf0;
    --auth-input-placeholder: color-mix(in srgb, #ffffff 40%, transparent);
}