/*
Ability Esports — Design Tokens
Custom properties only, no rules — per /docs/DESIGN-TOKENS.md §13/§14.
Every value here is reproduced verbatim from the already-approved Stage 2
design token specification (/docs/DESIGN-TOKENS.md). No value is invented
here; this file is a faithful CSS implementation of that document.
*/

/* ===== Layer 1 — Primitives (referenced only by Layer 2 below) ===== */
:root {
	/* Color primitives */
	--ae-primitive-amber-300: #E0B65C;
	--ae-primitive-amber-500: #C9962F;
	--ae-primitive-amber-700: #A87A1F;

	--ae-primitive-teal-500: #3E7C8C;

	--ae-primitive-charcoal-900: #0F1116;
	--ae-primitive-charcoal-800: #14161D;
	--ae-primitive-charcoal-700: #1B1E27;
	--ae-primitive-charcoal-600: #232733;
	--ae-primitive-charcoal-500: #2C303D;

	--ae-primitive-warm-100: #F3EFE6;
	--ae-primitive-warm-300: #B8B3A8;
	--ae-primitive-warm-500: #7C7869;

	--ae-primitive-green-500: #4C8B5E;
	--ae-primitive-orange-500: #D48A3E;
	--ae-primitive-red-500: #E1523D;
	--ae-primitive-red-600: #B0463A;
	--ae-primitive-violet-400: #8A7B9E;

	/* Font primitives */
	--ae-primitive-font-archivo: "Archivo", "Arial Narrow", sans-serif;
	--ae-primitive-font-public-sans: "Public Sans", -apple-system, "Segoe UI", sans-serif;

	--ae-primitive-weight-regular: 400;
	--ae-primitive-weight-medium: 500;
	--ae-primitive-weight-semibold: 600;
	--ae-primitive-weight-bold: 700;
	--ae-primitive-weight-extrabold: 800;

	/* Spacing primitives (8px base scale) */
	--ae-primitive-space-4: 0.25rem;
	--ae-primitive-space-8: 0.5rem;
	--ae-primitive-space-12: 0.75rem;
	--ae-primitive-space-16: 1rem;
	--ae-primitive-space-24: 1.5rem;
	--ae-primitive-space-32: 2rem;
	--ae-primitive-space-48: 3rem;
	--ae-primitive-space-64: 4rem;
	--ae-primitive-space-96: 6rem;
	--ae-primitive-space-128: 8rem;

	/* Radius primitives */
	--ae-primitive-radius-0: 0px;
	--ae-primitive-radius-6: 6px;
	--ae-primitive-radius-12: 12px;
	--ae-primitive-radius-20: 20px;
	--ae-primitive-radius-999: 999px;

	/* Shadow primitives */
	--ae-primitive-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
	--ae-primitive-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
	--ae-primitive-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);

	/* Duration & easing primitives */
	--ae-primitive-duration-0: 0ms;
	--ae-primitive-duration-120: 120ms;
	--ae-primitive-duration-200: 200ms;
	--ae-primitive-duration-400: 400ms;
	--ae-primitive-duration-1500: 1500ms;
	--ae-primitive-duration-1800: 1800ms;

	--ae-primitive-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ae-primitive-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ae-primitive-ease-linear: linear;

	/* Breakpoint primitives (documented values — @media conditions hardcode the same numbers; see /docs/DESIGN-TOKENS.md §6) */
	--ae-primitive-bp-xs: 360px;
	--ae-primitive-bp-sm: 480px;
	--ae-primitive-bp-md: 768px;
	--ae-primitive-bp-lg: 1024px;
	--ae-primitive-bp-xl: 1280px;
	--ae-primitive-bp-2xl: 1440px;

	/* Z-index primitives */
	--ae-primitive-z-0: 0;
	--ae-primitive-z-10: 10;
	--ae-primitive-z-20: 20;
	--ae-primitive-z-30: 30;
	--ae-primitive-z-40: 40;
	--ae-primitive-z-50: 50;
	--ae-primitive-z-60: 60;
}

/* ===== Layer 2 — Semantic tokens (reference Layer 1 only) ===== */
:root {
	/* Brand */
	--ae-color-brand-primary: var(--ae-primitive-amber-500);
	--ae-color-brand-primary-bright: var(--ae-primitive-amber-300);
	--ae-color-brand-primary-dark: var(--ae-primitive-amber-700);
	--ae-color-brand-secondary: var(--ae-primitive-teal-500);

	/* Background (page-level) */
	--ae-color-bg-primary: var(--ae-primitive-charcoal-800);
	--ae-color-bg-secondary: var(--ae-primitive-charcoal-900);
	--ae-color-bg-tertiary: var(--ae-primitive-charcoal-700);

	/* Surface (component-level) */
	--ae-color-surface-1: var(--ae-primitive-charcoal-700);
	--ae-color-surface-2: var(--ae-primitive-charcoal-600);
	--ae-color-surface-3: var(--ae-primitive-charcoal-500);

	/* Text */
	--ae-color-text-primary: var(--ae-primitive-warm-100);
	--ae-color-text-secondary: var(--ae-primitive-warm-300);
	--ae-color-text-muted: var(--ae-primitive-warm-500);
	--ae-color-text-inverse: var(--ae-primitive-charcoal-800);

	/* Border */
	--ae-color-border-subtle: rgba(243, 239, 230, 0.06);
	--ae-color-border-default: rgba(243, 239, 230, 0.12);
	--ae-color-border-strong: rgba(243, 239, 230, 0.24);

	/* Accent (data visualization only) */
	--ae-color-accent-primary: var(--ae-primitive-amber-500);
	--ae-color-accent-secondary: var(--ae-primitive-teal-500);
	--ae-color-accent-tertiary: var(--ae-primitive-violet-400);

	/* Interactive */
	--ae-color-interactive-hover: rgba(201, 150, 47, 0.10);
	--ae-color-interactive-active: rgba(201, 150, 47, 0.18);
	--ae-color-focus-ring: var(--ae-primitive-amber-300);

	/* Status */
	--ae-color-success: var(--ae-primitive-green-500);
	--ae-color-warning: var(--ae-primitive-orange-500);
	--ae-color-error: var(--ae-primitive-red-600);
	--ae-color-info: var(--ae-primitive-teal-500);
	--ae-color-live: var(--ae-primitive-red-500);
	--ae-color-upcoming: var(--ae-color-info);
	--ae-color-completed: var(--ae-color-text-muted);

	/* Typography */
	--ae-font-display: var(--ae-primitive-font-archivo);
	--ae-font-body: var(--ae-primitive-font-public-sans);
	--ae-font-data: var(--ae-primitive-font-archivo);

	--ae-weight-body: var(--ae-primitive-weight-regular);
	--ae-weight-medium: var(--ae-primitive-weight-medium);
	--ae-weight-heading: var(--ae-primitive-weight-bold);
	--ae-weight-display: var(--ae-primitive-weight-extrabold);

	--ae-text-display-xl: clamp(3.5rem, 2.6rem + 3.5vw, 6rem);
	--ae-text-display-lg: clamp(2.5rem, 2rem + 2vw, 4rem);
	--ae-text-h1: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
	--ae-text-h2: clamp(1.5rem, 1.35rem + 0.6vw, 2rem);
	--ae-text-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--ae-text-h4: 1.125rem;
	--ae-text-h5: 1rem;
	--ae-text-body-lg: 1.125rem;
	--ae-text-body: 1rem;
	--ae-text-body-sm: 0.875rem;
	--ae-text-caption: 0.75rem;
	--ae-text-eyebrow: 0.75rem;
	--ae-text-nav: 0.9375rem;
	--ae-text-button: 0.9375rem;
	--ae-text-badge: 0.6875rem;
	--ae-text-score: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
	--ae-text-statistic: clamp(2rem, 1.7rem + 1.5vw, 3.5rem);
	--ae-text-countdown: clamp(1.75rem, 1.5rem + 1.2vw, 3rem);

	--ae-leading-tight: 1.02;
	--ae-leading-snug: 1.1;
	--ae-leading-normal: 1.3;
	--ae-leading-body: 1.6;
	--ae-leading-single: 1;

	--ae-tracking-tight: -0.01em;
	--ae-tracking-normal: normal;
	--ae-tracking-wide: 0.01em;
	--ae-tracking-eyebrow: 0.04em;
	--ae-tracking-badge: 0.03em;

	--ae-measure-heading: 30ch;
	--ae-measure-body: 68ch;
	--ae-measure-narrow: 60ch;

	/* Spacing */
	--ae-space-xs: var(--ae-primitive-space-4);
	--ae-space-sm: var(--ae-primitive-space-8);
	--ae-space-md: var(--ae-primitive-space-16);
	--ae-space-lg: var(--ae-primitive-space-24);
	--ae-space-xl: var(--ae-primitive-space-32);
	--ae-space-2xl: var(--ae-primitive-space-48);
	--ae-space-3xl: var(--ae-primitive-space-64);
	--ae-space-4xl: var(--ae-primitive-space-96);
	--ae-space-5xl: var(--ae-primitive-space-128);

	/* Containers */
	--ae-container-reading: 68ch;
	--ae-container-content: 1120px;
	--ae-container-wide: 1440px;

	--ae-gutter-mobile: var(--ae-space-md);
	--ae-gutter-tablet: var(--ae-space-xl);
	--ae-gutter-desktop: var(--ae-space-2xl);

	/* Radius */
	--ae-radius-none: var(--ae-primitive-radius-0);
	--ae-radius-sm: var(--ae-primitive-radius-6);
	--ae-radius-md: var(--ae-primitive-radius-12);
	--ae-radius-lg: var(--ae-primitive-radius-20);
	--ae-radius-pill: var(--ae-primitive-radius-999);

	/* Border */
	--ae-border-width-hairline: 1px;
	--ae-border-width-thick: 2px;
	--ae-border-style: solid;

	--ae-border-subtle: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-border-subtle);
	--ae-border-default: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-border-default);
	--ae-border-strong: var(--ae-border-width-hairline) var(--ae-border-style) var(--ae-color-border-strong);
	--ae-border-focus: var(--ae-border-width-thick) var(--ae-border-style) var(--ae-color-focus-ring);

	/* Shadow (elevation) */
	--ae-shadow-none: none;
	--ae-shadow-subtle: none;
	--ae-shadow-card: var(--ae-primitive-shadow-sm);
	--ae-shadow-floating: var(--ae-primitive-shadow-md);
	--ae-shadow-modal: var(--ae-primitive-shadow-lg);
	--ae-shadow-overlay: var(--ae-primitive-shadow-lg);

	/* Gradient (closed list — no additions without design review) */
	--ae-gradient-photo-overlay: linear-gradient(to top, rgba(10, 11, 15, 0.85), rgba(10, 11, 15, 0));

	/* Motion */
	--ae-duration-instant: var(--ae-primitive-duration-0);
	--ae-duration-fast: var(--ae-primitive-duration-120);
	--ae-duration-normal: var(--ae-primitive-duration-200);
	--ae-duration-slow: var(--ae-primitive-duration-400);
	--ae-duration-shimmer: var(--ae-primitive-duration-1500);
	--ae-duration-pulse: var(--ae-primitive-duration-1800);

	--ae-ease-standard: var(--ae-primitive-ease-out);
	--ae-ease-emphasized: var(--ae-primitive-ease-in-out);
	--ae-ease-entrance: var(--ae-primitive-ease-out);
	--ae-ease-exit: var(--ae-primitive-ease-in-out);
	--ae-ease-linear: var(--ae-primitive-ease-linear);

	/* Z-index */
	--ae-z-base: var(--ae-primitive-z-0);
	--ae-z-content: var(--ae-primitive-z-10);
	--ae-z-sticky: var(--ae-primitive-z-20);
	--ae-z-header: var(--ae-primitive-z-30);
	--ae-z-dropdown: var(--ae-primitive-z-40);
	--ae-z-overlay: var(--ae-primitive-z-50);
	--ae-z-modal: var(--ae-primitive-z-50);
	--ae-z-toast: var(--ae-primitive-z-60);
}

/* ===== Layer 3 — Component tokens (reference Layer 2 only) ===== */
:root {
	/* Button */
	--ae-button-height-md: 2.75rem;
	--ae-button-height-sm: 2.25rem;
	--ae-button-padding-x: var(--ae-space-lg);
	--ae-button-gap-icon: var(--ae-space-sm);
	--ae-button-radius: var(--ae-radius-sm);
	--ae-button-font: var(--ae-text-button);
	--ae-button-weight: var(--ae-primitive-weight-bold);

	/* Card */
	--ae-card-padding: var(--ae-space-lg);
	--ae-card-radius: var(--ae-radius-md);
	--ae-card-radius-featured: var(--ae-radius-lg);
	--ae-card-gap: var(--ae-space-md);
	--ae-card-image-ratio: 16 / 9;
	--ae-card-image-ratio-square: 1 / 1;
	--ae-card-image-ratio-portrait: 4 / 5;

	/* Navigation */
	--ae-nav-height: 4.5rem;
	--ae-nav-height-mobile: 3.5rem;
	--ae-nav-link-gap: var(--ae-space-xl);
	--ae-nav-font: var(--ae-text-nav);
	--ae-nav-active-mark-height: 2px;
	--ae-nav-active-mark-width: 1.5rem;

	/* Form */
	--ae-input-height: 2.75rem;
	--ae-input-padding-x: var(--ae-space-md);
	--ae-input-radius: var(--ae-radius-sm);
	--ae-input-bg: var(--ae-color-surface-2);
	--ae-input-border: var(--ae-border-default);
	--ae-input-border-focus: var(--ae-border-focus);

	/* Badge */
	--ae-badge-height: 1.5rem;
	--ae-badge-padding-x: var(--ae-space-sm);
	--ae-badge-radius: var(--ae-radius-pill);
	--ae-badge-font: var(--ae-text-badge);
	--ae-badge-gap-icon: 0.25rem;

	/* Hero */
	--ae-hero-min-height-desktop: 32rem;
	--ae-hero-min-height-mobile: 24rem;
	--ae-hero-content-max-width: var(--ae-container-content);
	--ae-hero-overlay: var(--ae-gradient-photo-overlay);

	/* Esports data (score/rank/statistic/ranking-table rendering) */
	--ae-data-row-height: 2.75rem;
	--ae-data-row-radius: var(--ae-radius-none);
	--ae-data-row-border: var(--ae-border-subtle);
	--ae-data-header-bg: var(--ae-color-surface-2);
	--ae-data-header-font: var(--ae-text-caption);
	--ae-data-header-weight: var(--ae-primitive-weight-bold);
	--ae-data-header-tracking: var(--ae-tracking-eyebrow);
	--ae-data-cell-numeric-font: var(--ae-font-data);
	--ae-data-cell-numeric-variant: tabular-nums;

	/* Live UI (tokens only — the .ae-live-dot component rule itself is
	   added when the Live UI component is actually built; see
	   /docs/DESIGN-TOKENS.md §10) */
	--ae-live-dot-size: 0.625rem;
	--ae-live-dot-color: var(--ae-color-live);
	--ae-live-pulse-duration: var(--ae-duration-pulse);
	--ae-live-pulse-easing: var(--ae-ease-emphasized);
}