/* ==========================================================================
   tokens.css — design tokens for the Metaload UI system
   --------------------------------------------------------------------------
   Single source of truth for color, spacing, typography, radii, shadows,
   motion, glass surfaces, and layout dimensions. Naming convention:
   --{category}-{role}-{scale}.

   Loaded BEFORE every other stylesheet. Never override a token in a
   component file — fix it here.
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------- */
    /* Neutral scale (Radix-style 12 steps, cool slate)                     */
    /* -------------------------------------------------------------------- */
    --neutral-1:  #0B0D12;  /* app background */
    --neutral-2:  #11141B;  /* surface (card bg) */
    --neutral-3:  #161A23;  /* surface raised (hover) */
    --neutral-4:  #1C2230;  /* surface pressed / inputs */
    --neutral-5:  #232A3A;  /* border subtle */
    --neutral-6:  #2D3547;  /* border */
    --neutral-7:  #3A4357;  /* border strong */
    --neutral-8:  #4A546B;  /* solid muted */
    --neutral-9:  #6B7794;  /* solid */
    --neutral-10: #8590AC;  /* solid hover */
    --neutral-11: #A8B0C4;  /* text muted */
    --neutral-12: #ECEEF5;  /* text */

    /* -------------------------------------------------------------------- */
    /* Accent — indigo                                                      */
    /* -------------------------------------------------------------------- */
    --accent-1:  #0E0F22;
    --accent-3:  #1E1F4D;  /* subtle fill (selected nav, badge bg) */
    --accent-6:  #3B3FA1;  /* border */
    --accent-9:  #6366F1;  /* solid — primary buttons, links, focus ring */
    --accent-10: #7C7FF5;  /* solid hover */
    --accent-11: #A5A8FA;  /* text on dark surfaces */
    --accent-12: #E0E1FE;  /* text on accent fill */

    /* -------------------------------------------------------------------- */
    /* Semantic colors — 4 stops each (subtle bg, border, solid, text)      */
    /* -------------------------------------------------------------------- */
    --success-3:  #0F2A1F;
    --success-6:  #1F5240;
    --success-9:  #22C55E;
    --success-11: #86EFAC;

    --warning-3:  #2A1F0E;
    --warning-6:  #5C401C;
    --warning-9:  #F59E0B;
    --warning-11: #FCD34D;

    --danger-3:   #2A1015;
    --danger-6:   #5C1F2C;
    --danger-9:   #EF4444;
    --danger-11:  #FCA5A5;

    --info-3:     #0E1F2A;
    --info-6:     #1C415C;
    --info-9:     #38BDF8;
    --info-11:    #7DD3FC;

    /* -------------------------------------------------------------------- */
    /* Translucency & blur (glass surfaces)                                 */
    /* -------------------------------------------------------------------- */
    --border-hairline:        rgba(255, 255, 255, 0.06);
    --border-hairline-strong: rgba(255, 255, 255, 0.10);
    --border-hairline-bright: rgba(255, 255, 255, 0.16);

    --surface-glass-1: rgba(17, 20, 27, 0.72);    /* sticky page header, sidebar */
    --surface-glass-2: rgba(22, 26, 35, 0.80);    /* dropdown, popover */
    --surface-glass-3: rgba(28, 34, 48, 0.88);    /* dialog body */

    --scrim:      rgba(7, 9, 14, 0.64);
    --scrim-blur: saturate(140%) blur(8px);

    --blur-sm: saturate(140%) blur(8px);
    --blur-md: saturate(160%) blur(16px);
    --blur-lg: saturate(180%) blur(24px);

    /* -------------------------------------------------------------------- */
    /* Spacing scale (4px base)                                             */
    /* -------------------------------------------------------------------- */
    --space-0:    0;
    --space-0-5: 2px;
    --space-1:   4px;
    --space-1-5: 6px;
    --space-2:   8px;
    --space-2-5: 10px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;

    /* -------------------------------------------------------------------- */
    /* Radii                                                                */
    /* -------------------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* -------------------------------------------------------------------- */
    /* Typography                                                           */
    /* -------------------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-xs:   11px;  --leading-xs:   16px;
    --text-sm:   13px;  --leading-sm:   20px;
    --text-base: 14px;  --leading-base: 22px;  /* default body */
    --text-md:   15px;  --leading-md:   24px;  /* form inputs */
    --text-lg:   17px;  --leading-lg:   26px;  /* card headers */
    --text-xl:   20px;  --leading-xl:   28px;
    --text-2xl:  24px;  --leading-2xl:  32px;  /* page titles */
    --text-3xl:  30px;  --leading-3xl:  38px;  /* dashboard hero numbers */
    --text-4xl:  36px;  --leading-4xl:  44px;

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

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;

    /* -------------------------------------------------------------------- */
    /* Shadows (elevation)                                                  */
    /* -------------------------------------------------------------------- */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-4: 0 24px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent-9) 40%, transparent);

    /* -------------------------------------------------------------------- */
    /* Motion                                                               */
    /* -------------------------------------------------------------------- */
    --duration-instant:  80ms;
    --duration-fast:    160ms;
    --duration-base:    240ms;
    --duration-slow:    400ms;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -------------------------------------------------------------------- */
    /* Layout dimensions                                                    */
    /* -------------------------------------------------------------------- */
    --sidebar-w:     264px;
    --container-max: 1280px;
    --page-px-d:     32px;
    --page-px-m:     16px;
    --touch-target:  44px;

    /* Safe areas (iOS notch / home indicator) */
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);

    /* -------------------------------------------------------------------- */
    /* Breakpoints (declarative — CSS @media queries inline these literals) */
    /* -------------------------------------------------------------------- */
    --bp-sm:  480px;
    --bp-md:  768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* -------------------------------------------------------------------- */
    /* Z-index scale                                                        */
    /* -------------------------------------------------------------------- */
    --z-base:     0;
    --z-sticky:   100;
    --z-drawer:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-dropdown: 500;
    --z-toast:    600;
    --z-tooltip:  700;
}

/* Reduced motion: collapse all transition durations to zero */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast:    0ms;
        --duration-base:    0ms;
        --duration-slow:    0ms;
    }
}