/* PolyPlay Design System — Core Tokens
 * Source of truth: polyplay-games/src/theme/brands/polyplay/config.ts
 *
 * The PolyPlay brand is dark-mode-locked. One bg.solid (#0D0F14) anchors every
 * animation and ArtSlot — no gradient backgrounds, no off-blacks. Inter for UI,
 * IBM Plex Mono for every number on screen.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================ */
  /* BACKGROUNDS (dark only)                                       */
  /* ============================================================ */
  --bg-solid:    #0D0F14;   /* SACRED — every animation/ArtSlot uses this */
  --bg-surface1: #131620;   /* card bg */
  --bg-surface2: #191D28;   /* elevated card bg */
  --bg-surface3: #222633;   /* highest tier */
  --bg-nav:      #0A0C11;   /* top nav + tab bar */

  /* ============================================================ */
  /* FOREGROUND HIERARCHY                                          */
  /* ============================================================ */
  --fg-primary:   #E6E8EC;
  --fg-secondary: #8B93A5;
  --fg-tertiary:  #606878;
  --fg-quat:      #3B4254;
  --fg-inverse:   #0A0C11;  /* text on accent fills */

  /* ============================================================ */
  /* LINES                                                         */
  /* ============================================================ */
  --line-hairline: #20242F;
  --line-strong:   #2B3040;
  --line-2:        #2A2F3D;

  /* ============================================================ */
  /* STATUS                                                        */
  /* ============================================================ */
  --status-success:    #35CB82;
  --status-success-dim: rgba(53,203,130,0.16);
  --status-danger:     #F45066;
  --status-danger-dim: rgba(244,80,102,0.16);
  --status-warning:    #FFB84D;
  --status-live:       #35CB82;

  /* ============================================================ */
  /* ACCENT SLOTS (3-6 slot palette; games pick ONE)               */
  /* ============================================================ */
  --slot-lime:    #B6F24A;   /* trump (default) */
  --slot-amber:   #FFB84D;   /* crypto */
  --slot-cyan:    #34C5E0;   /* barca / h2h opponent */
  --slot-magenta: #E766A6;   /* celebs */
  --slot-emerald: #35CB82;   /* laliga */

  --slot-lime-dim:    rgba(182,242,74,0.18);
  --slot-amber-dim:   rgba(255,184,77,0.18);
  --slot-cyan-dim:    rgba(52,197,224,0.18);
  --slot-magenta-dim: rgba(231,102,166,0.18);
  --slot-emerald-dim: rgba(53,203,130,0.18);

  --slot-lime-muted:    rgba(182,242,74,0.08);
  --slot-amber-muted:   rgba(255,184,77,0.08);
  --slot-cyan-muted:    rgba(52,197,224,0.08);
  --slot-magenta-muted: rgba(231,102,166,0.08);
  --slot-emerald-muted: rgba(53,203,130,0.08);

  /* "On accent" text is always inverse (dark on bright). */
  --slot-on: #0A0C11;

  /* ============================================================ */
  /* TYPOGRAPHY                                                    */
  /* ============================================================ */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ============================================================ */
  /* RADII                                                         */
  /* ============================================================ */
  --r-sm:  2px;   /* status pips */
  --r-md:  6px;   /* chips */
  --r-lg:  10px;  /* buttons, inputs */
  --r-xl:  14px;  /* cards (default) */
  --r-xxl: 20px;  /* sheets, modals */
  --r-pill: 999px;

  /* ============================================================ */
  /* SPACING (4px base, fixed scale)                              */
  /* ============================================================ */
  --s-2:  2px;
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-56: 56px;
  --s-72: 72px;

  /* ============================================================ */
  /* ELEVATION (only two)                                          */
  /* ============================================================ */
  --shadow-card:  0 1px 0 rgba(0,0,0,0.3), inset 0 0 0 1px var(--line-hairline);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.5);

  /* ============================================================ */
  /* MOTION (one easing, four durations)                           */
  /* ============================================================ */
  --t-instant: 100ms;
  --t-fast:    160ms;
  --t-base:    240ms;
  --t-slow:    400ms;
  --easing:    cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ================================================================ */
/* SEMANTIC TYPE ROLES (apply via class)                              */
/* ================================================================ */

.t-display {
  font-family: var(--font-body);
  font-size: 32px; line-height: 40px;
  letter-spacing: -0.01em;
  font-weight: var(--w-black);
}
.t-h1 {
  font-family: var(--font-body);
  font-size: 24px; line-height: 32px;
  letter-spacing: -0.01em;
  font-weight: var(--w-bold);
}
.t-h2 {
  font-family: var(--font-body);
  font-size: 18px; line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: var(--w-semibold);
}
.t-body {
  font-family: var(--font-body);
  font-size: 14px; line-height: 20px;
  letter-spacing: 0;
  font-weight: var(--w-medium);
}
.t-caption {
  font-family: var(--font-body);
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.02em;
  font-weight: var(--w-medium);
}
.t-micro {
  font-family: var(--font-body);
  font-size: 10px; line-height: 12px;
  letter-spacing: 0.08em;
  font-weight: var(--w-semibold);
  text-transform: uppercase;
}

/* Mono — every number on screen MUST use one of these. */
.t-num-lg {
  font-family: var(--font-mono);
  font-size: 20px; line-height: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
}
.t-num {
  font-family: var(--font-mono);
  font-size: 14px; line-height: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
}
.t-num-sm {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
}

/* Default body resets */
html, body { background: var(--bg-solid); color: var(--fg-primary); margin: 0; }
body { font-family: var(--font-body); font-size: 14px; line-height: 20px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }