/* ============================================================
   LineUp FC — Design System Tokens
   D3 Bold v1.0 LIVE — Brand colors, typography, spacing.
   Source of truth: design-tokens.json + brand-guide.md
   ============================================================ */

/* ---------- Brand fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Anton';
  src: url('/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND — PURPLE ---------- */
  --purple-primary: #6D28D9;   /* CTAs primários, headings, brand moments */
  --purple-deep:    #3F0D7E;   /* Gradient end, hero bg, hover */
  --purple-soft:    #A78BFA;   /* Disabled, hover leve, secundário */
  --purple-tint:    #EDE9FE;   /* Cards suaves no light mode */

  /* ---------- ACCENT — LIME ---------- */
  --lime-accent:    #84CC16;   /* "FC", tagline, CTAs sucesso, bola do U */
  --lime-deep:      #65A30D;   /* Hover sobre lime */
  --lime-soft:      #D9F99D;   /* Background success badges */
  --lime-live:      #22C55E;   /* "Ao vivo" — mais natural que lime puro */

  /* ---------- NEUTRALS — CARBON SCALE ---------- */
  --carbon:         #0A0A0A;   /* Dark mode bg principal */
  --bg-base:        #0B0B12;   /* Stadium A bg base (carbon w/ purple tint) */
  --surface-1:      #11121B;   /* Cards */
  --surface-2:      #1A1B28;   /* Cards elevados */
  --slate-default:  #1E293B;   /* Surfaces dark mode */
  --slate-soft:     #334155;   /* Dividers/borders dark */
  --white:          #FFFFFF;
  --gray-100:       #F3F4F6;
  --gray-200:       #E5E7EB;
  --gray-400:       #9CA3AF;
  --gray-600:       #4B5563;
  --gray-800:       #1F2937;

  /* ---------- TEXT — DARK MODE PRIMARY ---------- */
  --text-hi:        #F5F5FA;   /* Texto primário */
  --text-md:        #9AA0B4;   /* Secundário */
  --text-lo:        #64748B;   /* Terciário/dim */
  --text-dim:       #4B5563;   /* Disabled */
  --text-on-purple: #FFFFFF;
  --text-on-lime:   #0A0A0A;

  /* ---------- STATUS / FEEDBACK ---------- */
  --status-error:   #EF4444;   /* Lesão, urgência, breaking */
  --status-warn:    #F59E0B;   /* Atenção, dúvida (warn / provável) */
  --status-success: #10B981;   /* Confirmações, jogador confirmado (MOAT) */
  --status-info:    #3B82F6;   /* Dicas sistema */
  --status-amber:   #FBBF24;   /* Câmbio quente / rascunho */

  /* ---------- LINEUP STATUS (domínio Cartola) ---------- */
  --lineup-provavel:   #F59E0B;   /* Amarelo */
  --lineup-confirmado: #10B981;   /* Verde — MOAT */
  --lineup-duvida:     #F97316;   /* Laranja */
  --lineup-fora:       #EF4444;   /* Vermelho */

  /* ---------- 4 ESTILOS CANÔNICOS (D-105) ---------- */
  --style-seguro:     #84CC16;   /* 🛡 SEGURO — verde lime */
  --style-ousado:     #EF4444;   /* ⚡ OUSADO — vermelho */
  --style-valorizacao:#F59E0B;   /* 📈 VALORIZAÇÃO — amarelo */
  --style-tiro-curto: #3B82F6;   /* 🔒 TIRO CURTO — azul */

  /* ---------- 4 LIGAS CANÔNICAS (D-018+D-043) ---------- */
  --league-bra-1:     #009C3B;   /* Brasileirão verde */
  --league-bra-2:     #FFDF00;   /* Brasileirão amarelo */
  --league-ucl:       #0E1E50;   /* Champions azul deep */
  --league-ucl-2:     #001489;
  --league-pl:        #38003C;   /* Premier League roxo-magenta */
  --league-pl-2:      #DF0067;
  --league-bundes:    #D20515;   /* Bundesliga vermelho */
  --league-bundes-2:  #000000;

  /* ---------- BORDERS ---------- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  /* ---------- GRADIENTS — SIGNATURE ---------- */
  --grad-brand:        linear-gradient(135deg, #6D28D9 0%, #3F0D7E 100%);
  --grad-brand-rev:    linear-gradient(135deg, #3F0D7E 0%, #6D28D9 100%);
  --grad-hero-antes:   linear-gradient(135deg, rgba(239,68,68,0.20) 0%, rgba(109,40,217,0.25) 50%, rgba(251,191,36,0.10) 100%);
  --grad-hero-durante: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(109,40,217,0.25) 50%, rgba(132,204,22,0.10) 100%);
  --grad-hero-pos:     linear-gradient(135deg, rgba(132,204,22,0.20) 0%, rgba(109,40,217,0.18) 50%, rgba(251,191,36,0.10) 100%);
  --grad-hero-uh:      linear-gradient(135deg, rgba(239,68,68,0.28) 0%, rgba(109,40,217,0.22) 50%, rgba(239,68,68,0.10) 100%);
  --grad-cta-success:  linear-gradient(135deg, #22C55E 0%, #84CC16 100%);
  --grad-cta-danger:   linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --grad-cta-purple:   linear-gradient(135deg, #6D28D9 0%, #3F0D7E 100%);

  /* Radial overlay (sofisticação Stadium A) */
  --radial-glow-red:   radial-gradient(circle at 80% 70%, rgba(239,68,68,0.20) 0%, transparent 60%);
  --radial-glow-lime:  radial-gradient(circle at 20% 30%, rgba(132,204,22,0.20) 0%, transparent 60%);
  --radial-glow-amber: radial-gradient(circle at 80% 70%, rgba(251,191,36,0.18) 0%, transparent 60%);

  /* ---------- SPACING — 4pt scale ---------- */
  --space-0:    0px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-2:    8px;
  --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;
  --space-24:   96px;
  --space-32:   128px;

  /* Semantic spacing shortcuts */
  --gap-row:     8px;
  --gap-section: 24px;
  --pad-card:    14px;
  --pad-screen:  18px;
  --pad-screen-tight: 14px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ---------- SHADOWS — DARK-FRIENDLY ---------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 4px 24px rgba(109, 40, 217, 0.32);
  --shadow-lime:  0 4px 24px rgba(132, 204, 22, 0.30);
  --shadow-live:  0 4px 24px rgba(34, 197, 94, 0.35);
  --shadow-danger:0 4px 24px rgba(239, 68, 68, 0.45);

  /* Glow halos for CTAs / hero accents */
  --glow-lime:    0 0 12px rgba(132, 204, 22, 0.65);
  --glow-purple:  0 0 12px rgba(109, 40, 217, 0.55);
  --glow-red:     0 0 12px rgba(239, 68, 68, 0.55);

  /* Text-shadow glows (Stadium A signature) */
  --text-glow-lime:   0 4px 20px rgba(132, 204, 22, 0.30);
  --text-glow-red:    0 4px 20px rgba(239, 68, 68, 0.40);
  --text-glow-amber:  0 4px 20px rgba(251, 191, 36, 0.30);
  --text-glow-purple: 0 4px 20px rgba(109, 40, 217, 0.45);

  /* ---------- MOTION ---------- */
  --motion-fast:   150ms;
  --motion-base:   250ms;
  --motion-slow:   400ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- TYPOGRAPHY — FAMILIES ---------- */
  --font-display: 'Anton', 'Druk', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPOGRAPHY — SCALE ---------- */
  --fs-xs:    10px;
  --fs-sm:    12px;
  --fs-base:  14px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   30px;
  --fs-4xl:   36px;
  --fs-5xl:   48px;
  --fs-6xl:   60px;
  --fs-7xl:   72px;
  --fs-8xl:   88px;   /* Stadium scoreboard hero */

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  --ls-tightest: -3px;     /* Countdown big 64px */
  --ls-tighter:  -1px;
  --ls-tight:    -0.5px;
  --ls-normal:   0;
  --ls-wide:     0.5px;    /* Caps labels */
  --ls-wider:    3px;
  --ls-widest:   6px;      /* Tagline signature */

  /* ---------- Z-INDEX ---------- */
  --z-base: 0;
  --z-card: 1;
  --z-sticky: 10;
  --z-overlay: 20;
  --z-modal: 30;
  --z-toast: 40;
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements.
   Wrap components with these classes to inherit canonical type.
   ============================================================ */

.t-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  transform: skewX(-3deg);
  text-transform: uppercase;
}

.t-tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--lime-accent);
}

/* Display scale — Anton, used sparingly for hero numerics */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-8xl);
  line-height: var(--lh-tight);
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  font-variant-numeric: tabular-nums;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
}
.t-stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums;
}

/* H scale — Inter heavy, for UI headings */
.t-h1 { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xl);  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md);  line-height: var(--lh-snug); }

/* Body */
.t-body-lg { font-family: var(--font-body); font-weight: 500; font-size: 15px;          line-height: var(--lh-normal); }
.t-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-normal); }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 13px;          line-height: var(--lh-normal); }

/* Caps / labels */
.t-caption { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.t-overline{ font-family: var(--font-body); font-weight: 800; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.t-eyebrow { font-family: var(--font-body); font-weight: 900; font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* ============================================================
   GLOBAL RESET (use sparingly — apply where needed)
   ============================================================ */

.lu-reset, .lu-reset * { box-sizing: border-box; margin: 0; padding: 0; }
.lu-reset { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

/* Tabular numbers helper */
.tabular { font-variant-numeric: tabular-nums; }