/* =========================================================
   PIQUEL — Design Tokens
   Colors, typography, spacing, radii, shadows, motion
   Fonts loaded via Google Fonts in index.html
   ========================================================= */

:root {
  /* --- Color Foundations --- */
  --pq-black:        #000000;
  --pq-ink:          #0A0A0A;
  --pq-card:         #111111;
  --pq-card-2:       #1C1C1C;
  --pq-line:         #262626;
  --pq-muted:        #404040;
  --pq-subtle:       #888888;
  --pq-white:        #FFFFFF;
  --pq-paper:        #F5F5F5;
  --pq-paper-line:   #E5E5E5;

  --pq-lime:         #C8FF00;
  --pq-lime-dim:     rgba(200, 255, 0, 0.12);
  --pq-lime-glow:    rgba(200, 255, 0, 0.25);
  --pq-lime-ring:    rgba(200, 255, 0, 0.40);

  /* Level / semantic accents */
  --pq-beginner:     #C8FF00;     /* same as lime */
  --pq-inter:        #FBB724;
  --pq-advanced:     #EF4444;
  --pq-success:      #22C55E;
  --pq-warn:         #FBB724;
  --pq-danger:       #EF4444;

  --pq-beginner-bg:  rgba(200, 255, 0, 0.12);
  --pq-inter-bg:     rgba(251, 183, 36, 0.12);
  --pq-advanced-bg:  rgba(239, 68, 68, 0.12);
  --pq-open-bg:      rgba(255, 255, 255, 0.08);

  /* --- Semantic (dark mode default) --- */
  --bg:              var(--pq-black);
  --bg-2:            var(--pq-ink);
  --bg-card:         var(--pq-card);
  --bg-raised:       var(--pq-card-2);
  --fg:              var(--pq-white);
  --fg-2:            #C9C9C9;
  --fg-muted:        var(--pq-subtle);
  --fg-dim:          var(--pq-muted);
  --border:          var(--pq-card-2);
  --border-strong:   var(--pq-line);
  --accent:          var(--pq-lime);
  --accent-fg:       var(--pq-black);

  /* Light section tokens (onboarding, court info, stats) */
  --bg-light:        var(--pq-white);
  --bg-light-alt:    var(--pq-paper);
  --fg-on-light:     var(--pq-black);
  --fg-on-light-2:   #555555;
  --border-on-light: var(--pq-paper-line);

  /* --- Typography Families --- */
  --font-display: 'Goldman', 'Arial Black', system-ui, sans-serif;   /* headings, badges */
  --font-body:    'Source Serif 4', 'Georgia', serif;                 /* body, chat, UI text */
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;   /* stats, timers */

  /* --- Type Scale (mobile-first, 430px canvas) --- */
  --text-display-1: 700 44px/0.95 var(--font-display);     /* hero "MENOS CHAT." */
  --text-display-2: 700 36px/1.00 var(--font-display);
  --text-h1:        700 28px/1.08 var(--font-display);
  --text-h2:        700 22px/1.12 var(--font-display);
  --text-h3:        700 18px/1.20 var(--font-display);
  --text-eyebrow:   700 11px/1.20 var(--font-display);     /* uppercase, tracked */
  --text-badge:     700 10px/1.00 var(--font-display);     /* uppercase */

  --text-body:      400 15px/1.50 var(--font-body);
  --text-body-sm:   400 13px/1.45 var(--font-body);
  --text-body-lg:   400 17px/1.55 var(--font-body);
  --text-caption:   400 12px/1.40 var(--font-body);

  --text-stat-xl:   600 34px/1.00 var(--font-mono);
  --text-stat-lg:   600 24px/1.00 var(--font-mono);
  --text-stat:      500 14px/1.00 var(--font-mono);
  --text-stat-sm:   500 11px/1.10 var(--font-mono);

  --tracking-tight: -0.01em;
  --tracking-loose:  0.08em;   /* eyebrows, badges */
  --tracking-xl:     0.14em;   /* section labels like OPEN PLAY */

  /* --- Spacing (4px base) --- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* --- Radii --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* --- Shadows & Glows --- */
  --shadow-card:    0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-pop:     0 12px 40px rgba(0,0,0,0.55);
  --shadow-light:   0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  --glow-lime:      0 0 20px var(--pq-lime-glow);
  --glow-lime-lg:   0 0 32px rgba(200,255,0,0.45);

  /* --- Motion --- */
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:  cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 400ms;

  /* Spring-feel timings (css only approximation) */
  --spring-snappy: 260ms var(--ease-out);
  --spring-smooth: 320ms var(--ease-out);
  --spring-gentle: 400ms var(--ease-out);
}

/* Optional light section wrapper */
.pq-on-light {
  --bg: var(--bg-light);
  --bg-2: var(--bg-light-alt);
  --bg-card: var(--pq-white);
  --bg-raised: var(--pq-paper);
  --fg: var(--fg-on-light);
  --fg-2: var(--fg-on-light-2);
  --fg-muted: #777;
  --border: var(--border-on-light);
  --border-strong: #D9D9D9;
  --accent-fg: var(--pq-black);
  background: var(--bg);
  color: var(--fg);
}

/* =========================================================
   Base / Element styles
   ========================================================= */

html, body { background: var(--bg); color: var(--fg); }
body {
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle grain used behind dark surfaces */
.pq-grain {
  position: relative;
}
.pq-grain::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.5) 1px, transparent 1px),
                    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
}

/* Headings default to Goldman */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h1 { font: var(--text-h1); }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }

p  { font: var(--text-body); margin: 0; }
small, .pq-caption { font: var(--text-caption); color: var(--fg-muted); }

/* Eyebrow / section label */
.pq-eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-xl);
  color: var(--fg-muted);
}

/* Numeric readout */
.pq-stat { font: var(--text-stat); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pq-stat-lg { font: var(--text-stat-lg); font-variant-numeric: tabular-nums; }
.pq-stat-xl { font: var(--text-stat-xl); font-variant-numeric: tabular-nums; }

/* =========================================================
   Active-dot pulse (used by ACTIVE toggle)
   ========================================================= */
@keyframes pq-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--pq-lime-ring); }
  50%      { opacity: 0.85; transform: scale(0.92); box-shadow: 0 0 0 5px rgba(200,255,0,0); }
}
.pq-active-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pq-lime);
  animation: pq-pulse 2s ease-in-out infinite;
}

/* Skeleton shimmer */
@keyframes pq-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.pq-skeleton {
  background: linear-gradient(90deg, #111 25%, #1C1C1C 50%, #111 75%);
  background-size: 200% 100%;
  animation: pq-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}

/* Tap feedback — add to buttons */
.pq-tap { transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.pq-tap:active { transform: scale(0.96); }