/**
 * Gameday Studio - Shared Foundation
 * 
 * Organization:
 * 1. CSS Custom Properties (Design Tokens)
 * 2. Reset & Base Styles
 * 3. Layout Components
 *
 * Product/page CSS lives in focused modules loaded by base.html/base_tpk.html:
 * schedule-designer.css, rivals-composer.css, tpk-consumer.css, etc.
 */

/* =============================================================================
   Custom Font Faces — bundled fonts for overlay preview & font picker
   ============================================================================= */

@font-face {
  font-family: "Grobold";
  src: url("/static/fonts/Grobold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Full Pack";
  src: url("/static/fonts/FullPack.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Crackvetica";
  src: url("/static/fonts/Crackvetica.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Pink Blue";
  src: url("/static/fonts/PinkBlue.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Huge Crack";
  src: url("/static/fonts/HugeCrack.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Agent Orange";
  src: url("/static/fonts/AgentOrange.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Black Ops One";
  src: url("/static/fonts/BlackOpsOne.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "OPTI Edgar Bold";
  src: url("/static/fonts/OPTIEdgarBold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Krona One";
  src: url("/static/fonts/KronaOne.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Octosale";
  src: url("/static/fonts/Octosale.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Rock Salt";
  src: url("/static/fonts/RockSalt-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Ranchers";
  src: url("/static/fonts/Ranchers-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Permanent Marker";
  src: url("/static/fonts/PermanentMarker-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Splash";
  src: url("/static/fonts/Splash-Regular.ttf") format("truetype");
  font-display: swap;
}

/* =============================================================================
   1. CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
  color-scheme: dark;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  
  /* Colors */
  --bg: #06080f;
  --panel: #0f141f;
  --panel-muted: rgba(15, 20, 31, 0.65);
  --surface: #121826;
  --text: #f4f6ff;
  --muted: #9fa8c0;
  --primary: #48f5c0;
  /* RGB channels of --primary, for rgba(var(--primary-rgb), <alpha>) tints. Keep in
     sync with --primary (#48f5c0 == 72,245,192) so every primary glow/scrim/tint
     resolves from one place. */
  --primary-rgb: 72, 245, 192;
  --primary-dark: #12c998;
  --error: #f5486e;
  --error-text: #ffb3c5;
  --badge-main: #f6c45c;
  --badge-grid: #4aa8ff;
  --badge-pill: #7a5cff;
  --btn-sky: #7cc8ff;
  --btn-sky-dark: #56b4ff;
  --btn-neutral: #1f2736;
  --btn-neutral-dark: #2a3446;
  --btn-danger: #ff6f7f;
  --btn-danger-dark: #ea566c;
  --btn-warning: #f5b14d;
  --btn-warning-dark: #e39c35;
  
  /* Borders & Shadows */
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --shadow: 0 25px 80px rgba(2, 4, 8, 0.45);
  
  /* Surfaces (semi-transparent overlays) */
  --surface-dim: rgba(255, 255, 255, 0.02);
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.03);
  --primary-surface: rgba(var(--primary-rgb), 0.1);
  --primary-surface-strong: rgba(var(--primary-rgb), 0.15);
  
  /* Spacing & Sizing */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
}

/* =============================================================================
   2. Reset & Base Styles
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The HTML `hidden` attribute must always win. Component rules that set an
   explicit `display` (e.g. `.btn-solid { display: inline-flex }`) otherwise
   override the UA `[hidden] { display: none }` and leak hidden controls into
   view (Undo Crop, the mobile-only Share button, etc.). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, rgba(var(--primary-rgb), 0.08), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(72, 140, 245, 0.15), transparent 35%),
    var(--bg);
  color: var(--text);
}

/* =============================================================================
   3. Layout Components
   ============================================================================= */

.app-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Workstation header/nav/admin/account styles live in workstation-shell.css
   (loaded only by base.html) so they can never affect TPK/public pages. */

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
}

/* Shared loading state for modal images that replace a reusable <img> source. */
.image-loading-surface {
  position: relative;
}

.image-loading-surface[aria-busy="true"] {
  min-height: 12rem;
}

.image-loading-surface[aria-busy="true"]::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent, #2dd4bf);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -2.2rem);
  animation: modal-image-loading-spin 0.7s linear infinite;
}

.image-loading-surface[aria-busy="true"]::after,
.image-loading-surface[data-image-load-error="true"]::after {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  color: var(--muted, #94a3b8);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, 0.85rem);
}

.image-loading-surface[aria-busy="true"]::after {
  content: "Loading image…";
}

.image-loading-surface[data-image-load-error="true"]::after {
  content: "Image could not be loaded.";
}

@keyframes modal-image-loading-spin {
  to {
    transform: translate(-50%, -2.2rem) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-loading-surface[aria-busy="true"]::before {
    animation: none;
  }
}