/* ==========================================================================
   Starlity Legacy Trading — Design Tokens
   Brand: sky blue primary, black / charcoal / white / silver accents.
   ========================================================================== */

:root {
    /* Brand colors */
    --sl-color-primary: #0284c7;
    --sl-color-primary-light: #38bdf8;
    --sl-color-primary-lighter: #bae6fd;
    --sl-color-primary-dark: #075985;
    --sl-color-primary-darker: #0c4a6e;

    --sl-color-black: #0a0e13;
    --sl-color-charcoal: #171d24;
    --sl-color-charcoal-light: #2a333d;
    --sl-color-charcoal-lighter: #3d4a56;

    --sl-color-silver: #c7ced6;
    --sl-color-silver-light: #e6eaee;
    --sl-color-silver-dark: #8b95a1;

    --sl-color-white: #ffffff;
    --sl-color-off-white: #f6f8fa;
    --sl-color-mist: #eef2f5;

    --sl-color-success: #14934c;
    --sl-color-warning: #b7791f;
    --sl-color-danger: #c0392b;

    /* Text */
    --sl-text-heading: var(--sl-color-charcoal);
    --sl-text-body: #3c4650;
    --sl-text-muted: #6b7684;
    --sl-text-on-dark: #eef2f5;
    --sl-text-on-dark-muted: #dde4ea;

    /* Surfaces */
    --sl-surface-page: var(--sl-color-white);
    --sl-surface-alt: var(--sl-color-off-white);
    --sl-surface-dark: var(--sl-color-charcoal);
    --sl-surface-darker: var(--sl-color-black);

    /* Typography */
    --sl-font-heading: 'Manrope', 'Segoe UI', Arial, sans-serif;
    --sl-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

    /* Spacing scale */
    --sl-space-1: 0.25rem;
    --sl-space-2: 0.5rem;
    --sl-space-3: 0.75rem;
    --sl-space-4: 1rem;
    --sl-space-5: 1.5rem;
    --sl-space-6: 2rem;
    --sl-space-7: 3rem;
    --sl-space-8: 4rem;
    --sl-space-9: 6rem;
    --sl-space-10: 8rem;

    /* Radii */
    --sl-radius-sm: 6px;
    --sl-radius-md: 12px;
    --sl-radius-lg: 20px;
    --sl-radius-pill: 999px;

    /* Shadows */
    --sl-shadow-sm: 0 2px 8px rgba(10, 14, 19, 0.06);
    --sl-shadow-md: 0 8px 24px rgba(10, 14, 19, 0.10);
    --sl-shadow-lg: 0 20px 48px rgba(10, 14, 19, 0.16);
    --sl-shadow-primary: 0 12px 30px rgba(2, 132, 199, 0.28);

    /* Layout */
    --sl-container-width: 1240px;
    --sl-header-height: 116px;

    /* Motion */
    --sl-transition-fast: 160ms ease;
    --sl-transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --sl-transition-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-index scale */
    --sl-z-nav: 100;
    --sl-z-dropdown: 110;
    --sl-z-overlay: 200;
}

/* On phones the top utility bar (tagline/meta) is hidden — see nav.css —
   so the header is shorter. This keeps main's top padding and the mobile
   nav panel's top offset accurate instead of relying on a single guessed
   height that breaks if the tagline wraps to two lines on a narrow screen. */
@media (max-width: 640px) {
    :root { --sl-header-height: 72px; }
}