/* =========================================================
   COLOUR TOKENS - the single source of colour for both themes
   ---------------------------------------------------------
   Padelstar 1.0 design system (claude.ai Design System artifact "Padelstar", 2026-10-04):
   calm and editorial off court, loud and simple on court. One brand colour carries everything: padel-ball yellow.
   Two first-class themes: Daylight (data-theme="light": warm bone page, white cards) and Floodlight
   (data-theme="dark": near-black, for evening play and TV).

   Rules:
   * Components use var(--token). No hex or rgb() literals for surfaces, borders, ink, accents or buttons in component CSS
     (scripts/color-audit.js counts what is left; test/color-tokens.test.js keeps it from growing).
   * --ball is a fill, never text on a light ground: text on it is --on-ball. When the accent must be text, use --ball-text.
   * One yellow thing per screen: the single action or state that matters most right now.
   * --surface-inverse with --on-inverse is the second voice (the ink button, the next-match hero).
   * Cards sit flat on the page; only floating things (nav pill, tab bar, sheets) carry --shadow-float.
   * Every text token was checked at 4.5:1 against its real background: test/color-tokens.test.js.
   The theme is set on <html data-theme="dark|light"> by app/color-mode.js (saved in localStorage; the device's
   prefers-color-scheme decides only on the first visit).
   ========================================================= */

:root {
  color-scheme: dark;

  /* surfaces (Floodlight) */
  --surface-page:      #0b0b0b;
  --surface-card:      #171717;
  --surface-raised:    #222222;
  --surface-sunken:    #2a2a2a;
  --surface-inverse:   #f5f4f0;
  --on-inverse:        #0b0b0b;

  /* hairlines / borders */
  --hairline:          rgba(245, 244, 240, .10);
  --border-subtle:     rgba(245, 244, 240, .10);
  --border-default:    rgba(245, 244, 240, .16);
  --border-strong:     #6e6b64;
  --border-control:    #6e6b64;

  /* ink */
  --ink-heading:       #f5f4f0;
  --ink-body:          #cfccc4;
  --ink-muted:         #9b988f;
  --ink-faint:         #9b988f;
  --ink-disabled:      #5b5953;

  /* the brand accent: padel-ball optic yellow */
  --ball:              #dcf55a;
  --on-ball:           #0b0b0b;
  --ball-text:         #dcf55a;
  --ball-wash:         rgba(220, 245, 90, .14);

  /* states */
  --live:              #ff6b78;
  --court:             #8fb8f2;
  --positive:          #6fe0a4;
  --negative:          #ff6b78;
  --warning:           #f2c14e;
  --focus-ring:        #dcf55a;
  --scrim:             rgba(0, 0, 0, .64);

  /* legacy accent roles, now drawn from the ball family (fills) and the court blue (information) */
  --accent-blue:       #dcf55a;
  --accent-blue-bright:#e8f98f;
  --accent-cyan:       #8fb8f2;

  /* legacy brand ramps from the retired shield logo: now solid ball, so progress bars and gems follow the brand */
  --accent-violet:     #dcf55a;
  --accent-violet-deep:#b4cf33;
  --chrome-high:       #f5f4f0;
  --chrome-mid:        #cfccc4;
  --chrome-low:        #6e6b64;
  --brand-navy:        #0b0b0b;
  --ramp-accent:       linear-gradient(90deg, #dcf55a, #dcf55a);
  --ramp-gem:          linear-gradient(150deg, #dcf55a, #b4cf33);

  /* accent as small text */
  --accent-text:       var(--ball-text);

  /* primary action: the ball pill */
  --btn-primary-from:  #dcf55a;
  --btn-primary-to:    #dcf55a;
  --btn-primary-ink:   #0b0b0b;
  --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, .7);

  /* secondary: the ghost pill */
  --btn-secondary-bg:  transparent;
  --btn-secondary-border: #6e6b64;
  --btn-secondary-ink: #f5f4f0;

  /* depth */
  --shadow-float:      0 12px 40px rgba(0, 0, 0, .6);
  --shadow-press:      0 2px 0 rgba(0, 0, 0, .7);
  --shadow-ink:        #000000;
  /* the accent as an r, g, b triplet, only for rgba(var(--player-accent-rgb), a) where no player colour is set */
  --accent-blue-rgb:   220, 245, 90;
  /* muted ink as r, g, b: what player accents resolve to now that players have no colour of their own */
  --ink-muted-rgb:     155, 152, 143;
}

[data-theme="light"] {
  color-scheme: light;

  /* surfaces (Daylight) */
  --surface-page:      #f4f1ea;
  --surface-card:      #ffffff;
  --surface-raised:    #fbfaf6;
  --surface-sunken:    #eae6dc;
  --surface-inverse:   #141414;
  --on-inverse:        #ffffff;

  --hairline:          rgba(20, 20, 20, .10);
  --border-subtle:     rgba(20, 20, 20, .10);
  --border-default:    rgba(20, 20, 20, .16);
  --border-strong:     #8a877d;
  --border-control:    #8a877d;

  --ink-heading:       #141414;
  --ink-body:          #3b3a36;
  --ink-muted:         #66645c;
  --ink-faint:         #66645c;
  --ink-disabled:      #8f8c82;

  --ball:              #d7f34a;
  --on-ball:           #141414;
  --ball-text:         #4a5a0a;
  --ball-wash:         rgba(215, 243, 74, .28);

  --live:              #c4162a;
  --court:             #1d4f91;
  --positive:          #1c7445;
  --negative:          #c4162a;
  --warning:           #7a5600;
  --focus-ring:        #141414;
  --scrim:             rgba(20, 20, 20, .48);

  --accent-blue:       #4a5a0a;
  --accent-blue-bright:#5c700d;
  --accent-cyan:       #1d4f91;
  --accent-text:       var(--ball-text);

  --accent-violet:     #4a5a0a;
  --accent-violet-deep:#3a4708;
  --chrome-high:       #ffffff;
  --chrome-mid:        #8a877d;
  --chrome-low:        #66645c;
  --brand-navy:        #141414;
  --ramp-accent:       linear-gradient(90deg, #d7f34a, #d7f34a);
  --ramp-gem:          linear-gradient(150deg, #d7f34a, #a9c41f);

  --btn-primary-from:  #d7f34a;
  --btn-primary-to:    #d7f34a;
  --btn-primary-ink:   #141414;
  --btn-primary-shadow: 0 2px 0 rgba(20, 20, 20, .18);

  --btn-secondary-bg:  transparent;
  --btn-secondary-border: #8a877d;
  --btn-secondary-ink: #141414;

  --shadow-float:      0 12px 40px rgba(20, 20, 20, .12);
  --shadow-press:      0 2px 0 rgba(20, 20, 20, .18);
  --shadow-ink:        #141414;
  --accent-blue-rgb:   74, 90, 10;
  --ink-muted-rgb:     102, 100, 92;
}

/* derived: how strongly shadows show. The design is flat: no glows, soft shadows only on floating things. */
:root { --shadow-strength: .5; --glow-strength: 0; --text-glow-strength: 0; }
[data-theme="light"] { --shadow-strength: .3; --glow-strength: 0; --text-glow-strength: 0; }

/* shape, space and size (same in both themes) */
:root {
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 72px;
  --tap-min: 48px;
  --tap-court: 64px;
  --content-max: 560px;
}

/* =========================================================
   MOTION TOKENS - timing and easing for every transition and animation (spec: docs/technical/motion.md)
   ---------------------------------------------------------
   Calm off court, quick and clear on court: motion confirms what a tap did or shows where something went.
   Nothing loops except a live indicator, nothing blocks input, and only transform and opacity are animated.
   Same in both themes. Under prefers-reduced-motion the distances and scales collapse to nothing, so any rule
   built from these tokens becomes a short crossfade without extra code; durations stay so state changes still read.
   ========================================================= */
:root {
  /* durations */
  --motion-instant:   80ms;   /* press feedback: a button or point pad going down */
  --motion-quick:     140ms;  /* hover, toggles, colour and border changes, tooltips, exits */
  --motion-base:      220ms;  /* a score digit ticking, a card or toast entering, a view entering */
  --motion-slow:      360ms;  /* rows reordering in standings, sheets and dialogs, view transitions */
  --motion-celebrate: 640ms;  /* the one win moment when a match or tournament finishes */
  --motion-pulse:     1.6s;   /* the live dot and the timer warning; the only looping motion */
  --motion-stagger:   40ms;   /* delay between items entering one after another (cap the chain at 6 items) */

  /* easings */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);       /* things that move from A to B on screen (reorder, slide) */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);     /* things arriving: enter, a new score settling */
  --ease-in:       cubic-bezier(.4, 0, 1, 1);       /* things leaving: exit, dismiss */
  --ease-pop:      cubic-bezier(.34, 1.56, .64, 1); /* a small overshoot, only for the score tick and the win moment */

  /* distances and scales */
  --motion-distance-sm: 6px;   /* a view or card settling in */
  --motion-distance-md: 16px;  /* a toast or sheet arriving */
  --motion-scale-press: .97;   /* a pressed button or point pad */
  --motion-scale-pop:   1.12;  /* a score digit's peak as it ticks */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-celebrate: var(--motion-base);
    --motion-stagger:   0ms;
    --ease-pop:         var(--ease-out);
    --motion-distance-sm: 0px;
    --motion-distance-md: 0px;
    --motion-scale-press: 1;
    --motion-scale-pop:   1;
  }
}

/* =========================================================
   VISUAL THEMES (1.4) - app-wide seasonal looks chosen by the system owner (app/app-theme.js, get_app_theme()).
   ---------------------------------------------------------
   Each theme (Claude Design canvases, 2026-10-20) sets its own surfaces, ink and action colour. It combines freely with light/dark:
   the dark values sit on :root:not([data-theme="light"]), the light ones on [data-theme="light"]. The standard theme has
   no attribute. A theme name the CSS does not know simply leaves the standard look.
   ========================================================= */
:root { --season-snow: #ffffff; --season-snow-opacity: .6; }
/* Christmas (Claude Design "Padelstar Jul", 2026-10-20): Julenatt replaces Floodlight, Snøfall replaces Daylight.
   Pine-night surfaces, snow ink, Christmas red as the one action colour, light-gold as accent text. */
:root:not([data-theme="light"])[data-visual-theme="christmas"] {
  --surface-page: #0b1913; --surface-card: #13281e; --surface-raised: #1b3528; --surface-sunken: #0f2119;
  --surface-inverse: #f6f1e7; --on-inverse: #0b1913;
  --hairline: rgba(246, 241, 231, .10); --border-subtle: rgba(246, 241, 231, .10); --border-default: rgba(246, 241, 231, .16);
  --border-strong: #6e7d72; --border-control: #6e7d72;
  --ink-heading: #f6f1e7; --ink-body: #d2d6cc; --ink-muted: #9fb0a4; --ink-faint: #9fb0a4; --ink-disabled: #5d6b61;
  --ball: #d42a3c; --on-ball: #ffffff; --ball-text: #f2c14e; --ball-wash: rgba(242, 193, 78, .14); --focus-ring: #f2c14e;
  --accent-blue: #f2c14e; --accent-blue-bright: #ffd978; --accent-violet: #d42a3c; --accent-violet-deep: #a81f2e;
  --chrome-high: #f6f1e7; --chrome-mid: #d2d6cc; --chrome-low: #6e7d72; --brand-navy: #0b1913;
  --ramp-accent: linear-gradient(90deg, #d42a3c, #f2c14e); --ramp-gem: linear-gradient(150deg, #d42a3c, #a81f2e);
  --btn-primary-from: #d42a3c; --btn-primary-to: #d42a3c; --btn-primary-ink: #ffffff;
  --btn-secondary-border: #6e7d72; --btn-secondary-ink: #f6f1e7;
  --accent-blue-rgb: 242, 193, 78; --ink-muted-rgb: 159, 176, 164;
  --season-snow: #f6f1e7; --season-snow-opacity: .7;
}
[data-theme="light"][data-visual-theme="christmas"] {
  --surface-page: #f5f0e6; --surface-card: #ffffff; --surface-raised: #fbf8f1; --surface-sunken: #ebe4d6;
  --surface-inverse: #18432f; --on-inverse: #ffffff;
  --hairline: rgba(20, 38, 28, .10); --border-subtle: rgba(20, 38, 28, .10); --border-default: rgba(20, 38, 28, .16);
  --border-strong: #7a857d; --border-control: #7a857d;
  --ink-heading: #14261c; --ink-body: #2f3d34; --ink-muted: #58635b; --ink-faint: #58635b; --ink-disabled: #8d968f;
  --ball: #c8102e; --on-ball: #ffffff; --ball-text: #a8122a; --ball-wash: rgba(200, 16, 46, .10); --focus-ring: #14261c;
  --accent-blue: #a8122a; --accent-blue-bright: #c8102e; --accent-violet: #a8122a; --accent-violet-deep: #7e0d1f;
  --chrome-high: #ffffff; --chrome-mid: #7a857d; --chrome-low: #5f6a62; --brand-navy: #14261c;
  --ramp-accent: linear-gradient(90deg, #c8102e, #18432f); --ramp-gem: linear-gradient(150deg, #c8102e, #7e0d1f);
  --btn-primary-from: #c8102e; --btn-primary-to: #c8102e; --btn-primary-ink: #ffffff;
  --btn-secondary-border: #7a857d; --btn-secondary-ink: #14261c;
  --accent-blue-rgb: 168, 18, 42; --ink-muted-rgb: 95, 106, 98;
  --season-snow: #9fb3c2; --season-snow-opacity: .85;
}
/* Halloween (owner's decision 2026-10-20): pumpkin night. Deep plum-black surfaces, bone ink, pumpkin orange as the
   one action colour. Daylight variant: warm parchment with dark ink on the pumpkin. */
:root:not([data-theme="light"])[data-visual-theme="halloween"] {
  --surface-page: #120c14; --surface-card: #1e1522; --surface-raised: #2a1e30; --surface-sunken: #160f19;
  --surface-inverse: #f7efe6; --on-inverse: #140c10;
  --hairline: rgba(247, 239, 230, .10); --border-subtle: rgba(247, 239, 230, .10); --border-default: rgba(247, 239, 230, .16);
  --border-strong: #7a6d7d; --border-control: #7a6d7d;
  --ink-heading: #f7efe6; --ink-body: #d9cec4; --ink-muted: #ab9fb0; --ink-faint: #ab9fb0; --ink-disabled: #66596a;
  --ball: #ff7a1a; --on-ball: #140c10; --ball-text: #ffa24d; --ball-wash: rgba(255, 122, 26, .16); --focus-ring: #ffa24d;
  --accent-blue: #ffa24d; --accent-blue-bright: #ffbf80; --accent-violet: #ff7a1a; --accent-violet-deep: #c95a0c;
  --chrome-high: #f7efe6; --chrome-mid: #d9cec4; --chrome-low: #7a6d7d; --brand-navy: #120c14;
  --ramp-accent: linear-gradient(90deg, #ff7a1a, #9b5de5); --ramp-gem: linear-gradient(150deg, #ff7a1a, #c95a0c);
  --btn-primary-from: #ff7a1a; --btn-primary-to: #ff7a1a; --btn-primary-ink: #140c10;
  --btn-secondary-border: #7a6d7d; --btn-secondary-ink: #f7efe6;
  --accent-blue-rgb: 255, 162, 77; --ink-muted-rgb: 171, 159, 176;
  --season-glow: rgba(255, 122, 26, .16);
}
[data-theme="light"][data-visual-theme="halloween"] {
  --surface-page: #f6efe4; --surface-card: #ffffff; --surface-raised: #fdf8f1; --surface-sunken: #ece2d3;
  --surface-inverse: #1d1420; --on-inverse: #ffffff;
  --hairline: rgba(29, 20, 32, .10); --border-subtle: rgba(29, 20, 32, .10); --border-default: rgba(29, 20, 32, .16);
  --border-strong: #807483; --border-control: #807483;
  --ink-heading: #1d1420; --ink-body: #3d3240; --ink-muted: #625764; --ink-faint: #625764; --ink-disabled: #93889a;
  --ball: #f0761c; --on-ball: #1d1420; --ball-text: #9a420a; --ball-wash: rgba(240, 118, 28, .14); --focus-ring: #1d1420;
  --accent-blue: #9a420a; --accent-blue-bright: #b8500d; --accent-violet: #9a420a; --accent-violet-deep: #7a3408;
  --chrome-high: #ffffff; --chrome-mid: #807483; --chrome-low: #625764; --brand-navy: #1d1420;
  --ramp-accent: linear-gradient(90deg, #f0761c, #6a3d9a); --ramp-gem: linear-gradient(150deg, #f0761c, #9a420a);
  --btn-primary-from: #f0761c; --btn-primary-to: #f0761c; --btn-primary-ink: #1d1420;
  --btn-secondary-border: #807483; --btn-secondary-ink: #1d1420;
  --accent-blue-rgb: 154, 66, 10; --ink-muted-rgb: 98, 87, 100;
  --season-glow: rgba(240, 118, 28, .10);
}
/* Vinter (Claude Design "Padelstar Vinter", 2026-10-20): Polarnatt (dark) / Rimfrost (light). Polar-night blue, icicles
   along the top, snow on the main card, ice blue as the one accent; the northern lights and the snowfall stay. */
:root:not([data-theme="light"])[data-visual-theme="winter"] {
  --surface-page: #0b1422; --surface-card: #142238; --surface-raised: #1c2d47; --surface-sunken: #0f1a2b;
  --surface-inverse: #eef4fb; --on-inverse: #0b1422;
  --hairline: rgba(238, 244, 251, .10); --border-subtle: rgba(238, 244, 251, .10); --border-default: rgba(238, 244, 251, .16);
  --border-strong: #62758e; --border-control: #62758e;
  --ink-heading: #eef4fb; --ink-body: #cbd7e6; --ink-muted: #98abc2; --ink-faint: #98abc2; --ink-disabled: #62758e;
  --ball: #7cc4ff; --on-ball: #08121f; --ball-text: #a8dcff; --ball-wash: rgba(124, 196, 255, .16); --focus-ring: #a8dcff;
  --accent-blue: #a8dcff; --accent-blue-bright: #a8dcff; --accent-violet: #7cc4ff; --accent-violet-deep: #7cc4ff;
  --chrome-high: #eef4fb; --chrome-mid: #cbd7e6; --chrome-low: #62758e; --brand-navy: #0b1422;
  --ramp-accent: linear-gradient(90deg, #7cc4ff, #a8dcff); --ramp-gem: linear-gradient(150deg, #7cc4ff, #7cc4ff);
  --btn-primary-from: #7cc4ff; --btn-primary-to: #7cc4ff; --btn-primary-ink: #08121f;
  --btn-secondary-border: #62758e; --btn-secondary-ink: #eef4fb;
  --accent-blue-rgb: 168, 220, 255; --ink-muted-rgb: 152, 171, 194;
  --positive: #6fe0a4; --negative: #ff8a94; --live: #ff8a94; --warning: #f2c14e;
  --season-snow: #eef4fb; --season-snow-opacity: .5;
  --season-aurora-1: #1fbf8d; --season-aurora-2: #7ef0c1; --season-aurora-3: #6f8cff; --season-aurora-4: #b58cff;
}
[data-theme="light"][data-visual-theme="winter"] {
  --surface-page: #eef4fa; --surface-card: #ffffff; --surface-raised: #f6f9fd; --surface-sunken: #dde7f2;
  --surface-inverse: #0f1e33; --on-inverse: #ffffff;
  --hairline: rgba(15, 30, 51, .10); --border-subtle: rgba(15, 30, 51, .10); --border-default: rgba(15, 30, 51, .16);
  --border-strong: #74849a; --border-control: #74849a;
  --ink-heading: #0f1e33; --ink-body: #33445c; --ink-muted: #566780; --ink-faint: #566780; --ink-disabled: #74849a;
  --ball: #1d6fd1; --on-ball: #ffffff; --ball-text: #1d5fa8; --ball-wash: rgba(29, 111, 209, .12); --focus-ring: #0f1e33;
  --accent-blue: #1d5fa8; --accent-blue-bright: #1d5fa8; --accent-violet: #1d6fd1; --accent-violet-deep: #1d6fd1;
  --chrome-high: #ffffff; --chrome-mid: #74849a; --chrome-low: #566780; --brand-navy: #0f1e33;
  --ramp-accent: linear-gradient(90deg, #1d6fd1, #1d5fa8); --ramp-gem: linear-gradient(150deg, #1d6fd1, #1d6fd1);
  --btn-primary-from: #1d6fd1; --btn-primary-to: #1d6fd1; --btn-primary-ink: #ffffff;
  --btn-secondary-border: #74849a; --btn-secondary-ink: #0f1e33;
  --accent-blue-rgb: 29, 95, 168; --ink-muted-rgb: 86, 103, 128;
  --positive: #1c7445; --negative: #c4162a; --live: #c4162a; --warning: #7a5600;
  --season-snow: #a9bfd8; --season-snow-opacity: .7;
  --season-aurora-1: #1fbf8d; --season-aurora-2: #7ef0c1; --season-aurora-3: #6f8cff; --season-aurora-4: #b58cff;
}
/* Sommer (Claude Design "Padelstar Sommer", 2026-10-20): Sommerkveld (dark) / Sommerdag (light). Sea-blue evening or sand
   day, sun yellow as the action colour, turquoise (evening) or burnt orange (day) for what lights up; a sun marks the leader. */
:root:not([data-theme="light"])[data-visual-theme="summer"] {
  --surface-page: #0a2a3a; --surface-card: #12384b; --surface-raised: #1a465b; --surface-sunken: #0c3042;
  --surface-inverse: #fffaf0; --on-inverse: #0a2a3a;
  --hairline: rgba(255, 250, 240, .12); --border-subtle: rgba(255, 250, 240, .12); --border-default: rgba(255, 250, 240, .16);
  --border-strong: #6b93a6; --border-control: #6b93a6;
  --ink-heading: #fffaf0; --ink-body: #d9e6ea; --ink-muted: #a3c1cf; --ink-faint: #a3c1cf; --ink-disabled: #6b93a6;
  --ball: #ffcf3f; --on-ball: #2a1c00; --ball-text: #5ee6d0; --ball-wash: rgba(94, 230, 208, .16); --focus-ring: #5ee6d0;
  --accent-blue: #5ee6d0; --accent-blue-bright: #5ee6d0; --accent-violet: #ffcf3f; --accent-violet-deep: #ffcf3f;
  --chrome-high: #fffaf0; --chrome-mid: #d9e6ea; --chrome-low: #6b93a6; --brand-navy: #0a2a3a;
  --ramp-accent: linear-gradient(90deg, #ffcf3f, #5ee6d0); --ramp-gem: linear-gradient(150deg, #ffcf3f, #ffcf3f);
  --btn-primary-from: #ffcf3f; --btn-primary-to: #ffcf3f; --btn-primary-ink: #2a1c00;
  --btn-secondary-border: #6b93a6; --btn-secondary-ink: #fffaf0;
  --accent-blue-rgb: 94, 230, 208; --ink-muted-rgb: 163, 193, 207;
  --positive: #7de89a; --negative: #ff9a9a; --live: #ff9a9a; --warning: #f2c14e;
}
[data-theme="light"][data-visual-theme="summer"] {
  --surface-page: #fff6df; --surface-card: #ffffff; --surface-raised: #fffaf0; --surface-sunken: #fbe9bf;
  --surface-inverse: #0a6f94; --on-inverse: #ffffff;
  --hairline: rgba(16, 48, 61, .10); --border-subtle: rgba(16, 48, 61, .10); --border-default: rgba(16, 48, 61, .16);
  --border-strong: #7c949e; --border-control: #7c949e;
  --ink-heading: #10303d; --ink-body: #2f4b57; --ink-muted: #4f6a75; --ink-faint: #4f6a75; --ink-disabled: #7c949e;
  --ball: #ffc020; --on-ball: #10303d; --ball-text: #ba3e0c; --ball-wash: rgba(255, 192, 32, .24); --focus-ring: #10303d;
  --accent-blue: #ba3e0c; --accent-blue-bright: #ba3e0c; --accent-violet: #ffc020; --accent-violet-deep: #ffc020;
  --chrome-high: #ffffff; --chrome-mid: #7c949e; --chrome-low: #4f6a75; --brand-navy: #10303d;
  --ramp-accent: linear-gradient(90deg, #ffc020, #ba3e0c); --ramp-gem: linear-gradient(150deg, #ffc020, #ffc020);
  --btn-primary-from: #ffc020; --btn-primary-to: #ffc020; --btn-primary-ink: #10303d;
  --btn-secondary-border: #7c949e; --btn-secondary-ink: #10303d;
  --accent-blue-rgb: 186, 62, 12; --ink-muted-rgb: 79, 106, 117;
  --positive: #1c7445; --negative: #c4162a; --live: #c4162a; --warning: #7a5600;
}
/* Pride (Claude Design "Padelstar Pride", 2026-10-20): Pride natt / Pride dag. Rainbow logo, a rainbow stripe on the main
   card, rainbow arcs in the corner of the page and a rainbow heart on the leader; pink as the action colour. */
:root:not([data-theme="light"])[data-visual-theme="pride"] {
  --surface-page: #111014; --surface-card: #1c1a22; --surface-raised: #26232e; --surface-sunken: #15131a;
  --surface-inverse: #f6f4fa; --on-inverse: #111014;
  --hairline: rgba(246, 244, 250, .10); --border-subtle: rgba(246, 244, 250, .10); --border-default: rgba(246, 244, 250, .16);
  --border-strong: #6f6a7c; --border-control: #6f6a7c;
  --ink-heading: #f6f4fa; --ink-body: #d3cfdc; --ink-muted: #a29daf; --ink-faint: #a29daf; --ink-disabled: #6f6a7c;
  --ball: #ff4fa3; --on-ball: #1a0812; --ball-text: #ffd166; --ball-wash: rgba(255, 79, 163, .16); --focus-ring: #ffd166;
  --accent-blue: #ffd166; --accent-blue-bright: #ffd166; --accent-violet: #ff4fa3; --accent-violet-deep: #ff4fa3;
  --chrome-high: #f6f4fa; --chrome-mid: #d3cfdc; --chrome-low: #6f6a7c; --brand-navy: #111014;
  --ramp-accent: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982); --ramp-gem: linear-gradient(150deg, #ff4fa3, #ff4fa3);
  --btn-primary-from: #ff4fa3; --btn-primary-to: #ff4fa3; --btn-primary-ink: #1a0812;
  --btn-secondary-border: #6f6a7c; --btn-secondary-ink: #f6f4fa;
  --accent-blue-rgb: 255, 209, 102; --ink-muted-rgb: 162, 157, 175;
  --positive: #6fe0a4; --negative: #ff8a94; --live: #ff8a94; --warning: #f2c14e;
}
[data-theme="light"][data-visual-theme="pride"] {
  --surface-page: #f7f5fa; --surface-card: #ffffff; --surface-raised: #fbfafd; --surface-sunken: #e9e5f0;
  --surface-inverse: #1c1a22; --on-inverse: #ffffff;
  --hairline: rgba(28, 26, 34, .10); --border-subtle: rgba(28, 26, 34, .10); --border-default: rgba(28, 26, 34, .16);
  --border-strong: #827d8d; --border-control: #827d8d;
  --ink-heading: #1c1a22; --ink-body: #3f3b48; --ink-muted: #615c6c; --ink-faint: #615c6c; --ink-disabled: #827d8d;
  --ball: #b0197a; --on-ball: #ffffff; --ball-text: #7a3fa8; --ball-wash: rgba(176, 25, 122, .10); --focus-ring: #1c1a22;
  --accent-blue: #7a3fa8; --accent-blue-bright: #7a3fa8; --accent-violet: #b0197a; --accent-violet-deep: #b0197a;
  --chrome-high: #ffffff; --chrome-mid: #827d8d; --chrome-low: #615c6c; --brand-navy: #1c1a22;
  --ramp-accent: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982); --ramp-gem: linear-gradient(150deg, #b0197a, #b0197a);
  --btn-primary-from: #b0197a; --btn-primary-to: #b0197a; --btn-primary-ink: #ffffff;
  --btn-secondary-border: #827d8d; --btn-secondary-ink: #1c1a22;
  --accent-blue-rgb: 122, 63, 168; --ink-muted-rgb: 97, 92, 108;
  --positive: #1c7445; --negative: #c4162a; --live: #c4162a; --warning: #7a5600;
}