/* ══════════════════════════════════════════════════════════════════════
   LILBOT PANEL — "OBSIDIAN DAWN" DESIGN LANGUAGE · v3
   Liquid Glass × Spatial UI × Futuristic SaaS · RTL · Mobile-First
   ──────────────────────────────────────────────────────────────────────
   Layer 0: TOKENS — the single source of truth for every visual
   decision in the panel. Components live in style.css; they may only
   reference tokens defined here.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* ── Canvas ─────────────────────────────────────────────────── */
    --void:        #07080d;
    --bg-2:        #0b0e17;
    --bg-3:        #10141f;
    --ink:         #eef0f6;
    --ink-2:       rgba(238, 240, 246, 0.78);
    --mist:        rgba(238, 240, 246, 0.60);
    --smoke:       rgba(238, 240, 246, 0.36);
    --line:        rgba(255, 255, 255, 0.085);
    --line-2:      rgba(255, 255, 255, 0.14);

    /* ── Glass levels (the material ladder) ─────────────────────── */
    --glass-1:     rgba(255, 255, 255, 0.045);   /* rest surfaces   */
    --glass-2:     rgba(255, 255, 255, 0.075);   /* panels, cards   */
    --glass-3:     rgba(20, 24, 38, 0.72);       /* floating chrome */
    --glass-4:     rgba(255, 255, 255, 0.12);    /* raised chips    */
    --glass-border:        rgba(255, 255, 255, 0.12);
    --glass-border-strong: rgba(255, 255, 255, 0.20);
    --glass-edge:  inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.16);

    /* blur budget — heavy blur only on chrome, light on content */
    --blur-1: 14px;
    --blur-2: 24px;
    --blur-3: 40px;

    /* ── Brand + data accents ───────────────────────────────────── */
    --amber:       #f5b942;
    --amber-2:     #ffd479;
    --amber-deep:  #d99a1f;
    --amber-soft:  rgba(245, 185, 66, 0.13);
    --amber-glow:  rgba(245, 185, 66, 0.32);
    --teal:        #4fd1c5;
    --teal-soft:   rgba(79, 209, 197, 0.12);
    --violet:      #a78bfa;
    --violet-soft: rgba(167, 139, 250, 0.12);
    --rose:        #fb7185;
    --rose-soft:   rgba(251, 113, 133, 0.13);
    --sky:         #7dd3fc;
    --sky-soft:    rgba(125, 211, 252, 0.12);
    --danger:      #f87171;
    --danger-soft: rgba(248, 113, 113, 0.13);
    --success:     #34d399;
    --success-soft: rgba(52, 211, 153, 0.13);
    --warn:        #fbbf24;
    --warn-soft:   rgba(251, 191, 36, 0.13);

    /* ── Radii (concentric: outer = inner + padding) ────────────── */
    --r-xl: 28px;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-xs: 9px;
    --r-pill: 999px;

    /* ── Elevation (layered, never heavy) ───────────────────────── */
    --sh-1: 0 2px 8px rgba(0, 0, 0, 0.25);
    --sh-2: 0 10px 34px rgba(0, 0, 0, 0.38);
    --sh-3: 0 24px 70px rgba(0, 0, 0, 0.52);
    --sh-pop: 0 12px 44px rgba(0, 0, 0, 0.45),
              0 2px 10px rgba(0, 0, 0, 0.30);
    --sh-glow: 0 0 0 1px var(--amber-glow), 0 8px 30px rgba(245, 185, 66, 0.16);

    /* ── Motion ─────────────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
    --t-fast: 140ms;
    --t-med:  260ms;
    --t-slow: 480ms;

    /* ── Type scale (mobile-first, RTL) ─────────────────────────── */
    --font: "Ayandeh", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "SF Mono", "Cascadia Code", Consolas, monospace;
    --fs-xs:   11.5px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-lg:   17px;
    --fs-xl:   21px;
    --fs-2xl:  27px;
    --fs-hero: clamp(30px, 6vw, 40px);

    /* ── Spacing ────────────────────────────────────────────────── */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

    /* ── Layout ─────────────────────────────────────────────────── */
    --dock-h: 66px;
    --topbar-h: 58px;
    --rail-w: 82px;
    --rail-w-open: 248px;
    --content-max: 1280px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    /* ── Z-index ladder ─────────────────────────────────────────── */
    --z-bg: 0; --z-content: 10; --z-sticky: 60; --z-dock: 80;
    --z-overlay: 200; --z-drawer: 240; --z-modal: 280; --z-toast: 320;

    /* ── Chart series (real data ink) ───────────────────────────── */
    --series-1: var(--amber);
    --series-2: var(--teal);
    --series-3: var(--violet);
    --series-4: var(--sky);
    --grid-line: rgba(255, 255, 255, 0.055);

    color-scheme: dark;
}

/* ── Light mode: warm paper, soft depth, restrained glass ──────── */
[data-theme="light"] {
    --void:        #f3f1ec;
    --bg-2:        #ece9e2;
    --bg-3:        #e5e2da;
    --ink:         #1c1e26;
    --ink-2:       rgba(28, 30, 38, 0.80);
    --mist:        rgba(28, 30, 38, 0.58);
    --smoke:       rgba(28, 30, 38, 0.38);
    --line:        rgba(20, 22, 30, 0.09);
    --line-2:      rgba(20, 22, 30, 0.16);

    --glass-1:     rgba(255, 255, 255, 0.55);
    --glass-2:     rgba(255, 255, 255, 0.72);
    --glass-3:     rgba(255, 255, 255, 0.82);
    --glass-4:     rgba(255, 255, 255, 0.9);
    --glass-border:        rgba(20, 22, 30, 0.10);
    --glass-border-strong: rgba(20, 22, 30, 0.18);
    --glass-edge:  inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --glass-edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.95);

    --amber-deep:  #b07708;
    --amber-soft:  rgba(217, 154, 31, 0.14);
    --amber-glow:  rgba(217, 154, 31, 0.25);
    --grid-line:   rgba(20, 22, 30, 0.07);

    --sh-1: 0 2px 8px rgba(60, 50, 20, 0.08);
    --sh-2: 0 10px 30px rgba(60, 50, 20, 0.12);
    --sh-3: 0 24px 60px rgba(60, 50, 20, 0.16);
    --sh-pop: 0 12px 40px rgba(60, 50, 20, 0.16),
              0 2px 10px rgba(60, 50, 20, 0.10);

    color-scheme: light;
}

/* ── Reduced transparency: glass → solid, same hierarchy ──────── */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-1: rgba(22, 26, 40, 0.92);
        --glass-2: rgba(24, 28, 44, 0.95);
        --glass-3: rgba(16, 19, 30, 0.98);
        --glass-4: rgba(32, 37, 56, 0.98);
        --blur-1: 0px; --blur-2: 0px; --blur-3: 0px;
    }
    [data-theme="light"] {
        --glass-1: #faf9f6;
        --glass-2: #ffffff;
        --glass-3: #ffffff;
        --glass-4: #ffffff;
    }
}

/* ── Reduced motion: kill travel, keep meaning ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── V39 residual fix (Night Loop): SELF-HOSTED Vazirmatn ─────────────
   The @import above (fonts.googleapis.com) is silently blocked by the
   panel CSP (style-src 'self') — Vazirmatn never loaded; every surface
   rendered in the system-ui fallback. These @font-face rules serve the
   same variable font (wght 100-900) from the panel's own origin:
   CSP stays tight, no header changes, typography finally real. */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Vazirmatn-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Vazirmatn-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Vazirmatn-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── V40: Ayandeh (بانک آینده) — primary UI face ─────────────────────
   Owner mandate: use the Ayandeh font site-wide, with the right weight
   in the right place. Four static weights self-hosted (CSP-safe:
   default-src 'self' covers font-src). Ayandeh ships 300/400/700/900;
   the design's 500/600/800 intents map automatically per the CSS font-
   matching algorithm (500→400, 600→700, 800→900), so:
     body text        → 400 Regular
     labels/quiet     → 400 Regular (was 500)
     buttons/heads    → 700 Bold (was 600/700)
     KPI/display nums → 900 Black (was 800/900)
   Vazirmatn (above) stays as the metric-compatible fallback. */
@font-face {
    font-family: 'Ayandeh';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Ayandeh-Light.woff2') format('woff2'),
         url('fonts/Ayandeh-Light.woff') format('woff');
}
@font-face {
    font-family: 'Ayandeh';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Ayandeh-Regular.woff2') format('woff2'),
         url('fonts/Ayandeh-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Ayandeh';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Ayandeh-Bold.woff2') format('woff2'),
         url('fonts/Ayandeh-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Ayandeh';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/Ayandeh-Black.woff2') format('woff2'),
         url('fonts/Ayandeh-Black.woff') format('woff');
}