/**
 * AI SPORT — design tokens
 * Source: https://aisport-redesign-prototype.vercel.app/
 * Stage 1 — extracted from live prototype CSS + screenshots
 */

:root {
  /* ── Background layers ── */
  --as-bg-0: #0e0f10;
  --as-bg-1: #0d0d0e;
  --as-bg-2: #151517;

  /* ── Surfaces ── */
  --as-surface-0: #0d0d0e;
  --as-surface-1: #1c1c1f;
  --as-surface-2: #242427;

  /* ── Cards ── */
  --as-card: #1c1c1f;
  --as-card-strong: #2e2e32;
  --as-card-glass: rgba(22, 23, 25, 0.62);

  /* ── Borders ── */
  --as-border: rgba(255, 255, 255, 0.12);
  --as-border-strong: rgba(255, 255, 255, 0.18);
  --as-border-subtle: rgba(255, 255, 255, 0.06);

  /* ── Text ── */
  --as-text: #ffffff;
  --as-text-soft: rgba(255, 255, 255, 0.72);
  --as-muted: rgba(255, 255, 255, 0.52);
  --as-muted-2: rgba(255, 255, 255, 0.32);

  /* ── Brand accent (prototype lime — live source of truth) ── */
  --as-accent: #b6f075;
  --as-accent-strong: #a4e45f;
  --as-accent-soft: rgba(182, 240, 117, 0.16);
  --as-accent-rgb: 182, 240, 117;
  --as-on-accent: #151517;

  /* ── Secondary accent (inferred — web dashboard / info highlights) ── */
  --as-accent-2: #6b8cff;
  --as-accent-2-soft: rgba(107, 140, 255, 0.14);

  /* ── Semantic ── */
  --as-success: #b6f075;
  --as-success-soft: rgba(182, 240, 117, 0.14);
  --as-warning: #f0a030;
  --as-warning-soft: rgba(240, 160, 48, 0.14);
  --as-danger: #ff5a5a;
  --as-danger-soft: rgba(255, 90, 90, 0.14);
  --as-info: #5b9fd4;
  --as-info-soft: rgba(91, 159, 212, 0.14);

  /* ── Gradients (prototype-exact where noted) ── */
  --as-gradient-app-host: radial-gradient(120% 90% at 50% 0%, #26282b 0%, #161718 55%, #0e0f10 100%);
  --as-gradient-onboarding-orb: radial-gradient(circle, rgba(var(--as-accent-rgb), 0.16), transparent 68%);
  --as-gradient-photo-overlay: linear-gradient(90deg, rgba(8, 9, 10, 0.94) 6%, rgba(8, 9, 10, 0.55) 46%, rgba(8, 9, 10, 0.05) 82%);
  --as-gradient-challenge-fade: linear-gradient(180deg, rgba(10, 11, 12, 0.12) 0%, rgba(10, 11, 12, 0.1) 45%, rgba(13, 14, 16, 0.94) 100%);
  --as-gradient-card-accent: linear-gradient(135deg, rgba(var(--as-accent-rgb), 0.22) 0%, rgba(var(--as-accent-rgb), 0.04) 100%);
  --as-gradient-phone-bezel: linear-gradient(150deg, #3a3c40, #1a1b1d 40%, #2a2b2e);
  --as-gradient-immersive-camera: radial-gradient(120% 80% at 50% 30%, #20231b, #0a0b08 70%);
  --as-gradient-web-sidebar: linear-gradient(180deg, var(--as-bg-1) 0%, var(--as-bg-0) 100%);

  /* ── Radii (prototype metrics) ── */
  --as-radius-xs: 8px;
  --as-radius-sm: 11px;
  --as-radius-md: 14px;
  --as-radius-lg: 16px;
  --as-radius-xl: 18px;
  --as-radius-2xl: 22px;
  --as-radius-3xl: 30px;
  --as-radius-pill: 999px;
  --as-radius-phone: 57px;
  --as-radius-phone-frame: 62px;

  /* ── Shadows & glows ── */
  --as-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --as-shadow-card: 0 8px 26px -12px rgba(0, 0, 0, 0.5);
  --as-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.4);
  --as-shadow-glow: 0 6px 24px rgba(var(--as-accent-rgb), 0.3);
  --as-shadow-glow-strong: 0 8px 30px rgba(var(--as-accent-rgb), 0.4);
  --as-shadow-ring-accent: 0 0 0 4px rgba(var(--as-accent-rgb), 0.14);
  --as-shadow-inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ── Glass ── */
  --as-blur-glass: blur(26px) saturate(180%);
  --as-blur-overlay: blur(16px);
  --as-glass-border: rgba(255, 255, 255, 0.14);

  /* ── Spacing scale ── */
  --as-space-1: 4px;
  --as-space-2: 8px;
  --as-space-3: 12px;
  --as-space-4: 16px;
  --as-space-5: 20px;
  --as-space-6: 24px;
  --as-space-8: 32px;

  /* ── Typography ── */
  --as-font-family: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --as-font-display-weight: 900;
  --as-font-label-tracking: 0.16em;
  --as-font-btn-tracking: 0.14em;

  /* ── Motion ── */
  --as-duration-fast: 0.12s;
  --as-duration-normal: 0.34s;
  --as-duration-slow: 0.6s;
  --as-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --as-ease-out: ease;

  /* ── Component metrics (prototype) ── */
  --as-btn-height-primary: 54px;
  --as-btn-height-primary-lg: 58px;
  --as-btn-height-secondary: 54px;
  --as-input-height: 60px;
  --as-icon-btn-size: 42px;
  --as-tab-bar-height: 66px;
  --as-tab-fab-size: 58px;
  --as-tab-fab-offset: -30px;
  --as-tab-icon-size: 23px;
  --as-tab-fab-icon-size: 28px;
  --as-phone-width: 401px;
  --as-phone-height: 868px;
  --as-progress-height: 7px;
  --as-zebra: rgba(255, 255, 255, 0.03);

  /* ── Polish pass tokens ── */
  --as-overlay-scrim: rgba(0, 0, 0, 0.55);
  --as-phone-frame-outline: rgba(255, 255, 255, 0.04);
  --as-accent-border: rgba(var(--as-accent-rgb), 0.3);
  --as-challenge-hero-gradient: radial-gradient(120% 150% at 28% 18%, var(--as-surface-1) 0%, var(--as-bg-0) 76%);
  --as-input-divider-width: 1px;
  --as-input-divider-height: 26px;
  --as-web-table-border: var(--as-border-subtle);
  --as-web-table-row-hover: var(--as-zebra);
  --as-otp-cell-width: 46px;
  --as-otp-cell-height: 58px;
  --as-role-card-min-height: 220px;

  /* ── Participant mockup foundation ── */
  --as-surface-glass: rgba(24, 25, 27, 0.86);
  --as-surface-glass-strong: rgba(31, 32, 35, 0.92);
  --as-surface-soft: rgba(255, 255, 255, 0.045);
  --as-gradient-mobile-screen: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.055), transparent 22rem),
    linear-gradient(180deg, #111112 0%, #090909 100%);
  --as-gradient-accent-button: linear-gradient(180deg, var(--as-accent), var(--as-accent-strong));
  --as-gradient-task-card: radial-gradient(circle at 100% 0%, rgba(var(--as-accent-rgb), 0.1), transparent 10rem),
    rgba(var(--as-accent-rgb), 0.055);
  --as-shadow-soft-glow: 0 0 34px rgba(var(--as-accent-rgb), 0.22);
  --as-shadow-tabbar: 0 -12px 34px rgba(0, 0, 0, 0.46), var(--as-shadow-inset-glass);
  --as-stat-divider: 1px solid var(--as-border);
}

/* Optional light theme — secondary to dark-first system */
html[data-theme="light"] {
  --as-bg-0: #e8e9e5;
  --as-bg-1: #ecede9;
  --as-bg-2: #ffffff;

  --as-surface-0: #ecede9;
  --as-surface-1: #ffffff;
  --as-surface-2: #f3f4f0;

  --as-card: #ffffff;
  --as-card-strong: #ffffff;
  --as-card-glass: rgba(255, 255, 255, 0.7);

  --as-border: rgba(21, 21, 23, 0.1);
  --as-border-strong: rgba(21, 21, 23, 0.14);
  --as-border-subtle: rgba(21, 21, 23, 0.05);

  --as-text: #151517;
  --as-text-soft: rgba(21, 21, 23, 0.66);
  --as-muted: rgba(21, 21, 23, 0.46);
  --as-muted-2: rgba(21, 21, 23, 0.3);

  --as-accent: #b6f075;
  --as-accent-strong: #a4e45f;
  --as-accent-soft: rgba(182, 240, 117, 0.2);
  --as-on-accent: #151517;

  --as-success: #3e7d14;
  --as-success-soft: rgba(62, 125, 20, 0.12);

  --as-glass-border: rgba(21, 21, 23, 0.08);
  --as-zebra: rgba(21, 21, 23, 0.022);

  --as-shadow-card: 0 8px 24px -12px rgba(21, 21, 23, 0.12);
  --as-shadow-elevated: 0 12px 32px rgba(21, 21, 23, 0.1);
}