/*!
 * 4six Design Tokens
 * Single source of truth for colors, type, spacing, motion.
 */

:root {
    /* ── Brand palette ───────────────────────────────────── */
    --fx-navy-900: #0B1220;
    --fx-navy-800: #111A2E;
    --fx-navy-700: #18243F;
    --fx-navy-600: #22324F;
    --fx-navy-500: #2D3E5E;

    --fx-green-500: #00D492;   /* primary accent */
    --fx-green-600: #00B47B;
    --fx-green-400: #4EE3B3;
    --fx-green-50:  #E6FBF4;

    --fx-gold-500: #F5B700;    /* highlight / odds */
    --fx-gold-600: #D19C00;
    --fx-gold-400: #FFCE3A;

    --fx-red-500: #EF4444;     /* loss / alerts */
    --fx-red-600: #DC2626;

    --fx-white: #FFFFFF;
    --fx-fog-100: #F3F5F9;
    --fx-fog-200: #E4E8EF;
    --fx-fog-400: #B5BCCB;
    --fx-fog-600: #6E7890;

    /* ── Semantic ─────────────────────────────────────────── */
    --fx-bg: var(--fx-navy-900);
    --fx-bg-raised: var(--fx-navy-800);
    --fx-bg-elevated: var(--fx-navy-700);
    --fx-surface: rgba(255, 255, 255, 0.03);
    --fx-surface-strong: rgba(255, 255, 255, 0.06);
    --fx-border: rgba(255, 255, 255, 0.08);
    --fx-border-strong: rgba(255, 255, 255, 0.16);

    --fx-text: #ECEFF5;
    --fx-text-muted: #9AA3B8;
    --fx-text-dim: #6E7890;
    --fx-text-on-accent: #062016;

    --fx-accent: var(--fx-green-500);
    --fx-accent-hover: var(--fx-green-400);
    --fx-highlight: var(--fx-gold-500);

    /* ── Typography ───────────────────────────────────────── */
    --fx-font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fx-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fx-fs-xs:    0.75rem;   /* 12 */
    --fx-fs-sm:    0.875rem;  /* 14 */
    --fx-fs-base:  1rem;      /* 16 */
    --fx-fs-md:    1.125rem;  /* 18 */
    --fx-fs-lg:    1.25rem;   /* 20 */
    --fx-fs-xl:    1.5rem;    /* 24 */
    --fx-fs-2xl:   2rem;      /* 32 */
    --fx-fs-3xl:   2.75rem;   /* 44 */
    --fx-fs-4xl:   3.75rem;   /* 60 */
    --fx-fs-hero:  clamp(2.5rem, 5vw + 1rem, 5rem);

    --fx-lh-tight: 1.1;
    --fx-lh-snug:  1.3;
    --fx-lh-body:  1.6;
    --fx-lh-loose: 1.8;

    --fx-tracking-tight: -0.02em;
    --fx-tracking-body: 0;
    --fx-tracking-wide: 0.08em;

    /* ── Spacing (4px base) ───────────────────────────────── */
    --fx-sp-1: 0.25rem;
    --fx-sp-2: 0.5rem;
    --fx-sp-3: 0.75rem;
    --fx-sp-4: 1rem;
    --fx-sp-5: 1.25rem;
    --fx-sp-6: 1.5rem;
    --fx-sp-7: 1.75rem;
    --fx-sp-8: 2rem;
    --fx-sp-10: 2.5rem;
    --fx-sp-12: 3rem;
    --fx-sp-16: 4rem;
    --fx-sp-20: 5rem;
    --fx-sp-24: 6rem;
    --fx-sp-32: 8rem;

    /* ── Layout ───────────────────────────────────────────── */
    --fx-container: 1280px;
    --fx-container-wide: 1440px;
    --fx-container-narrow: 880px;
    --fx-gutter: clamp(1rem, 3vw, 2rem);

    /* ── Radii ────────────────────────────────────────────── */
    --fx-radius-sm: 6px;
    --fx-radius-md: 10px;
    --fx-radius-lg: 16px;
    --fx-radius-xl: 24px;
    --fx-radius-2xl: 32px;
    --fx-radius-pill: 999px;

    /* ── Shadows ──────────────────────────────────────────── */
    --fx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --fx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --fx-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
    --fx-glow-green: 0 0 32px rgba(0, 212, 146, 0.35);
    --fx-glow-gold: 0 0 32px rgba(245, 183, 0, 0.35);

    /* ── Motion ───────────────────────────────────────────── */
    --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --fx-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --fx-dur-fast: 150ms;
    --fx-dur-base: 250ms;
    --fx-dur-slow: 450ms;
    --fx-dur-glacial: 900ms;

    /* ── Z-index stack ───────────────────────────────────── */
    --fx-z-base: 1;
    --fx-z-dropdown: 100;
    --fx-z-sticky: 200;
    --fx-z-overlay: 500;
    --fx-z-modal: 800;
    --fx-z-toast: 900;
    --fx-z-max: 9999;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --fx-dur-fast: 1ms;
        --fx-dur-base: 1ms;
        --fx-dur-slow: 1ms;
        --fx-dur-glacial: 1ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Utility base */
.fx-container {
    width: min(100% - var(--fx-gutter) * 2, var(--fx-container));
    margin-inline: auto;
}

.fx-container--wide  { max-width: var(--fx-container-wide); }
.fx-container--narrow { max-width: var(--fx-container-narrow); }

.fx-stack > * + * { margin-block-start: var(--fx-sp-6); }

.fx-eyebrow {
    font-family: var(--fx-font-display);
    font-size: var(--fx-fs-sm);
    letter-spacing: var(--fx-tracking-wide);
    text-transform: uppercase;
    color: var(--fx-accent);
    font-weight: 600;
}