/*
Tirly tokens. Green is the only palette (matches Figma b2GLzUFAjHh093TRAZVY5p).

Themes. Dark is the default and the attribute-less baseline (:root, also [data-theme="green"]).
Light is [data-theme="light"] on <html>: it REPLACES the green values, it is not layered on them,
and it only redefines color tokens (spacing, type, radius and the hard-shadow geometry are shared).
The attribute is set by the inline boot script in every <head> and by tierly/theme.js (localStorage
"tirly-theme"). prefers-color-scheme is deliberately ignored.
Light values come from Figma page «11 Light mode». Light contrast (WCAG) for the values below:
text #141416 on bg 16.3, muted #57545E on surface-2 5.8, accent #27700F on surface 5.85,
cyan #00666C on bg 6.0, accent-2 #5A3CC4 on bg 6.5, danger #C0262D on surface 5.61,
on-accent #FFF on accent 6.16 and on accent-2 7.30, success #1E7038 on surface 5.82.
--color-accent-muted-1 #D6EEC6 is fill-only (1.10 on bg): never set text in it; use --color-accent-text.
--color-line #BDB5A3 is decorative (1.81 on bg): never set text in it.

Contrast (WCAG AA). Normal text >= 4.5:1. Large text >= 3:1.
UI chrome (focus ring, borders) >= 3:1. Button labels are 12px/500 mono caps, so 4.5:1.

--color-text #EDEDED on --color-bg #0E0E10                 16.47  pass
--color-text #EDEDED on --color-surface #18181C           15.12  pass
--color-text #EDEDED on --color-surface-2 #202026         13.84  pass
--color-muted #8A8A94 on --color-surface                   5.18  pass
--color-muted-2 #9A98A3 on --color-surface                 6.23  pass
--color-muted-2 #9A98A3 on --color-surface-2               5.71  pass
white 85% on --color-surface                              10+    pass
--color-on-accent #0E0E10 on --color-accent #B5FF84       16.16  pass
--color-on-accent #0E0E10 on --color-accent-muted-1 #E1FFCE  17+   pass (progress fill label)
--color-on-accent #0E0E10 on --color-danger #FF5C5C        6.37  pass
--color-on-accent #0E0E10 on --color-success #7CF29A      13.80  pass
--color-white #FFF on --color-discord #5865F2              4.61  pass
--color-accent-2 #6E4BD8 on --color-surface                3.09  UI only
  Focus rings may use accent-2. Do not set body text in accent-2.

Small text on a surface uses --color-muted-2 or --color-text-soft
(white at 85%). Do not go lighter than muted-2.
*/

@font-face {
  font-family: "Press Start 2P";
  src: url("/tierly/assets/fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/tierly/assets/fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/tierly/assets/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/tierly/assets/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("/tierly/assets/fonts/martian-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("/tierly/assets/fonts/martian-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("/tierly/assets/fonts/martian-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="green"] {
  --color-bg: #0E0E10;
  --color-surface: #18181C;
  --color-surface-2: #202026;
  --color-line: #2A2A30;
  --color-text: #EDEDED;
  --color-muted: #8A8A94;
  --color-muted-2: #9A98A3;
  --color-accent: #B5FF84;
  --color-accent-2: #6E4BD8;
  /* accent-2 mixed 45% with white: Diamond rank gem, readable against the violet body at 22 px */
  --color-accent-2-light: #AF9CEA;
  /* Figma 'accent muted' tints. Light greens for XP and progress fills (not clickable). */
  --color-accent-muted-1: #E1FFCE;
  --color-accent-muted-2: #F4FFEC;
  /* Eyebrows and labels that are accent-muted-1 in dark and plain accent in light (Figma). Text only. */
  --color-accent-text: var(--color-accent-muted-1);
  --color-on-accent: #0E0E10;
  --color-danger: #FF5C5C;
  --color-success: #7CF29A;
  --color-cream: #F4F1EA;

  --color-white: #FFFFFF;
  --color-cyan: #5CE1E6;
  /* Badge-signing modal (Figma «Firma de insignia»): generic sparkles around the badge and the card border. */
  --color-sparkle: #a58bff;
  --color-border-strong: #3A3A44;
  --color-slate: #B9B9C6;
  --color-navy: #1E2448;
  --color-discord: #5865F2;
  --color-shadow: #000000;
  --color-outline: #000000;
  --color-text-soft: color-mix(in srgb, var(--color-white) 85%, transparent);

  --color-pink: #FF8FD8;
  --color-yellow: #FFD23F;
  --color-gold: #FFD166;
  --color-silver: #C9CBD6;
  --color-red: #D7263D;
  --color-bronze: #C07A3F;
  --color-steel: #B9BDC8;
  --color-amber: #F2C94C;
  --color-flame: #FF4A12;
  --color-latin: #FF5A1F;
  /* Accent only (owner decision), never a theme: dark = the orange already in use (--color-latin), light = Figma color/orange. */
  --color-brand-orange: #FF5A1F;

  /* Non-themed constants: dark media wells, scrims and art backdrops stay dark in both themes (no Figma light variant). */
  --color-ink: #0E0E10;
  --color-well: #0B0B12;
  --color-avatar-well: #15162B;
  --color-track-well: #1E2038;
  --color-track-edge: rgba(0, 0, 0, 0.35);
  --color-path-well: #2A2D4A;
  --color-album-well: #1C1E33;
  --color-scrim: rgba(11, 11, 18, 0.72);
  --color-scrim-strong: rgba(11, 11, 18, 0.92);
  --color-scrim-black: rgb(0 0 0 / 0.72);
  --color-scrim-menu: rgb(0 0 0 / 0.5);
  --color-legendary: #D4A017;
  /* Badge rarity rings (Figma «Badges v1»): base = ring, light = highlight, shadow = underside. Same values in both themes. */
  --badge-ring-common-base: #B9B9C6;
  --badge-ring-common-light: #EDEDED;
  --badge-ring-common-shadow: #8A8A94;
  --badge-ring-rare-base: #5CE1E6;
  --badge-ring-rare-light: #C8F7F9;
  --badge-ring-rare-shadow: #2E9AA0;
  --badge-ring-legendary-base: #FFD166;
  --badge-ring-legendary-light: #FFF1C2;
  --badge-ring-legendary-shadow: #C07A3F;
  --badge-ring-legendary-sparkle: #FFFFFF;
  /* Themed one-offs that were literals in player.css; dark values unchanged. */
  --color-danger-soft: #FF5A5A;
  --color-dashed: #4A4A54;
  --color-switch-off: #2F2F37;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-card: 20px;
  --radius-button: 12px;
  --radius-panel: 32px;
  --radius-device: 8px;

  --outline: 3px solid var(--color-outline);
  --shadow-hard: 6px 6px 0 var(--color-shadow);
  --shadow-hard-sm: 4px 4px 0 var(--color-shadow);
  --shadow-lift: 8px 8px 0 var(--color-shadow);
  --shadow-accent: 4px 4px 0 var(--color-accent);
  --shadow-accent-2: 4px 4px 0 var(--color-accent-2);
  /* Figma 6px offsets: Card, FAQ open, empty art (accent) and Leaderboard row, empty state (accent-2). */
  --shadow-accent-lg: 6px 6px 0 var(--color-accent);
  --shadow-accent-2-lg: 6px 6px 0 var(--color-accent-2);

  --font-display: "Press Start 2P", ui-monospace, monospace;
  --font-title: "Martian Mono", ui-monospace, monospace;
  --font-body: "Martian Mono", ui-monospace, monospace;
  --font-mono: "Martian Mono", ui-monospace, monospace;
  --font-sans: "Space Grotesk", system-ui, sans-serif; /* Figma auth v10 body copy */

  /* Figma Foundations display styles, Press Start 2P, uppercase. Fixed px; base.css steps them down on narrow screens. */
  --fs-display-xl: 72px;
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 20px;
  --fs-display: var(--fs-h1);
  --fs-number: clamp(1.5rem, 1.1rem + 1vw, 1.75rem);
  --fs-title: clamp(1.5rem, 1.1rem + 1vw, 1.75rem);
  --fs-subtitle: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-micro: 0.625rem;

  --lh-display-xl: 90px;
  --lh-h1: 64px;
  --lh-h2: 44px;
  --lh-h3: 30px;
  --lh-display: var(--lh-h1);
  --lh-number: 1.2;
  --lh-title: 1.2;
  --lh-subtitle: 1.35;
  --lh-body: 26px;
  --lh-small: 22px;
  --lh-label: 16px;
  --lh-micro: 1.4;
  /* Figma Label style: Martian Mono 500 12/16, letter-spacing 12%. The handoff said 0.06em; Figma wins. */
  --ls-label: 0.12em;
  --ls-display-xl: -0.01em;
  --ls-h1: -0.005em;
}

/* Light theme (Figma «11 Light mode»). Colors only. See the header for how it composes with dark. */
[data-theme="light"] {
  /* Badge rarity rings (Figma «Badges v1»): base = ring, light = highlight, shadow = underside. Same values in both themes. */
  --badge-ring-common-base: #B9B9C6;
  --badge-ring-common-light: #EDEDED;
  --badge-ring-common-shadow: #8A8A94;
  --badge-ring-rare-base: #5CE1E6;
  --badge-ring-rare-light: #C8F7F9;
  --badge-ring-rare-shadow: #2E9AA0;
  --badge-ring-legendary-base: #FFD166;
  --badge-ring-legendary-light: #FFF1C2;
  --badge-ring-legendary-shadow: #C07A3F;
  --badge-ring-legendary-sparkle: #FFFFFF;
  --color-bg: #F4F1EA;
  --color-surface: #FBF9F4;
  --color-surface-2: #E8E3D7;
  --color-line: #BDB5A3;
  --color-text: #141416;
  --color-muted: #57545E;
  --color-muted-2: #5F5C66;
  --color-accent: #27700F;
  --color-accent-2: #5A3CC4;
  --color-accent-muted-1: #D6EEC6;
  --color-accent-text: var(--color-accent);
  --color-on-accent: #FFFFFF;
  --color-danger: #C0262D;
  --color-success: #1E7038;
  --color-cream: #141416;
  --color-cyan: #00666C;
  --color-sparkle: #5a3cc4;
  --color-border-strong: var(--color-text);
  --color-slate: #4A4A55;
  --color-shadow: #000000;
  --color-outline: #000000;
  --color-text-soft: color-mix(in srgb, var(--color-text) 85%, transparent);
  --color-accent-2-light: var(--color-accent-2);
  --color-brand-orange: #B33F00;
  --color-danger-soft: var(--color-danger);
  --color-dashed: var(--color-muted-2);
  --color-switch-off: var(--color-muted);
}
/* genre-crate:start. Figma «Genre» collection (205:32287 dark, 205:32344 light). Self-contained block for «Cajón de discos»; keep it together when merging themes. */
:root,
[data-theme="green"] {
  --genre-rock-base: #3a1216;
  --genre-rock-strong: #ff4d5e;
  --genre-rock-on-base: #f4f1ea;
  --genre-rock-on-strong: #0e0e10;
  --genre-pop-base: #3a1230;
  --genre-pop-strong: #ff7ad9;
  --genre-pop-on-base: #f4f1ea;
  --genre-pop-on-strong: #0e0e10;
  --genre-hiphop-base: #3a2c08;
  --genre-hiphop-strong: #ffc53d;
  --genre-hiphop-on-base: #f4f1ea;
  --genre-hiphop-on-strong: #0e0e10;
  --genre-electronica-base: #082f33;
  --genre-electronica-strong: #4de8ef;
  --genre-electronica-on-base: #f4f1ea;
  --genre-electronica-on-strong: #0e0e10;
  --genre-indie-base: #1c3010;
  --genre-indie-strong: #a8f070;
  --genre-indie-on-base: #f4f1ea;
  --genre-indie-on-strong: #0e0e10;
  --genre-metal-base: #24262e;
  --genre-metal-strong: #b9bfd0;
  --genre-metal-on-base: #f4f1ea;
  --genre-metal-on-strong: #0e0e10;
  --genre-latino-base: #3a1a06;
  --genre-latino-strong: #ff7a2e;
  --genre-latino-on-base: #f4f1ea;
  --genre-latino-on-strong: #0e0e10;
  --genre-rnb-base: #2a1440;
  --genre-rnb-strong: #b98cff;
  --genre-rnb-on-base: #f4f1ea;
  --genre-rnb-on-strong: #0e0e10;
  --genre-jazz-base: #33260f;
  --genre-jazz-strong: #e0b46a;
  --genre-jazz-on-base: #f4f1ea;
  --genre-jazz-on-strong: #0e0e10;
  --genre-kpop-base: #2e1038;
  --genre-kpop-strong: #f08cff;
  --genre-kpop-on-base: #f4f1ea;
  --genre-kpop-on-strong: #0e0e10;
  --genre-otro-base: #1e1e24;
  --genre-otro-strong: #a3a1ad;
  --genre-otro-on-base: #f4f1ea;
  --genre-otro-on-strong: #0e0e10;
}
[data-theme="light"] {
  --genre-rock-base: #ffe1e3;
  --genre-rock-strong: #b3122a;
  --genre-rock-on-base: #141416;
  --genre-rock-on-strong: #ffffff;
  --genre-pop-base: #ffe3f6;
  --genre-pop-strong: #a3177f;
  --genre-pop-on-base: #141416;
  --genre-pop-on-strong: #ffffff;
  --genre-hiphop-base: #fff1c7;
  --genre-hiphop-strong: #8a5a00;
  --genre-hiphop-on-base: #141416;
  --genre-hiphop-on-strong: #ffffff;
  --genre-electronica-base: #d9f8fa;
  --genre-electronica-strong: #006a70;
  --genre-electronica-on-base: #141416;
  --genre-electronica-on-strong: #ffffff;
  --genre-indie-base: #e6f8d6;
  --genre-indie-strong: #2f6e10;
  --genre-indie-on-base: #141416;
  --genre-indie-on-strong: #ffffff;
  --genre-metal-base: #e7e9ef;
  --genre-metal-strong: #454b5c;
  --genre-metal-on-base: #141416;
  --genre-metal-on-strong: #ffffff;
  --genre-latino-base: #ffe6d6;
  --genre-latino-strong: #a33d00;
  --genre-latino-on-base: #141416;
  --genre-latino-on-strong: #ffffff;
  --genre-rnb-base: #efe3ff;
  --genre-rnb-strong: #6236b8;
  --genre-rnb-on-base: #141416;
  --genre-rnb-on-strong: #ffffff;
  --genre-jazz-base: #f6ecd8;
  --genre-jazz-strong: #7a5512;
  --genre-jazz-on-base: #141416;
  --genre-jazz-on-strong: #ffffff;
  --genre-kpop-base: #fbe3ff;
  --genre-kpop-strong: #8f1fa6;
  --genre-kpop-on-base: #141416;
  --genre-kpop-on-strong: #ffffff;
  --genre-otro-base: #ece9e2;
  --genre-otro-strong: #5f5c66;
  --genre-otro-on-base: #141416;
  --genre-otro-on-strong: #ffffff;
}
/* genre-crate:end */