/* ===========================================================================
   tokens.css — the single source of truth for every design decision.
   ---------------------------------------------------------------------------
   Nothing in this file styles an element. It only names values. Components
   consume these names; no component hard-codes a colour, size or duration.

   Replaces: the 156 ad-hoc properties in app/theme.css plus the 16 pages
   that re-declared their own :root block and silently overrode it.

   Naming rules
   ------------
   - Colour tokens are SEMANTIC (--surface, --text-muted), never literal
     (--blue). Literals live in the private --_palette layer below and are
     never referenced outside this file.
   - Financial direction is --up / --down. Never --green / --red at the
     component layer: a future "colour-blind safe" mode reassigns these two
     tokens and every price in the product follows.
   - Sizes use a scale step, not a pixel count: --space-3, not --space-12px.

   Dark is the default because traders run these screens for hours; light is
   a deliberate opt-in via [data-theme="light"].
   =========================================================================== */

:root {
    color-scheme: dark;

    /* -----------------------------------------------------------------------
       Private palette. Raw hues only — never consumed by components.
       ----------------------------------------------------------------------- */
    --_navy-900: #060d18;
    --_navy-850: #07101d;
    --_navy-800: #0b1424;
    --_navy-750: #0f1a2d;
    --_navy-700: #142035;
    --_navy-600: #1b2a44;

    --_indigo-500: #7293ff;
    --_indigo-400: #93abff;
    --_indigo-300: #bccbff;
    --_indigo-600: #4f6bcc;
    --_indigo-700: #33498f;

    --_emerald-400: #3cd283;
    --_emerald-500: #21b86b;
    --_rose-400: #ff6b7b;
    --_rose-500: #e8465a;
    --_amber-400: #f4bf42;
    --_violet-400: #a78bfa;
    --_teal-400: #00d4aa;

    --_white: #ffffff;
    --_slate-100: #f4f7ff;
    --_slate-300: #c3cbdd;
    --_slate-400: #8e99b3;
    /* Raised from #6b7691: as --text-faint it reached only 4.06:1 on the
       dark surface, below AA. The light theme's faint token was fixed
       separately; this is the dark one, which the browser audit never
       measured because it ran with the light theme active. */
    --_slate-500: #737e98;

    /* -----------------------------------------------------------------------
       Surfaces. Four depths, used consistently:
         canvas  — the page itself
         raised  — cards, panels, table headers
         overlay — modals, dropdowns, popovers (must be opaque)
         sunken  — inset wells, code blocks, disabled fields
       ----------------------------------------------------------------------- */
    --canvas: var(--_navy-850);
    --canvas-alt: var(--_navy-900);
    --surface-raised: var(--_navy-800);
    --surface-overlay: var(--_navy-750);
    --surface-sunken: var(--_navy-900);
    --surface-hover: rgba(114, 147, 255, 0.07);
    --surface-active: rgba(114, 147, 255, 0.13);

    /* -----------------------------------------------------------------------
       Borders. --border is the default hairline; --border-strong marks a
       focused or selected edge; --border-subtle separates rows inside a card
       where a full hairline would be visual noise.
       ----------------------------------------------------------------------- */
    --border: rgba(114, 147, 255, 0.16);
    --border-subtle: rgba(114, 147, 255, 0.08);
    --border-strong: rgba(114, 147, 255, 0.34);

    /* -----------------------------------------------------------------------
       Text. Four levels only. If a fifth is ever needed, the hierarchy is
       wrong, not the palette.
       ----------------------------------------------------------------------- */
    --text: var(--_slate-100);
    --text-secondary: var(--_slate-300);
    --text-muted: var(--_slate-400);
    --text-faint: var(--_slate-500);
    --text-on-accent: #071022;

    /* -----------------------------------------------------------------------
       Accent (brand). The old theme called this --gold while its value was
       #7293ff — a blue. The name is corrected here; --gold is kept as a
       deprecated alias in compat.css so legacy pages keep rendering.
       ----------------------------------------------------------------------- */
    --accent: var(--_indigo-500);
    --accent-hover: var(--_indigo-400);
    --accent-active: var(--_indigo-600);
    --accent-text: var(--_indigo-300);
    --accent-dim: rgba(114, 147, 255, 0.12);
    --accent-glow: rgba(114, 147, 255, 0.26);

    /* -----------------------------------------------------------------------
       Financial direction. THE most important pair in a trading product.
       Every price delta, PnL figure, candle and order side resolves to one
       of these two. Nothing else may express direction.
       ----------------------------------------------------------------------- */
    --up: var(--_emerald-400);
    --up-strong: var(--_emerald-500);
    --up-dim: rgba(60, 210, 131, 0.12);
    --up-glow: rgba(60, 210, 131, 0.26);

    --down: var(--_rose-400);
    --down-strong: var(--_rose-500);
    --down-dim: rgba(255, 107, 123, 0.12);
    --down-glow: rgba(255, 107, 123, 0.26);

    /* Neutral direction — a value that has not moved. Distinct from muted
       text so "unchanged" reads as data, not as a disabled state. */
    --flat: var(--_slate-400);
    --flat-dim: rgba(142, 153, 179, 0.12);

    /* -----------------------------------------------------------------------
       Status. Separate from direction on purpose: a *rejected withdrawal* is
       not "price down", and conflating them produced red PnL-coloured error
       banners in the old pages.
       ----------------------------------------------------------------------- */
    --success: var(--_emerald-400);
    --success-dim: rgba(60, 210, 131, 0.12);
    --danger: var(--_rose-400);
    --danger-dim: rgba(255, 107, 123, 0.12);
    --warning: var(--_amber-400);
    --warning-dim: rgba(244, 191, 66, 0.12);
    --info: var(--_indigo-500);
    --info-dim: rgba(114, 147, 255, 0.12);
    --pending: var(--_violet-400);
    --pending-dim: rgba(167, 139, 250, 0.12);

    /* -----------------------------------------------------------------------
       Typography.
       --font-ui    interface text
       --font-mono  every number that a user compares against another number:
                    prices, quantities, balances, PnL, order ids, hashes.
                    Tabular figures stop columns from jittering on each tick.
       ----------------------------------------------------------------------- */
    --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-ar: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    /* "IBM Plex Sans Arabic" before the generic monospace: none of the mono
       faces has Arabic glyphs, so an Arabic label inside a numeric cell fell
       through to the system monospace (Courier New), whose Arabic is drawn
       with fixed-width, unjoined letters - "سعر الدخول" read as spaced
       glyphs. Digits still come from the mono faces. */
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", "IBM Plex Sans Arabic", monospace;

    /* Type scale — 1.200 (minor third) from a 14px base. 14 not 16 because
       these screens are dense by nature; 12 is the documented floor. */
    --text-2xs: 0.6875rem;  /* 11px — legal/footnote only, never interactive */
    --text-xs: 0.75rem;     /* 12px — table meta, badges, labels */
    --text-sm: 0.8125rem;   /* 13px — secondary body */
    --text-base: 0.875rem;  /* 14px — body default */
    --text-md: 1rem;        /* 16px — emphasised body, mobile inputs */
    --text-lg: 1.125rem;    /* 18px — card titles */
    --text-xl: 1.375rem;    /* 22px — section headings */
    --text-2xl: 1.75rem;    /* 28px — page titles */
    --text-3xl: 2.25rem;    /* 36px — hero figures (balance, equity) */
    --text-4xl: 3rem;       /* 48px — the single largest number on a screen */

    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.12em;  /* uppercase micro-labels */

    /* -----------------------------------------------------------------------
       Spacing — 4px base. Components use steps, never raw px, so density can
       be retuned globally (see the compact-density override at the bottom).
       ----------------------------------------------------------------------- */
    --space-0: 0;
    --space-px: 1px;
    --space-1: 0.25rem;   /* 4  */
    --space-2: 0.5rem;    /* 8  */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.25rem;   /* 20 */
    --space-6: 1.5rem;    /* 24 */
    --space-8: 2rem;      /* 32 */
    --space-10: 2.5rem;   /* 40 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */
    --space-20: 5rem;     /* 80 */

    /* Component-level spacing, derived. Retuning these changes the feel of
       the whole product without touching a single component file. */
    --pad-card: var(--space-5);
    --pad-card-sm: var(--space-4);
    --pad-cell-x: var(--space-4);
    --pad-cell-y: var(--space-3);
    --pad-control-x: var(--space-4);
    --pad-control-y: var(--space-3);
    --gap-stack: var(--space-4);
    --gap-inline: var(--space-2);

    /* -----------------------------------------------------------------------
       Radii, borders, shadows
       ----------------------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --ring-width: 2px;
    --ring-offset: 2px;

    --shadow-sm: 0 1px 2px rgba(3, 7, 15, 0.4);
    --shadow-md: 0 4px 14px rgba(3, 7, 15, 0.45);
    --shadow-lg: 0 16px 40px rgba(3, 7, 15, 0.55);
    --shadow-overlay: 0 24px 64px rgba(2, 5, 12, 0.7);
    --shadow-focus: 0 0 0 var(--ring-width) var(--accent-glow);

    /* -----------------------------------------------------------------------
       Motion. Prices update constantly; animation must never compete with
       the data. Nothing decorative runs longer than --duration-slow, and
       base.css disables all of it under prefers-reduced-motion.
       ----------------------------------------------------------------------- */
    --duration-instant: 80ms;
    --duration-fast: 140ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Price-tick flash: how long a cell stays tinted after a value changes. */
    --duration-tick-flash: 520ms;

    /* -----------------------------------------------------------------------
       Layering. Every z-index in the product comes from this ladder; no
       component may invent one. Gaps of 100 leave room to insert a layer.
       ----------------------------------------------------------------------- */
    --z-base: 0;
    --z-raised: 100;
    --z-sticky: 200;      /* sticky table headers */
    --z-nav: 300;         /* app header, bottom bar */
    --z-dropdown: 400;
    --z-overlay: 500;     /* modal scrim */
    --z-modal: 600;
    --z-toast: 700;
    --z-tooltip: 800;

    /* -----------------------------------------------------------------------
       Layout
       ----------------------------------------------------------------------- */
    --container-sm: 560px;    /* auth cards, legal prose */
    --container-md: 840px;
    --container-lg: 1200px;
    --container-xl: 1560px;   /* dashboard */
    --container-full: 100%;   /* trade terminal */

    --header-height: 60px;
    --bottom-nav-height: 62px;
    --sidebar-width: 236px;

    /* Minimum touch target. WCAG 2.5.8 asks 24px; 44px is the iOS guidance
       and what the mobile trade panel is built against. */
    --touch-target: 44px;

    /* Breakpoints are documentation only — CSS cannot use var() inside a
       media query. Any new @media MUST match one of these exactly. */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;
}

/* ===========================================================================
   Light theme.

   Selection policy lives in app/session.js applyThemeASAP(): an explicit
   choice in localStorage always wins; with no stored choice the OS
   prefers-color-scheme is used, defaulting to dark. That read happens once at
   load, so a terminal never flips colour mid-session.

   There is no @media (prefers-color-scheme) rule here on purpose — the theme
   is applied as a data-theme attribute by that script, which keeps one source
   of truth and lets the toggle work without fighting a media query.

   Only the semantic layer is reassigned. Direction hues are darkened rather
   than reused, because the pastel dark-mode green fails contrast on white.
   =========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    --canvas: #f6f8fd;
    --canvas-alt: #eef2fa;
    --surface-raised: #ffffff;
    --surface-overlay: #ffffff;
    --surface-sunken: #eef2fa;
    --surface-hover: rgba(52, 84, 190, 0.05);
    --surface-active: rgba(52, 84, 190, 0.1);

    --border: rgba(29, 47, 95, 0.14);
    --border-subtle: rgba(29, 47, 95, 0.07);
    --border-strong: rgba(29, 47, 95, 0.3);

    --text: #0b1628;
    --text-secondary: #37476b;
    --text-muted: #5d6a87;
    /* Raised from #8791a8, which was 3.16:1 on white — below AA for body
       text. The hue is unchanged; only the lightness moved. */
    --text-faint: #6a7692;
    --text-on-accent: #ffffff;

    --accent: #3f5fd8;
    --accent-hover: #3453bf;
    --accent-active: #2a449f;
    --accent-text: #2a449f;
    --accent-dim: rgba(63, 95, 216, 0.1);
    --accent-glow: rgba(63, 95, 216, 0.24);

    /* Raised from #0f9b5b, 3.58:1 on white. This colour carries profit
       figures and the active badge, so it is read as information rather
       than decoration and has to clear AA. */
    --up: #0d864f;
    --up-strong: #0a7e49;
    --up-dim: rgba(15, 155, 91, 0.1);
    --up-glow: rgba(15, 155, 91, 0.24);

    --down: #cf2b42;
    --down-strong: #ad1f33;
    --down-dim: rgba(207, 43, 66, 0.1);
    --down-glow: rgba(207, 43, 66, 0.24);

    --flat: #5d6a87;
    --flat-dim: rgba(93, 106, 135, 0.1);

    /* Raised with --up, which it matched: at #0f9b5b the active badge and
       the presence dot were 3.58:1 on white. */
    --success: #0d864f;
    --success-dim: rgba(15, 155, 91, 0.1);
    --danger: #cf2b42;
    --danger-dim: rgba(207, 43, 66, 0.1);
    /* Raised from #9a6a00. A warning badge paints its text on a 10% tint
       of itself, so the real ground is #f5f0e6 rather than white and the
       pair came to 4.17:1. */
    --warning: #8a5f00;
    --warning-dim: rgba(154, 106, 0, 0.1);
    --info: #3f5fd8;
    --info-dim: rgba(63, 95, 216, 0.1);
    --pending: #6d43c8;
    --pending-dim: rgba(109, 67, 200, 0.1);

    --shadow-sm: 0 1px 2px rgba(19, 32, 66, 0.07);
    --shadow-md: 0 4px 14px rgba(19, 32, 66, 0.09);
    --shadow-lg: 0 16px 40px rgba(19, 32, 66, 0.13);
    --shadow-overlay: 0 24px 64px rgba(19, 32, 66, 0.2);
}

/* ===========================================================================
   Arabic. Swapping the UI font is a token change, not a layout change —
   direction itself is handled by [dir="rtl"] plus logical properties in
   base.css, so no component needs an RTL branch.

   Arabic glyphs sit smaller than Latin at the same px, so the base step is
   nudged up one notch to keep the optical size matched.
   =========================================================================== */
:root[lang="ar"],
:root[data-lang="ar"] {
    --font-ui: var(--font-ar);
    --text-base: 0.9375rem;  /* 15px */
    --leading-normal: 1.75;  /* Arabic needs more line height */
    --tracking-caps: 0;      /* letter-spacing breaks Arabic joining */
}

/* ===========================================================================
   Compact density. An opt-in for traders on small laptops who want more rows
   per screen. Only spacing derivations change; nothing re-layouts.
   =========================================================================== */
:root[data-density="compact"] {
    --pad-card: var(--space-4);
    --pad-card-sm: var(--space-3);
    --pad-cell-x: var(--space-3);
    --pad-cell-y: var(--space-2);
    --pad-control-y: var(--space-2);
    --gap-stack: var(--space-3);
}