/* ==========================================================================
   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;
}

/* ==========================================================================
   Self-hosted web fonts -- Player Experience Reset, Phase 0 (DQ20, 30 Sep 2026)
   Instrument Serif (display) and Inter (interface, figures), SIL OFL 1.1,
   from Fontsource 5.3.0; licences beside the files in assets/fonts/.
   Declaring a face downloads nothing: a browser fetches a file only when a
   rendered element uses the family, and nothing in the app does until a
   phase adopts --font-display / --font-ui / --font-figures. No third-party
   request, ever. Latin + Latin Extended subsets, split by unicode-range, so
   only the subset a page's text needs is fetched.
   ========================================================================== */
@font-face{
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif/instrument-serif-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   Redesign foundations -- Player Experience Reset, Phase 0 (30 Sep 2026)
   docs/design/CLAUDE_DESIGN_IMPLEMENTATION_MAP.md §3 and DQ20. New names
   only: no token above changes value, and nothing in the app reads these
   yet, so no current screen changes. Each later phase adopts them as it
   rebuilds a screen; the primitives in components.css already do.
   Contrast figures are WCAG ratios on --bg1 (the card surface).
   ========================================================================== */
:root{
  /* ---- Accent: the design's champagne gold (DQ20). Same role as --gold --
     "act here" / "this is you" -- and nothing else. --gold keeps its value
     until the screens that use it are rebuilt. ---- */
  --accent: #D5B76E;                    /* 9.6:1 */
  --accent-bright: #F0D58E;             /* the "you" highlight, 13.0:1 */
  --accent-ink: #14110a;                /* text on an accent fill */
  --accent-hairline: rgba(213,183,110,0.26);
  --accent-wash: rgba(213,183,110,0.08);

  /* ---- The viewer's own row: lit, never boxed. ---- */
  --row-self: #1C1A14;

  /* ---- Text: the Ledger's contrast is kept (DQ20). The design's lighter
     muted (#969188, 6.0:1) is NOT adopted; muted text stays --text-dim
     (8.7:1). The design's inactive grey fails AA for text, so it is for
     icons only (3.3:1 clears the 3:1 non-text minimum). ---- */
  --icon-inactive: #6B675F;

  /* ---- Fixture states. Booked has its own hue (DQ20): steel blue, far from
     Tier B sage (--tier-b-text) and from upward movement, which the design
     had all sharing one green. Attention is distinct from loss red. State
     is always said in words as well as colour. ---- */
  --state-booked: #8FB3D9;              /* 8.6:1 */
  --state-booked-bg: rgba(143,179,217,0.10);
  --state-booked-border: rgba(143,179,217,0.35);
  --state-attention: #E0896B;           /* 7.1:1 */
  --state-attention-bg: rgba(224,137,107,0.10);
  --state-attention-border: rgba(224,137,107,0.38);

  /* ---- Rating movement -- never the win/loss colours, so a movement is
     never read as a result. Up and down render at the same weight; only the
     sign and the colour differ. The period is always labelled (DQ2). ---- */
  --move-up: #8FB996;                   /* 8.5:1 */
  --move-down: #C98470;                 /* 6.2:1 */

  /* ---- Destructive actions: the soft red text the app already uses for
     removal, now named. Loss red (--red) is too dark for text (3.5:1). ---- */
  --danger-text: #e8a5a1;               /* 9.2:1 */
  --danger-border: rgba(181,69,63,0.55);

  /* ---- Type roles for the redesign (DQ20). Instrument Serif has NO
     tabular figures (its digits differ in width -- checked in the font
     files), so it is for display text and single display numerals only.
     Any number that must line up -- tables, points, scores, counts -- uses
     --font-figures with font-variant-numeric: tabular-nums (Inter has
     tnum). The Ledger's rule stands: serif for titles, names and prestige
     numerals; sans for everything read or tapped. ---- */
  --font-display: 'Instrument Serif', 'Georgia', 'Iowan Old Style', serif;
  --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-figures: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Shape and touch ---- */
  --radius-block: 10px;                 /* date blocks */
  --touch-min: 44px;                    /* every tappable primitive */
  --tab-bar-content: 56px;              /* Phase 1 replaces --shell-nav-height with this + the safe area */

  /* ---- One z-scale (map §6a.4). The values are today's; Phase 1 moves the
     existing rules onto these names. ---- */
  --z-header: 40;
  --z-nav: 50;
  --z-sheet: 60;
  --z-toast: 70;
}