/* ══════════════════════════════════════════════════════════════════════
   LILBOT PANEL — DESIGN TOKENS · V63 "GEN-5"
   Lineage: OBSIDIAN DAWN v39 → SECOND DAWN v44 → V47 AURORA
            → V48 (text-safe data hues, designed light surfaces)
            → V61 (light-depth ambers) → V63 GEN-5 (owner mandate).
   ──────────────────────────────────────────────────────────────────────
   V63 doctrine (OWNER ORDER: «مشکی + نارنجی — وایب مشکی رپر نسل پنج؛
   ماسک، خیابونی، دارک، مرموز، خشن و شیک» — inspired by 5 refs, copied
   from none):
   · Canvas is PITCH BLACK, not blue-black: the blue cast is gone from
     every surface, glass and ink tone. Street-black, warm-neutral.
   · The one brand hue is now LAVA ORANGE (the coin burns). One hue
     still owns the room — data hues untouched (they are charts, not
     identity).
   · Smoke over neon: the ambient field is ember smoke + neutral grain,
     grittier noise, no rainbow drift.
   · Dark is designed, light is designed — light gets readable EMBER.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted — CSP style-src 'self' blocks remote imports) ── */
@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;
}
/* Ayandeh — primary UI face (owner mandate). Ships 300/400/700/900;
   500→400, 600→700, 800→900 per CSS font-matching. */
@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');
}

:root {
    /* ── Canvas — GEN-5 pitch black, three layers deep ────────────── */
    --void:        #070707;
    --bg-2:        #0b0b0c;
    --bg-3:        #101012;
    --bg-4:        #17171a;
    --ink:         #f2f2f3;
    --ink-2:       rgba(242, 242, 243, 0.76);
    --mist:        rgba(242, 242, 243, 0.56);
    --smoke:       rgba(242, 242, 243, 0.34);
    --line:        rgba(255, 255, 255, 0.07);
    --line-2:      rgba(255, 255, 255, 0.13);

    /* ── Glass material ladder ────────────────────────────────────── */
    --glass-1:     rgba(255, 255, 255, 0.042);  /* resting content      */
    --glass-2:     rgba(255, 255, 255, 0.07);   /* panels, headers      */
    --glass-3:     rgba(16, 16, 17, 0.74);      /* floating chrome      */
    --glass-4:     rgba(255, 255, 255, 0.12);   /* raised chips/hover   */
    --glass-solid: rgba(19, 19, 21, 0.985);     /* sheets, menus        */
    --glass-border:        rgba(255, 255, 255, 0.11);
    --glass-border-strong: rgba(255, 255, 255, 0.19);
    --glass-edge:          inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --glass-edge-strong:   inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* blur budget — heavy only on chrome */
    --blur-1: 12px;
    --blur-2: 22px;
    --blur-3: 36px;

    /* ── Brand: the coin. One hue owns the room. ──────────────────── */
    --amber:       #ff7a2e;
    --amber-2:     #ffa04d;
    --amber-deep:  #e85d04;
    --amber-ink:   #210b02;              /* text on amber          */
    --amber-soft:  rgba(255, 122, 46, 0.14);
    --amber-glow:  rgba(255, 110, 40, 0.34);

    /* ── Data hues (charts, tones) ────────────────────────────────── */
    --teal:        #43d9c4;  --teal-soft:   rgba(67, 217, 196, 0.12);
    --violet:      #a78bfa;  --violet-soft: rgba(167, 139, 250, 0.12);
    --sky:         #7cc8fb;  --sky-soft:    rgba(124, 200, 251, 0.12);
    --rose:        #fb7185;  --rose-soft:   rgba(251, 113, 133, 0.13);
    --danger:      #fb6a76;  --danger-soft: rgba(251, 106, 118, 0.14);
    --success:     #3ede9e;  --success-soft: rgba(62, 222, 158, 0.13);
    --warn:        #fbbf24;  --warn-soft:   rgba(251, 191, 36, 0.13);

    /* ── Text-safe variants of the data hues (V48) ────────────────────
       Every place a data hue is used as TEXT or an ICON on a soft chip
       must reference these, not the raw hue. Dark = the base hues (they
       already read well on dark soft chips); light re-tunes them so
       badges/tags/buttons keep WCAG-grade contrast on paper. Consumed
       in style.css via the V48 --*-text swaps. */
    --amber-text:  #ffa04d;
    --teal-text:   #43d9c4;
    --violet-text: #a78bfa;
    --sky-text:    #7cc8fb;
    --rose-text:   #fb7185;
    --danger-text: #fb6a76;
    --success-text:#3ede9e;
    --warn-text:   #fbbf24;

    /* ── Radii (concentric) ───────────────────────────────────────── */
    --r-xl: 26px;
    --r-lg: 20px;
    --r-md: 15px;
    --r-sm: 11px;
    --r-xs: 8px;
    --r-pill: 999px;

    /* ── Elevation — soft, layered, never heavy ───────────────────── */
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.12);
    --e-2: 0 2px 6px rgba(0, 0, 0, 0.24), 0 14px 36px rgba(0, 0, 0, 0.26);
    --e-3: 0 10px 22px rgba(0, 0, 0, 0.30), 0 28px 72px rgba(0, 0, 0, 0.38);
    --sh-pop: 0 6px 18px rgba(0, 0, 0, 0.30), 0 24px 64px rgba(0, 0, 0, 0.42);
    --sh-glow: 0 0 0 1px var(--amber-glow), 0 10px 34px rgba(255, 110, 40, 0.18);

    /* ── Motion — fast, premium, purposeful ───────────────────────── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.46, 0.55, 1);
    --t-fast: 120ms;
    --t-med:  220ms;
    --t-slow: 360ms;

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

    /* ── 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: 64px;
    --topbar-h: 56px;
    --rail-w: 76px;
    --rail-w-open: 244px;
    --content-max: 1260px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    /* ── Z 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;

    /* ── Keyboard-first focus ring ────────────────────────────────── */
    --focus-ring: 0 0 0 2px var(--void), 0 0 0 4px var(--amber-glow);

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

    color-scheme: dark;
}

/* ── Light mode — warm paper, designed (not inverted) ─────────────── */
[data-theme="light"] {
    --void:        #edeae1;
    --bg-2:        #e7e3d9;
    --bg-3:        #ded9cc;
    --bg-4:        #d4cebf;
    --ink:         #1d1f28;
    --ink-2:       rgba(29, 31, 40, 0.82);
    --mist:        rgba(29, 31, 40, 0.62);
    --smoke:       rgba(29, 31, 40, 0.46);
    --line:        rgba(22, 24, 32, 0.11);
    --line-2:      rgba(22, 24, 32, 0.19);

    /* text-safe data hues on paper (contrast-tuned on #edeae1) */
    --amber-text:  #8a3805;
    --teal-text:   #0c7268;
    --violet-text: #6a3fd8;
    --sky-text:    #0b64a5;
    --rose-text:   #c22745;
    --danger-text: #bd2739;
    --success-text:#0b7a4d;
    --warn-text:   #8f5f06;

    /* V61: brand accent on paper — the dark-scope #f6ba45/#ffd884 ambers
       read as washed-out pale on light; flip to contrast-true deeps */
    --amber:       #d1490b;
    --amber-2:     #8a3a06;

    --glass-1:     rgba(255, 255, 255, 0.60);
    --glass-2:     rgba(255, 255, 255, 0.76);
    --glass-3:     rgba(255, 255, 255, 0.84);
    --glass-4:     rgba(255, 255, 255, 0.95);
    --glass-solid: rgba(255, 255, 255, 0.985);
    --glass-border:        rgba(22, 24, 32, 0.10);
    --glass-border-strong: rgba(22, 24, 32, 0.17);
    --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:  #a03a05;
    --amber-ink:   #2b0f02;
    --amber-soft:  rgba(190, 74, 16, 0.14);
    --amber-glow:  rgba(190, 74, 16, 0.22);

    --grid-line:   rgba(22, 24, 32, 0.07);

    --e-1: 0 1px 2px rgba(70, 60, 30, 0.07), 0 2px 10px rgba(70, 60, 30, 0.06);
    --e-2: 0 2px 8px rgba(70, 60, 30, 0.09), 0 14px 34px rgba(70, 60, 30, 0.11);
    --e-3: 0 10px 22px rgba(70, 60, 30, 0.12), 0 28px 66px rgba(70, 60, 30, 0.16);
    --sh-pop: 0 6px 18px rgba(70, 60, 30, 0.10), 0 24px 60px rgba(70, 60, 30, 0.14);
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(190, 74, 16, 0.55);

    color-scheme: light;
}

/* ── Reduced transparency: glass → solid, hierarchy preserved ─────── */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-1: rgba(22, 26, 40, 0.94);
        --glass-2: rgba(24, 28, 44, 0.96);
        --glass-3: rgba(14, 17, 28, 0.99);
        --glass-4: rgba(34, 39, 60, 0.98);
        --glass-solid: rgba(16, 19, 31, 1);
        --blur-1: 0px; --blur-2: 0px; --blur-3: 0px;
    }
    [data-theme="light"] {
        --glass-1: #fbfaf7;
        --glass-2: #ffffff;
        --glass-3: #ffffff;
        --glass-4: #ffffff;
        --glass-solid: #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;
    }
}