/* ==========================================================================
   FNX Design System — Foundation tokens
   Shared base for the whole FiberNet ERP interface.
   Scope: colours, typography, spacing, radii, elevation, motion, layers.
   Dark mode: [data-fnx-theme="dark"] on <html>, or OS preference when
   [data-fnx-theme="auto"] / unset.
   ========================================================================== */

:root {
    /* ---------- Brand scale (fiber blue) ---------- */
    --fnx-brand-50:  #eff6ff;
    --fnx-brand-100: #dbeafe;
    --fnx-brand-200: #bfdbfe;
    --fnx-brand-300: #93c5fd;
    --fnx-brand-400: #60a5fa;
    --fnx-brand-500: #3b82f6;
    --fnx-brand-600: #2563eb;
    --fnx-brand-700: #1d4ed8;
    --fnx-brand-800: #1e40af;
    --fnx-brand-900: #1e3a8a;
    --fnx-brand-950: #0f2167;

    /* ---------- Neutral scale ---------- */
    --fnx-neutral-0:   #ffffff;
    --fnx-neutral-50:  #f8fafc;
    --fnx-neutral-100: #f1f5f9;
    --fnx-neutral-200: #e2e8f0;
    --fnx-neutral-300: #cbd5e1;
    --fnx-neutral-400: #94a3b8;
    --fnx-neutral-500: #64748b;
    --fnx-neutral-600: #475569;
    --fnx-neutral-700: #334155;
    --fnx-neutral-800: #1e293b;
    --fnx-neutral-900: #0f172a;
    --fnx-neutral-950: #020617;

    /* ---------- Status ---------- */
    --fnx-success:      #059669;
    --fnx-success-soft: #d1fae5;
    --fnx-warning:      #d97706;
    --fnx-warning-soft: #fef3c7;
    --fnx-danger:       #dc2626;
    --fnx-danger-soft:  #fee2e2;
    --fnx-info:         #0891b2;
    --fnx-info-soft:    #cffafe;

    /* ---------- Semantic surfaces (light) ---------- */
    --fnx-canvas:         var(--fnx-neutral-100);
    --fnx-surface:        var(--fnx-neutral-0);
    --fnx-surface-raised: var(--fnx-neutral-0);
    --fnx-surface-sunken: var(--fnx-neutral-50);
    --fnx-surface-inset:  var(--fnx-neutral-100);

    --fnx-border:        var(--fnx-neutral-200);
    --fnx-border-strong: var(--fnx-neutral-300);

    --fnx-text:        var(--fnx-neutral-900);
    --fnx-text-soft:   var(--fnx-neutral-600);
    --fnx-text-muted:  var(--fnx-neutral-500);
    --fnx-text-invert: var(--fnx-neutral-0);

    --fnx-accent:         var(--fnx-brand-700);
    --fnx-accent-hover:   var(--fnx-brand-800);
    --fnx-accent-soft:    var(--fnx-brand-50);
    --fnx-accent-contrast: #ffffff;
    --fnx-accent-ring:    color-mix(in srgb, var(--fnx-brand-600) 28%, transparent);

    /* ---------- Typography ---------- */
    --fnx-font-latin:  Heebo, sans-serif;
    --fnx-font-arabic: Cairo, sans-serif;
    --fnx-font-hebrew: Heebo, sans-serif;
    --fnx-font-mono:   ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
    --fnx-font: var(--fnx-font-latin);

    --fnx-text-2xs: 0.6875rem; /* 11 */
    --fnx-text-xs:  0.75rem;   /* 12 */
    --fnx-text-sm:  0.8125rem; /* 13 */
    --fnx-text-md:  0.875rem;  /* 14 */
    --fnx-text-base:0.9375rem; /* 15 */
    --fnx-text-lg:  1.0625rem; /* 17 */
    --fnx-text-xl:  1.25rem;   /* 20 */
    --fnx-text-2xl: 1.5rem;    /* 24 */
    --fnx-text-3xl: 1.875rem;  /* 30 */
    --fnx-text-4xl: 2.25rem;   /* 36 */

    --fnx-leading-tight: 1.25;
    --fnx-leading-snug:  1.4;
    --fnx-leading-normal:1.6;

    --fnx-tracking-tight: -0.015em;
    --fnx-tracking-wide:  0.06em;

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

    /* ---------- Radii ---------- */
    --fnx-radius-xs: 6px;
    --fnx-radius-sm: 8px;
    --fnx-radius-md: 10px;
    --fnx-radius-lg: 14px;
    --fnx-radius-xl: 20px;
    --fnx-radius-2xl: 28px;
    --fnx-radius-pill: 999px;

    /* ---------- Elevation ---------- */
    --fnx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --fnx-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --fnx-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --fnx-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
    --fnx-shadow-xl: 0 28px 64px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(15, 23, 42, 0.06);

    /* ---------- Controls ---------- */
    --fnx-control-height: 2.875rem; /* 46px */
    --fnx-control-height-sm: 2.25rem;
    --fnx-focus-ring: 0 0 0 3px var(--fnx-accent-ring);

    /* ---------- Motion ---------- */
    --fnx-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --fnx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fnx-duration-fast: 120ms;
    --fnx-duration: 200ms;
    --fnx-duration-slow: 400ms;

    /* ---------- Layers ---------- */
    --fnx-z-base: 1;
    --fnx-z-sticky: 100;
    --fnx-z-dropdown: 1000;
    --fnx-z-overlay: 1050;
    --fnx-z-modal: 1060;
    --fnx-z-toast: 1080;
}

/* Locale-aware typeface without extra markup. */
:root:lang(ar), [lang="ar"] { --fnx-font: var(--fnx-font-arabic); }
:root:lang(he), [lang="he"] { --fnx-font: var(--fnx-font-hebrew); }

/* ---------- Dark palette ---------- */
[data-fnx-theme="dark"] {
    color-scheme: dark;

    --fnx-canvas:         #070d1a;
    --fnx-surface:        #0f172a;
    --fnx-surface-raised: #16213a;
    --fnx-surface-sunken: #0b1428;
    --fnx-surface-inset:  #16213a;

    --fnx-border:        #23304d;
    --fnx-border-strong: #33415f;

    --fnx-text:       #e8eefb;
    --fnx-text-soft:  #b3c0d8;
    --fnx-text-muted: #8496b4;

    --fnx-accent:         var(--fnx-brand-500);
    --fnx-accent-hover:   var(--fnx-brand-400);
    --fnx-accent-soft:    rgba(59, 130, 246, 0.14);
    --fnx-accent-contrast:#061024;
    --fnx-accent-ring:    rgba(96, 165, 250, 0.34);

    --fnx-success-soft: rgba(5, 150, 105, 0.18);
    --fnx-warning-soft: rgba(217, 119, 6, 0.18);
    --fnx-danger-soft:  rgba(220, 38, 38, 0.18);
    --fnx-info-soft:    rgba(8, 145, 178, 0.18);

    --fnx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --fnx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --fnx-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --fnx-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
    --fnx-shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    [data-fnx-theme="auto"] {
        color-scheme: dark;

        --fnx-canvas:         #070d1a;
        --fnx-surface:        #0f172a;
        --fnx-surface-raised: #16213a;
        --fnx-surface-sunken: #0b1428;
        --fnx-surface-inset:  #16213a;

        --fnx-border:        #23304d;
        --fnx-border-strong: #33415f;

        --fnx-text:       #e8eefb;
        --fnx-text-soft:  #b3c0d8;
        --fnx-text-muted: #8496b4;

        --fnx-accent:         var(--fnx-brand-500);
        --fnx-accent-hover:   var(--fnx-brand-400);
        --fnx-accent-soft:    rgba(59, 130, 246, 0.14);
        --fnx-accent-contrast:#061024;
        --fnx-accent-ring:    rgba(96, 165, 250, 0.34);

        --fnx-success-soft: rgba(5, 150, 105, 0.18);
        --fnx-warning-soft: rgba(217, 119, 6, 0.18);
        --fnx-danger-soft:  rgba(220, 38, 38, 0.18);
        --fnx-info-soft:    rgba(8, 145, 178, 0.18);

        --fnx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --fnx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
        --fnx-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
        --fnx-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
        --fnx-shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.6);
    }
}

/* ==========================================================================
   Reset / base primitives
   ========================================================================== */

.fnx-root,
.fnx-root *,
.fnx-root *::before,
.fnx-root *::after {
    box-sizing: border-box;
}

.fnx-root {
    margin: 0;
    font-family: var(--fnx-font);
    font-size: var(--fnx-text-base);
    line-height: var(--fnx-leading-normal);
    color: var(--fnx-text);
    background-color: var(--fnx-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.fnx-root :focus-visible {
    outline: 2px solid var(--fnx-accent);
    outline-offset: 2px;
}

/* Component classes below set `display`, so `hidden` needs to outrank them. */
.fnx-root [hidden] {
    display: none !important;
}

/* Visually hidden but available to assistive tech. */
.fnx-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fnx-root *,
    .fnx-root *::before,
    .fnx-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}