/* =========================================================
   SPORTIAN — VISUAL FOUNDATION S01-A
   Canonical tokens and primitives shared by public, player
   and coach surfaces. Module-specific styling stays local.
   ========================================================= */

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/fonts/ibm-plex-sans-400-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Color */
  --sp-canvas: #08090a;
  --sp-surface-1: #0d0f11;
  --sp-surface-2: #171a1d;
  --sp-surface-raised: #202428;
  --sp-surface-inset: #0a0c0e;
  --sp-text: #f0e7d7;
  --sp-text-muted: #afa597;
  --sp-text-soft: #817a70;
  --sp-border: rgba(240, 231, 215, 0.12);
  --sp-border-strong: rgba(240, 231, 215, 0.24);
  --sp-accent: #ff6b12;
  --sp-accent-hover: #ff8a3d;
  --sp-accent-soft: rgba(255, 107, 18, 0.13);
  --sp-success: #36c878;
  --sp-success-soft: rgba(54, 200, 120, 0.13);
  --sp-warning: #f2b84b;
  --sp-warning-soft: rgba(242, 184, 75, 0.13);
  --sp-danger: #ef6262;
  --sp-danger-soft: rgba(239, 98, 98, 0.13);
  --sp-info: #5c9ded;
  --sp-info-soft: rgba(92, 157, 237, 0.13);

  /* Typography */
  --sp-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sp-font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
  --sp-type-display-xl: clamp(3.75rem, 8vw, 7.5rem);
  --sp-type-display: clamp(2.75rem, 6vw, 5.5rem);
  --sp-type-page-title: clamp(2.15rem, 4vw, 3.75rem);
  --sp-type-section-title: clamp(1.65rem, 2.6vw, 2.5rem);
  --sp-type-card-title: 1.25rem;
  --sp-type-body: 1rem;
  --sp-type-label: 0.8125rem;
  --sp-type-micro: 0.6875rem;
  --sp-type-data: clamp(2.5rem, 5vw, 5rem);

  /* Spacing */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-6: 24px;
  --sp-space-8: 32px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;

  /* Geometry */
  --sp-radius-xs: 2px;
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 14px;
  --sp-radius-pill: 999px;

  /* Elevation and motion */
  --sp-shadow-raised: 0 12px 28px rgba(0, 0, 0, 0.24);
  --sp-shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.42);
  --sp-focus-ring: 0 0 0 3px rgba(255, 107, 18, 0.32);
  --sp-duration-fast: 140ms;
  --sp-duration-base: 200ms;
  --sp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Progressive aliases for the existing CSS */
  --dark-950: var(--sp-canvas);
  --dark-900: var(--sp-surface-1);
  --dark-850: var(--sp-surface-2);
  --dark-800: var(--sp-surface-raised);
  --light: var(--sp-text);
  --muted: var(--sp-text-muted);
  --muted-dark: var(--sp-text-soft);
  --orange: var(--sp-accent);
  --orange-2: var(--sp-accent-hover);
  --line: var(--sp-border);
  --line-strong: var(--sp-border-strong);
  --bg: var(--sp-canvas);
  --bg-main: var(--sp-canvas);
  --bg-sidebar: var(--sp-surface-1);
  --card: var(--sp-surface-2);
  --card-soft: var(--sp-surface-inset);
  --card-hover: var(--sp-surface-raised);
  --black: var(--sp-canvas);
  --text: var(--sp-text);
  --soft: var(--sp-text-soft);
  --orange-dark: var(--sp-accent);
  --orange-soft: var(--sp-accent-soft);
  --green: var(--sp-success);
  --green-soft: var(--sp-success-soft);
  --amber: var(--sp-warning);
  --amber-soft: var(--sp-warning-soft);
  --red: var(--sp-danger);
  --red-soft: var(--sp-danger-soft);
  --blue: var(--sp-info);
  --blue-soft: var(--sp-info-soft);
  --radius-xl: var(--sp-radius-lg);
  --radius-lg: var(--sp-radius-md);
  --radius-md: var(--sp-radius-sm);
  --radius-sm: var(--sp-radius-sm);
}

body {
  font-family: var(--sp-font-ui);
  font-size: var(--sp-type-body);
  color: var(--sp-text);
  background-color: var(--sp-canvas);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3) {
  font-family: var(--sp-font-display);
  font-weight: 700;
  text-wrap: balance;
}

:where(button, input, select, textarea) {
  font-family: var(--sp-font-ui);
}

:where(.sp-data, [data-metric-value], time) {
  font-variant-numeric: tabular-nums;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 3px;
  box-shadow: var(--sp-focus-ring);
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

.sp-display-xl,
.sp-display,
.sp-page-title,
.sp-section-title,
.sp-card-title,
.sp-data {
  margin: 0;
  font-family: var(--sp-font-display);
  font-weight: 700;
}

.sp-display-xl { font-size: var(--sp-type-display-xl); line-height: 0.88; }
.sp-display { font-size: var(--sp-type-display); line-height: 0.92; }
.sp-page-title { font-size: var(--sp-type-page-title); line-height: 0.96; }
.sp-section-title { font-size: var(--sp-type-section-title); line-height: 1; }
.sp-card-title { font-size: var(--sp-type-card-title); line-height: 1.1; }
.sp-body { font-size: var(--sp-type-body); line-height: 1.65; }
.sp-label { font-size: var(--sp-type-label); font-weight: 600; }
.sp-micro { font-size: var(--sp-type-micro); letter-spacing: 0.12em; text-transform: uppercase; }
.sp-data { font-size: var(--sp-type-data); line-height: 0.9; font-variant-numeric: tabular-nums; }

.sp-surface,
.sp-surface-raised,
.sp-surface-inset {
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
}

.sp-surface { background: var(--sp-surface-1); }
.sp-surface-raised { background: var(--sp-surface-raised); box-shadow: var(--sp-shadow-raised); }
.sp-surface-inset { background: var(--sp-surface-inset); }

.sp-button {
  min-height: 44px;
  padding: 0 var(--sp-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-2);
  color: var(--sp-text);
  background: transparent;
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-sm);
  font-size: var(--sp-type-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--sp-duration-fast) var(--sp-ease),
    background var(--sp-duration-fast) var(--sp-ease),
    border-color var(--sp-duration-fast) var(--sp-ease),
    transform var(--sp-duration-fast) var(--sp-ease);
}

.sp-button:hover { border-color: var(--sp-text-muted); background: var(--sp-surface-raised); }
.sp-button:active { transform: translateY(1px); }
.sp-button:disabled,
.sp-button[aria-disabled="true"],
.sp-button[aria-busy="true"] { opacity: 0.48; cursor: not-allowed; transform: none; }
.sp-button-primary { color: #190b03; background: var(--sp-accent); border-color: var(--sp-accent); }
.sp-button-primary:hover { color: #190b03; background: var(--sp-accent-hover); border-color: var(--sp-accent-hover); }
.sp-button-secondary { background: var(--sp-surface-raised); }
.sp-button-ghost { border-color: transparent; }
.sp-button-danger { color: var(--sp-danger); background: var(--sp-danger-soft); border-color: rgba(239, 98, 98, 0.34); }
.sp-button-danger:hover { color: var(--sp-text); background: var(--sp-danger); border-color: var(--sp-danger); }
.sp-button-icon { width: 44px; padding: 0; }

.sp-field {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--sp-space-3);
  color: var(--sp-text);
  background: var(--sp-surface-inset);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  transition:
    background var(--sp-duration-fast) var(--sp-ease),
    border-color var(--sp-duration-fast) var(--sp-ease);
}

textarea.sp-field { min-height: 104px; padding-block: var(--sp-space-3); resize: vertical; }
.sp-field:hover { border-color: var(--sp-border-strong); }
.sp-field:focus { background: var(--sp-surface-1); border-color: var(--sp-accent); }
.sp-field:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-field:user-invalid,
.sp-field[aria-invalid="true"] { border-color: var(--sp-danger); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}