/* ==========================================================================
   Money Padel — Prestige Visual System v1 design tokens
   Extends (does not redefine) the base color system in app.css:
   --gold, --gold-bright, --gold-dim, --bg0/1/2, --line, --text, --text-dim,
   --green, --red remain the source of truth for those specific colors.
   This file adds the additional tonal/typographic/spacing vocabulary the
   Prestige system needs so it can be reused across Rankings, Player Profile,
   Home and Play rather than re-invented per screen.
   ========================================================================== */
:root{
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shell chrome ---- */
  --shell-header-height: 52px;
  --shell-nav-height: 64px;
  --shell-safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell-safe-top: env(safe-area-inset-top, 0px);

  /* ---- Tonal surface scale ----
     Gold-discipline principle: most of the app should live in this scale.
     Gold is reserved for selected/champion/prestige states, never used as a
     default border or container outline. */
  --surface-0: var(--bg0);
  --surface-1: var(--bg1);
  --surface-2: var(--bg2);
  --surface-border: rgba(241,233,216,0.08);
  --surface-border-soft: rgba(241,233,216,0.05);

  /* ---- Gold, used sparingly and only for these roles ---- */
  --gold-hairline: rgba(212,175,55,0.22);
  --gold-wash: rgba(212,175,55,0.07);
  --gold-illumination: radial-gradient(ellipse 65% 45% at 50% 0%, rgba(212,175,55,0.10) 0%, transparent 72%);

  /* ---- Tier identity ----
     Distinct from --green/--red (which mean win/loss elsewhere) -- tiers get
     their own restrained, non-primary-color identity so they read as rank
     insignia, not status indicators. */
  --tier-s-text: #f0dfa0;
  --tier-s-border: rgba(240,223,160,0.35);
  --tier-s-bg: rgba(240,223,160,0.08);
  --tier-a-text: var(--gold-bright);
  --tier-a-border: rgba(212,175,55,0.30);
  --tier-a-bg: rgba(212,175,55,0.08);
  --tier-b-text: #9db8a8;
  --tier-b-border: rgba(157,184,168,0.30);
  --tier-b-bg: rgba(157,184,168,0.08);
  --tier-c-text: #9a9187;
  --tier-c-border: rgba(154,145,135,0.28);
  --tier-c-bg: rgba(154,145,135,0.07);

  /* ---- Kings of Tiers -- a restrained metallic family, deliberately
     distinct from the tier-identity colors above (those are muted on
     purpose so a tier badge never reads as "prestige" elsewhere in the
     app). This is prestige on purpose: three honours-board golds, same
     family, subtly different metal per tier. ---- */
  --kings-a-bright: var(--gold-bright);
  --kings-a-dim: var(--gold);
  --kings-b-bright: #d9cca3;
  --kings-b-dim: #ab9e78;
  --kings-c-bright: #c99a63;
  --kings-c-dim: #96693c;

  /* ---- Shadows / illumination -- CSS-only depth, per design direction ---- */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-podium: 0 10px 28px rgba(0,0,0,0.55);
  --shadow-podium-first: 0 12px 32px rgba(0,0,0,0.6), 0 0 40px rgba(212,175,55,0.06);
  --glow-prestige: var(--gold-illumination);

  /* ---- Typography roles ----
     Serif: major titles, player names, prestige rank numerals only.
     Sans: controls, supporting stats, labels, navigation. Never invert this. */
  --font-prestige: 'Georgia', 'Iowan Old Style', serif;
  --font-interface: 'Helvetica Neue', Arial, sans-serif;
}