/* ================================================================
   Calcutta Pool — Design Tokens (v3 Visual Overhaul)
   Premium dark sports-betting / financial terminal aesthetic
   DM Sans + Space Grotesk typography system
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    /* ── Background layers ─────────────────────────────────── */
    --bg-primary:    #0B0F1A;
    --bg-surface:    #131825;
    --bg-elevated:   #1A2035;
    --bg-hover:      rgba(255, 255, 255, 0.03);
    --bg-active:     rgba(255, 255, 255, 0.05);
    --bg-overlay:    rgba(0, 0, 0, 0.6);

    /* ── Borders ───────────────────────────────────────────── */
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong:  rgba(255, 255, 255, 0.15);

    /* ── Text ──────────────────────────────────────────────── */
    --text-primary:   #E8ECF4;
    --text-secondary: #7A8BA8;
    --text-muted:     #3D4A5C;
    --text-inverse:   #0B0F1A;

    /* ── Accent — Emerald green (money / primary CTA) ─────── */
    --accent:         #34D399;
    --accent-hover:   #2CC389;
    --accent-muted:   rgba(52, 211, 153, 0.6);
    --accent-glow:    rgba(52, 211, 153, 0.15);
    --accent-subtle:  rgba(52, 211, 153, 0.08);

    /* ── Money green (same family for earnings, positive) ──── */
    --green:          #34D399;
    --green-bright:   #34D399;
    --green-muted:    rgba(52, 211, 153, 0.6);
    --green-glow:     rgba(52, 211, 153, 0.15);
    --green-subtle:   rgba(52, 211, 153, 0.08);

    /* ── Danger red ────────────────────────────────────────── */
    --red:            #F87171;
    --red-bright:     #F87171;
    --red-muted:      rgba(248, 113, 113, 0.6);
    --red-glow:       rgba(248, 113, 113, 0.15);
    --red-subtle:     rgba(248, 113, 113, 0.1);

    /* ── Warning / Live / Amber ──────────────────────────── */
    --amber:          #FB923C;
    --amber-glow:     rgba(251, 146, 60, 0.15);

    /* ── Gold / Highlight / Rank ──────────────────────────── */
    --gold:           #FBBF24;
    --gold-bright:    #FBBF24;
    --gold-glow:      rgba(251, 191, 36, 0.15);

    /* ── Link / Interactive blue ──────────────────────────── */
    --blue:           #60A5FA;
    --blue-bright:    #93C5FD;
    --blue-glow:      rgba(96, 165, 250, 0.15);

    /* ── Rank colors ───────────────────────────────────────── */
    --rank-gold:      #FBBF24;
    --rank-silver:    #94A3B8;
    --rank-bronze:    #D97706;

    /* ── Seed tier colors ──────────────────────────────────── */
    --seed-1-4:  #FBBF24;
    --seed-5-8:  #94A3B8;
    --seed-9-12: #D97706;
    --seed-13-16: #3D4A5C;

    /* ── Seed circle backgrounds ─────────────────────────── */
    --seed-bg-1:   #FBBF24;
    --seed-bg-2:   #94A3B8;
    --seed-bg-3:   #D97706;
    --seed-bg-4:   #D97706;
    --seed-bg-5:   #7A8BA8;
    --seed-bg-low: #3D4A5C;

    /* ── Typography ────────────────────────────────────────── */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'Space Grotesk', sans-serif;

    --text-xs:   0.6875rem;   /* 11px */
    --text-sm:   0.8125rem;   /* 13px */
    --text-base: 0.9375rem;   /* 15px */
    --text-md:   1rem;         /* 16px */
    --text-lg:   1.125rem;     /* 18px */
    --text-xl:   1.25rem;      /* 20px */
    --text-2xl:  1.5rem;       /* 24px */
    --text-3xl:  1.75rem;      /* 28px */
    --text-4xl:  2.25rem;      /* 36px */
    --text-5xl:  3rem;         /* 48px */

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    700;  /* alias */

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.6;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.03em;
    --tracking-wider:   0.06em;
    --tracking-widest:  0.08em;

    /* ── Spacing ───────────────────────────────────────────── */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* ── Border radius ─────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 100px;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 4px 16px rgba(52, 211, 153, 0.25);
    --shadow-green-glow: 0 4px 16px rgba(52, 211, 153, 0.25);

    /* ── Transitions ───────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 200ms;
    --duration-slow:   400ms;

    /* ── Z-index layers ────────────────────────────────────── */
    --z-base:     1;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-noise:    9999;
}