/* =========================================
   TOKENS
   ========================================= */
*:not(input):not(textarea) {
   caret-color: transparent !important;
}


:root {
   /* Brand palette */
   --brand-bg: #151B20;
   --brand-red-50: #fef2f2;
   --brand-red-200: #fca5a5;
   --brand-red: #DF1A1A;
   --brand-red-700: #c01515;
   --brand-red-900: #7f1010;
   --brand-blue-100: #dbeafe;
   --brand-blue-300: #93c5fd;
   --brand-blue: #0046E0;
   --brand-blue-400: #60a5fa;
   --brand-blue-700: #1d4ed8;
   --win: #00E07D;
   --lose: #FD3E3E;

   /* Functional accents */
   --accent-info: var(--brand-blue);
   --accent-info-soft: var(--brand-blue-400);
   --accent-danger: var(--brand-red);
   --accent-danger-soft: var(--brand-red-200);
   --accent-success: var(--win);

   /* Surface / text */
   --body-bg: radial-gradient(circle at top, #222b33 0, #151B20 45%, #06080a 100%);
   --bg: #151B20;
   --bg-soft: #1b232b;
   --bg-card: #12181e;
   --bg-elevated: #10161d;
   --bg-header: #1c1c1e;
   --text: #f5f5f5;
   --text-contrast: #ffffff;
   --text-dim-strong: #e5e7eb;
   --text-muted: #9ca3af;
   --text-soft: #9ca3af;

   /* Surface aliases (design system) */
   --surface-1: var(--bg);
   --surface-2: var(--bg-soft);
   --surface-3: var(--bg-card);
   --surface-4: var(--bg-elevated);
   --text-strong: var(--text);

   /* Borders / table helpers */
   --border-subtle: rgba(148, 163, 184, 0.28);
   --border: rgba(148, 163, 184, 0.28);
   --border-strong: rgba(148, 163, 184, 0.6);
   --border-header: rgba(255, 255, 255, 0.06);
   --card-border-width: 1px;
   --card-border-width-subtle: 1px;
   --card-border-color: var(--border-subtle);
   --card-border-color-strong: var(--border-strong);
   --table-group-bg: #0b1015;

   /* Radius / shadows / transitions */
   --radius-xs: 8px;
   --radius-sm: 12px;
   --radius-md: 14px;
   --radius-lg: 18px;
   --radius-xl: 24px;
   --radius-2xl: 32px;
   --radius-pill: 999px;
   --field-height-md: 38px;
   --field-padding-y: 0.5rem;
   --field-padding-x: 0.9rem;
   --field-font-size: var(--font-size-sm);
   --field-line-height: 1.2;
   --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.2);
   --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.28);
   --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
   --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.45);
   --transition-fast: 0.18s ease-out;
   --transition-medium: 0.28s ease-out;
   --transition-slow: 0.45s ease-out;
   --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

   /* Typography */
   --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-size-2xs: 0.7rem;
   --font-size-xs: 0.78rem;
   --font-size-sm: 0.85rem;
   --font-size-md: 0.95rem;
   --font-size-lg: 1.1rem;
   --font-size-xl: 1.35rem;
   --font-size-2xl: 1.6rem;
   --font-size-3xl: 2rem;
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.65;

   /* Spacing scale */
   --space-0: 0;
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-7: 32px;
   --space-8: 40px;
   --space-9: 48px;
   --space-10: 64px;

   /* Layout */
   --container-width: 1180px;
   --layout-content-max-width: 80%;
   --container-padding: var(--space-4);

   /* Focus ring */
   --focus-ring: #93c5fd;
   --focus-ring-offset: 2px;

   /* Component language */
   --control-bg: var(--bg-soft);
   --control-border: var(--border-subtle);
   --control-border-focus: var(--border-strong);
   --control-text: var(--text);
   --control-radius: var(--radius-sm);

   --surface-panel-bg: var(--bg-card);
   --surface-panel-border: var(--border-subtle);
   --surface-panel-shadow: var(--shadow-subtle);
   --surface-panel-padding: 2.2rem 2rem 2.4rem;
   --surface-panel-padding-mobile: clamp(1.35rem, 4.8vw, 1.9rem);
   --surface-card-bg: var(--surface-2);
   --surface-card-border: var(--border-subtle);
   --surface-card-shadow: var(--shadow-sm);

   --action-primary-bg: var(--brand-red);
   --action-primary-bg-hover: var(--brand-red-700);
   --action-primary-text: var(--text-contrast);
   --action-primary-shadow: 0 10px 22px rgba(223, 26, 26, 0.35);
   --action-primary-shadow-hover: 0 14px 30px rgba(223, 26, 26, 0.5);

   --action-secondary-bg: transparent;
   --action-secondary-text: var(--text-dim-strong);
   --action-secondary-border: rgba(148, 163, 184, 0.7);

   --header-bg: var(--bg-header);
   --header-border: var(--border-header);
   --header-link: rgba(255, 255, 255, 0.72);
   --header-link-hover: rgba(255, 255, 255, 0.96);
   --header-link-hover-bg: rgba(255, 255, 255, 0.1);
   --header-link-current: var(--text-contrast);
   --header-link-current-bg: rgba(255, 255, 255, 0.08);

   --badge-beta-fg: #fff5f5;
   --badge-beta-bg: rgba(127, 16, 16, 0.92);
   --badge-beta-border: rgba(252, 165, 165, 0.45);

   --compare-side-a-bg: rgba(223, 26, 26, 0.2);
   --compare-side-b-bg: rgba(96, 165, 250, 0.15);
   --compare-side-a-bg-strong: rgba(223, 26, 26, 0.3);
   --compare-side-b-bg-strong: rgba(0, 70, 224, 0.3);
   --compare-side-a-fg: var(--brand-red);
   --compare-side-b-fg: var(--accent-info-soft);
   --compare-role-a-border: rgba(223, 26, 26, 0.45);
   --compare-role-a-bg: rgba(223, 26, 26, 0.12);
   --compare-role-b-border: rgba(0, 70, 224, 0.45);
   --compare-role-b-bg: rgba(0, 70, 224, 0.12);
   --compare-fill-a: rgba(223, 26, 26, 0.75);
   --compare-fill-b: rgba(0, 70, 224, 0.75);
   --compare-card-a-border: rgba(223, 26, 26, 0.65);
   --compare-card-a-outline: rgba(223, 26, 26, 0.35);
   --tooltip-border: #273038;
   --progress-track-bg: #2b343d;

   --state-success-bg: rgba(0, 224, 125, 0.16);
   --state-success-border: rgba(0, 224, 125, 0.5);
   --state-danger-bg: rgba(253, 62, 62, 0.18);
   --state-danger-border: rgba(253, 62, 62, 0.55);
   --state-neutral-bg: rgba(148, 163, 184, 0.18);
   --state-neutral-border: rgba(148, 163, 184, 0.55);
}