/* =============================================================================
   Mindexia Design Tokens — SINGLE SOURCE OF TRUTH
   -----------------------------------------------------------------------------
   Every color, spacing, radius, shadow, or font size used in the app should
   reference a variable defined here. Never hard-code values in component CSS.

   How to change the brand:
     1. Edit --mx-navy-600 and --mx-sky-400 below.
     2. Optionally regenerate the ramps (a small color-tool works fine).
     3. The whole app instantly restyles.

   Palette source: Mindexia logo (m in navy, x-swoosh in sky-blue).
   ============================================================================= */

/* ─── FONTS ────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Droid Kufi';
    src: url('../fonts/DroidKufi-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Droid Kufi';
    src: url('../fonts/DroidKufi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ─── LIGHT THEME (default) ────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    /* Brand — Navy (Primary) — sampled directly from mindexia-logo.svg
       Anchor: #124687 (rgb 18,70,135) — the "m" glyph.
       Ramp derived from the anchor using a standard HSL curve. */
    --mx-navy-50:  #E8EEF7;
    --mx-navy-100: #C1D0E7;
    --mx-navy-200: #86A1CC;
    --mx-navy-300: #4E75AC;
    --mx-navy-400: #285897;
    --mx-navy-500: #1A5090;
    --mx-navy-600: #124687;   /* ★ Primary — main brand color from logo */
    --mx-navy-700: #0E3B73;   /* the darker shadow tone in the logo */
    --mx-navy-800: #0A2B55;
    --mx-navy-900: #061B36;

    /* Brand — Sky (Accent) — sampled from the "x" swoosh
       Anchor: #28A0E6 (rgb 40,160,230). Ramp follows the same HSL curve. */
    --mx-sky-50:  #E6F4FD;
    --mx-sky-100: #B7DEF8;
    --mx-sky-200: #7DC5F1;
    --mx-sky-300: #4CAFEC;
    --mx-sky-400: #28A0E6;   /* ★ Accent — the x-swoosh color from logo */
    --mx-sky-500: #138ACC;   /* the mid-shadow tone (rgb 19,138,204) */
    --mx-sky-600: #1073AC;
    --mx-sky-700: #0D5B87;
    --mx-sky-800: #093D5B;
    --mx-sky-900: #052236;

    /* Neutrals — cool gray with subtle blue undertone (fits the palette) */
    --mx-gray-0:   #FFFFFF;
    --mx-gray-50:  #F8FAFC;
    --mx-gray-100: #F1F5F9;
    --mx-gray-200: #E2E8F0;
    --mx-gray-300: #CBD5E1;
    --mx-gray-400: #94A3B8;
    --mx-gray-500: #64748B;
    --mx-gray-600: #475569;
    --mx-gray-700: #334155;
    --mx-gray-800: #1E293B;
    --mx-gray-900: #0F172A;

    /* Semantic */
    --mx-success:      #059669;
    --mx-success-50:   #ECFDF5;
    --mx-success-100:  #D1FAE5;
    --mx-success-700:  #047857;
    --mx-success-800:  #065F46;

    --mx-warning:      #D97706;
    --mx-warning-50:   #FFFBEB;
    --mx-warning-100:  #FEF3C7;
    --mx-warning-700:  #B45309;
    --mx-warning-800:  #92400E;

    --mx-danger:       #DC2626;
    --mx-danger-50:    #FEF2F2;
    --mx-danger-100:   #FEE2E2;
    --mx-danger-700:   #B91C1C;
    --mx-danger-800:   #991B1B;

    --mx-info:         var(--mx-sky-400);
    --mx-info-50:      var(--mx-sky-50);

    /* Purpose tokens — components consume these, NOT the raw ramp above */
    --mx-bg:              var(--mx-gray-50);        /* page background */
    --mx-surface:         var(--mx-gray-0);         /* card / panel background */
    --mx-surface-alt:     var(--mx-gray-50);        /* zebra stripe / subtle panel */
    --mx-surface-hover:   var(--mx-sky-50);         /* row/card hover */

    --mx-text:            var(--mx-navy-800);       /* body text */
    --mx-text-strong:     var(--mx-navy-900);       /* headings */
    --mx-text-muted:      var(--mx-gray-500);       /* secondary text */
    --mx-text-faint:      var(--mx-gray-400);       /* placeholder */
    --mx-text-inverse:    var(--mx-gray-0);         /* text on dark bg */
    --mx-text-brand:      var(--mx-navy-600);       /* links, brand accents */

    --mx-border:          var(--mx-gray-200);       /* default border */
    --mx-border-strong:   var(--mx-gray-300);       /* input borders, dividers */
    --mx-border-focus:    var(--mx-sky-400);        /* focus ring color */

    --mx-brand:           var(--mx-navy-600);       /* Primary brand */
    --mx-brand-hover:     var(--mx-navy-700);
    --mx-brand-active:    var(--mx-navy-800);
    --mx-brand-soft:      var(--mx-navy-50);        /* light brand tint */

    --mx-accent:          var(--mx-sky-400);        /* Accent color */
    --mx-accent-hover:    var(--mx-sky-500);
    --mx-accent-soft:     var(--mx-sky-50);

    /* Sidebar (kept semantic — navy in light, near-black in dark) */
    --mx-sidebar-bg:      var(--mx-navy-600);
    --mx-sidebar-text:    rgba(255,255,255,0.85);
    --mx-sidebar-text-active: #ffffff;
    --mx-sidebar-item-hover: rgba(255,255,255,0.08);
    --mx-sidebar-item-active: rgba(79,165,218,0.22);
    --mx-sidebar-marker:  var(--mx-sky-400);

    /* Shadows */
    --mx-shadow-xs:  0 1px 2px rgba(15,31,56,0.04);
    --mx-shadow-sm:  0 1px 3px rgba(15,31,56,0.06), 0 1px 2px rgba(15,31,56,0.04);
    --mx-shadow-md:  0 4px 12px rgba(15,31,56,0.08), 0 2px 4px rgba(15,31,56,0.04);
    --mx-shadow-lg:  0 12px 32px rgba(15,31,56,0.12), 0 4px 8px rgba(15,31,56,0.06);
    --mx-shadow-focus: 0 0 0 3px rgba(79,165,218,0.25);
    --mx-shadow-focus-danger: 0 0 0 3px rgba(220,38,38,0.15);

    /* Radius */
    --mx-radius-xs: 3px;
    --mx-radius-sm: 4px;
    --mx-radius:    6px;      /* default — inputs, small buttons */
    --mx-radius-md: 8px;      /* cards, primary buttons */
    --mx-radius-lg: 12px;     /* large cards, modals */
    --mx-radius-xl: 16px;
    --mx-radius-pill: 999px;

    /* Spacing — 4px grid */
    --mx-space-1:  4px;
    --mx-space-2:  8px;
    --mx-space-3:  12px;
    --mx-space-4:  16px;
    --mx-space-5:  20px;
    --mx-space-6:  24px;
    --mx-space-8:  32px;
    --mx-space-10: 40px;
    --mx-space-12: 48px;
    --mx-space-16: 64px;

    /* Font sizes — text scale */
    --mx-fs-xs:   11px;
    --mx-fs-sm:   12px;
    --mx-fs-base: 14px;   /* default body */
    --mx-fs-md:   15px;
    --mx-fs-lg:   16px;
    --mx-fs-xl:   18px;
    --mx-fs-2xl:  20px;
    --mx-fs-3xl:  24px;
    --mx-fs-4xl:  30px;
    --mx-fs-5xl:  36px;

    /* Font families */
    --mx-font-ar: 'Droid Kufi', 'Segoe UI', system-ui, sans-serif;
    --mx-font-en: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --mx-font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Line heights */
    --mx-lh-tight:   1.25;
    --mx-lh-normal:  1.5;
    --mx-lh-relaxed: 1.75;

    /* Density (Comfortable — 40px rows) */
    --mx-control-h:   36px;    /* inputs, small buttons */
    --mx-control-h-lg: 44px;   /* primary CTA, tall inputs */
    --mx-row-h:       40px;    /* form/table rows */
    --mx-row-h-sm:    32px;    /* compact rows (dense tables) */

    /* Transitions */
    --mx-t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --mx-t-base:   180ms cubic-bezier(0.4, 0, 0.2, 1);
    --mx-t-slow:   260ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index scale */
    --mx-z-sticky:    100;
    --mx-z-navbar:    200;
    --mx-z-sidebar:   300;
    --mx-z-overlay:   400;
    --mx-z-modal:     500;
    --mx-z-toast:     600;
}

/* ─── DARK THEME ─────────────────────────────────────────────────────────────
   Toggle with:  document.documentElement.setAttribute('data-theme', 'dark');
   The brand navy stays but everything else flips.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Neutrals invert — the gray ramp is *conceptually* the same but visually flipped */
    --mx-bg:              #0B1220;                  /* deep near-black */
    --mx-surface:         #131C2E;                  /* raised cards */
    --mx-surface-alt:     #0F1626;                  /* dim panels */
    --mx-surface-hover:   rgba(79,165,218,0.10);

    --mx-text:            #E6EDF7;
    --mx-text-strong:     #FFFFFF;
    --mx-text-muted:      #94A3B8;
    --mx-text-faint:      #64748B;
    --mx-text-brand:      var(--mx-sky-300);        /* accent brighter in dark */

    --mx-border:          #1F2A44;
    --mx-border-strong:   #2A3854;

    --mx-brand:           var(--mx-sky-400);        /* accent becomes primary in dark */
    --mx-brand-hover:     var(--mx-sky-300);
    --mx-brand-active:    var(--mx-sky-200);
    --mx-brand-soft:      rgba(79,165,218,0.10);

    --mx-accent:          var(--mx-sky-300);
    --mx-accent-hover:    var(--mx-sky-200);
    --mx-accent-soft:     rgba(79,165,218,0.12);

    /* Sidebar in dark — deeper navy, still recognizable */
    --mx-sidebar-bg:      #0A1526;
    --mx-sidebar-text:    rgba(230,237,247,0.75);
    --mx-sidebar-text-active: #FFFFFF;
    --mx-sidebar-item-hover: rgba(255,255,255,0.05);
    --mx-sidebar-item-active: rgba(79,165,218,0.22);

    /* Softer shadows in dark (bright shadows look weird) */
    --mx-shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --mx-shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
    --mx-shadow-md:  0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25);
    --mx-shadow-lg:  0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);

    /* Semantic tints softened for dark */
    --mx-success-50:  rgba(5,150,105,0.10);
    --mx-warning-50:  rgba(217,119,6,0.10);
    --mx-danger-50:   rgba(220,38,38,0.10);
    --mx-info-50:     rgba(79,165,218,0.10);
}

/* ─── AUTO DARK (only when user hasn't picked light explicitly) ────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* copy of [data-theme="dark"] rules — kept lean by re-declaring only the essentials */
        --mx-bg:              #0B1220;
        --mx-surface:         #131C2E;
        --mx-surface-alt:     #0F1626;
        --mx-surface-hover:   rgba(79,165,218,0.10);
        --mx-text:            #E6EDF7;
        --mx-text-strong:     #FFFFFF;
        --mx-text-muted:      #94A3B8;
        --mx-text-faint:      #64748B;
        --mx-text-brand:      var(--mx-sky-300);
        --mx-border:          #1F2A44;
        --mx-border-strong:   #2A3854;
        --mx-brand:           var(--mx-sky-400);
        --mx-brand-hover:     var(--mx-sky-300);
        --mx-brand-soft:      rgba(79,165,218,0.10);
        --mx-accent:          var(--mx-sky-300);
        --mx-sidebar-bg:      #0A1526;
    }
}

/* ─── BASE ELEMENTS ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
    font-size: var(--mx-fs-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color-scheme: light dark;
}

body {
    margin: 0;
    font-family: var(--mx-font-ar);
    background: var(--mx-bg);
    color: var(--mx-text);
    line-height: var(--mx-lh-normal);
    transition: background var(--mx-t-base), color var(--mx-t-base);
}

/* Numbers stay in Inter — Arabic numerals look nicer, English digits stay clean */
input[type="number"],
input[type="tel"],
.mx-num, .mx-code, .mx-mono, code {
    font-family: var(--mx-font-en);
    font-variant-numeric: tabular-nums;
}

code, .mx-mono {
    font-family: var(--mx-font-mono);
    font-size: 0.92em;
    background: var(--mx-surface-alt);
    padding: 2px 6px;
    border-radius: var(--mx-radius-sm);
    color: var(--mx-text-brand);
}

/* Links */
a {
    color: var(--mx-text-brand);
    text-decoration: none;
    transition: color var(--mx-t-fast);
}
a:hover { color: var(--mx-accent-hover); text-decoration: underline; }

/* Selection */
::selection {
    background: var(--mx-sky-200);
    color: var(--mx-navy-900);
}
[data-theme="dark"] ::selection { background: var(--mx-sky-700); color: white; }

/* Scrollbars — subtle, brand-tinted */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mx-border-strong);
    border-radius: 8px;
    border: 2px solid var(--mx-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--mx-gray-400); }

/* Focus outline — accessible + branded */
:focus-visible {
    outline: 2px solid var(--mx-accent);
    outline-offset: 2px;
}

/* Utility: visually-hidden (for a11y labels) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}