/*
 * FM Save Companion product tokens.
 *
 * Edit this file for brand, product-wide layout and application semantics.
 * Do not put page-specific selectors here. Astryx primitives live in the
 * generated fm-stone.css. Product CSS consumes only the --fm-* semantics
 * defined here and in the generated theme.
 */

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-ext-300-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-300-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-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;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-ext-700-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-700-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-ext-800-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-800-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-ext-900-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/barlow-semi-condensed-latin-900-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;
}

[data-astryx-theme="fm-stone"] {
  /* Vereinsheft-Typografie; die generierte Astryx-Basis bleibt unverändert. */
  --font-family-heading: "Barlow Semi Condensed", var(--font-family-body);
  /* Astryx-Neutrale auf Papier und Tinte gestimmt, damit auch generierte
     Primitive das Heft lesen; die generierte Stone-Basis bleibt unverändert.
     Dunkel ist mattes dunkles Papier. */
  --color-background-body: light-dark(#f4efe5, #1f1e1b);
  --color-background-surface: light-dark(#f4efe5, #1f1e1b);
  --color-background-card: light-dark(#f4efe5, #1f1e1b);
  --color-background-popover: light-dark(#f9f6ef, #292724);
  --color-background-muted: light-dark(#ebe4d6, #292724);
  --color-background-inverted: light-dark(#1c1a16, #ece6d9);
  --color-text-primary: light-dark(#1c1a16, #ece6d9);
  --color-text-secondary: light-dark(#5e584d, #aaa396);
  --color-text-disabled: light-dark(#b3aa99, #5b564d);
  --color-border: light-dark(rgb(28 26 22 / 0.18), rgb(236 230 217 / 0.16));
  --color-border-emphasized: light-dark(rgb(28 26 22 / 0.42), rgb(236 230 217 / 0.38));
  --color-accent: light-dark(#1c1a16, #ece6d9);
  --color-accent-muted: light-dark(#1c1a1614, #ece6d920);
  --radius-inner: 2px;
  --radius-element: 3px;
  --radius-container: 0px;
  --radius-page: 0px;
  /* Product semantics for all new and migrated UI. */
  --fm-color-canvas: var(--color-background-body);
  --fm-color-surface: var(--color-background-surface);
  --fm-color-surface-card: var(--color-background-card);
  --fm-color-surface-muted: var(--color-background-muted);
  --fm-color-surface-inverted: var(--color-background-inverted);
  --fm-color-text: var(--color-text-primary);
  --fm-color-text-muted: var(--color-text-secondary);
  --fm-color-text-subtle: light-dark(#5e584d, #bab3a5);
  --fm-color-text-disabled: var(--color-text-disabled);
  --fm-color-border: var(--color-border);
  --fm-color-border-strong: var(--color-border-emphasized);

  /* 1860 blue remains a deliberate brand/data accent, separate from the
     neutral Astryx interaction accent. */
  --fm-color-brand: light-dark(#0f5c8f, #7ccbf5);
  --fm-color-brand-fill: #2f9ed6;
  --fm-color-brand-soft: light-dark(#cbd5d6, #303d42);
  --fm-color-on-brand: #ffffff;
  --fm-color-on-brand-fill: #17283a;
  --fm-color-on-brand-interactive: light-dark(#ffffff, #17212b);
  --fm-color-focus: light-dark(#0f5c8f, #f6c453);
  --fm-color-on-focus: light-dark(#ffffff, #25252a);

  /* Grundton unter der Papierkachel (hell): Die Kachel wird multipliziert,
     im Mittel ergibt sich wieder das Papier #f4efe5. */
  --fm-color-paper-base: light-dark(#fdf8ed, #1f1e1b);
  /* Atmosphäre: Himmel ist Papier, Rasen ein flaches, gedrucktes Motiv, Sonne
     ein warmer Akzent – nie Bedien- oder Datenfarbe. */
  --fm-color-sky: light-dark(#ebe4d6, #292724);
  --fm-color-sky-soft: light-dark(#f4efe5, #1f1e1b);
  --fm-color-grass: light-dark(#4f8f58, #2f5b39);
  --fm-color-grass-deep: light-dark(#3f7a48, #264d30);
  --fm-color-sun: #f6c453;
  --fm-color-on-sun: #3a2a00;

  --fm-color-success: var(--color-success);
  --fm-color-warning: var(--color-warning);
  --fm-color-danger: var(--color-error);
  /* Zweite Datenreihenfarbe neben --fm-color-brand-fill (Tore blau / Vorlagen gold).
     Paar #2f9ed6 + #b08a2e besteht CVD- (ΔE >= 19,9) und 3:1-Kontrastprüfung auf
     heller wie dunkler Kartenfläche. */
  --fm-color-data-gold: #b08a2e;
  /* Anzeigetafel für Ergebnisse: in beiden Modi dunkel mit heller Schrift. */
  --fm-color-scoreboard: light-dark(#1c1a16, #11100e);
  --fm-color-on-scoreboard: #ffffff;
  /* Sieg, Remis, Niederlage wie im Football Manager: kräftig und in beiden
     Modi gleich, Schrift mindestens 4,5:1. */
  --fm-color-result-win: #1c8243;
  --fm-color-on-result-win: #ffffff;
  --fm-color-result-draw: #e0a526;
  --fm-color-on-result-draw: #1f1600;
  --fm-color-result-loss: #c0392b;
  --fm-color-on-result-loss: #ffffff;
  /* Positionskarte wie im FM: Stammposition sattgrün, sehr sicher hellgrün,
     eingeschränkt gelb. Der Platz selbst bleibt neutral. */
  --fm-color-position-natural: light-dark(#1c8243, #3fbf6a);
  --fm-color-position-accomplished: light-dark(#7cc68b, #9adba8);
  --fm-color-position-competent: #e0a526;
  --fm-color-on-position-natural: light-dark(#ffffff, #0b1a10);
  --fm-color-on-position-accomplished: #0b1a10;
  --fm-color-on-position-competent: #1f1600;
  /* Notenkästchen wie im FM: kräftig grün ab 7,5, grün ab 7,0, neutral ab
     6,5, orange ab 6,0, rot darunter. Alle Paare mindestens 4,5:1. */
  --fm-color-rating-elite-surface: #1c8243;
  --fm-color-rating-elite-text: #ffffff;
  --fm-color-rating-good-surface: light-dark(#cdebd3, #1f5335);
  --fm-color-rating-good-text: light-dark(#155a2b, #b9f0c8);
  --fm-color-rating-ok-surface: light-dark(#e2d9c8, #33302c);
  --fm-color-rating-ok-text: var(--fm-color-text);
  --fm-color-rating-weak-surface: light-dark(#fbe3bf, #54401a);
  --fm-color-rating-weak-text: light-dark(#7a4b00, #f7d59a);
  --fm-color-rating-poor-surface: light-dark(#f6cfc9, #5b2720);
  --fm-color-rating-poor-text: light-dark(#8a2a1d, #f6b3a8);
  /* Rangabzeichen: lesbare Schrift auf eigenen, in beiden Modi matten Flächen. */
  --fm-color-award-gold: light-dark(#795709, #efd086);
  --fm-color-award-gold-surface: light-dark(#f4e5ba, #40371f);
  --fm-color-award-silver: light-dark(#465b68, #cad9e2);
  --fm-color-award-silver-surface: light-dark(#e5ebee, #343e45);
  --fm-color-award-bronze: light-dark(#7b4d2a, #ebc6a8);
  --fm-color-award-bronze-surface: light-dark(#f1e2d6, #433226);
  /* Dunkle Variante mindestens 5:1 auf --color-background-card. */
  --fm-color-attribute-low: light-dark(#665f53, #948d80);
  --fm-color-attribute-mid: var(--fm-color-text);
  --fm-color-attribute-good: light-dark(#8c6200, #f6c453);
  --fm-color-attribute-elite: light-dark(#0b7334, #7fed87);
  /* Attributwerte stehen in Feldern wie die Notenkästchen: 1–5 gedämpftes
     Grau, 6–10 helles Papier, 11–15 Gold, 16–20 Grün. Schrift auf jedem Feld
     mindestens 5:1; die Schriftfarben oben gelten für Stellen ohne Feld. */
  --fm-color-attribute-low-surface: light-dark(#d6cfc1, #2c2a26);
  --fm-color-on-attribute-low: light-dark(#57503f, #a59d8f);
  --fm-color-attribute-mid-surface: light-dark(#e6dfd1, #3b3833);
  --fm-color-on-attribute-mid: light-dark(#1c1a16, #ece6d9);
  --fm-color-attribute-good-surface: light-dark(#f1cd84, #5a4416);
  --fm-color-on-attribute-good: light-dark(#553600, #f7d59a);
  --fm-color-attribute-elite-surface: light-dark(#197a3e, #3fb86a);
  --fm-color-on-attribute-elite: light-dark(#ffffff, #0b1a10);
  /* Sterne: kräftiges Ocker für volle, papierheller Stern mit Rand für leere;
     voll gegen leer im Hellen 4,1:1 (docs/GESTALTUNGSREGELN.md, Farbe). */
  --fm-color-star-fill: light-dark(#94620a, #e8b75a);
  --fm-color-star-empty: light-dark(#ebe3d2, #2c2924);
  --fm-color-star-edge: light-dark(#a79878, #6c6556);
  /* Rollenfläche als fester Wert: Chromium löst color-mix über light-dark beim
     Themewechsel nicht zuverlässig neu auf. */
  --fm-color-role-secondary-surface: light-dark(#e6e6e0, #252828);

  /* Private draft previews use a deliberately warm warning surface. */
  --fm-color-preview-surface: #5b2416;
  --fm-color-preview-border: #ff9d5c;
  --fm-color-preview-accent: #ff6b4a;
  --fm-color-preview-text: #fff5e9;
  --fm-color-preview-text-muted: #e7bca4;
  --fm-color-preview-cue: #ffd7bc;

  --fm-font-body: var(--font-family-body);
  --fm-font-heading: var(--font-family-heading);
  /* Zahlen, Daten und Ergebnisse stehen in Barlow wie auf einer Anzeigetafel,
     nicht in einer Programmierschrift. Tabellenziffern setzt base.css global. */
  --fm-font-data: var(--font-family-heading);
  /* Barlow ist bereits schmal: Titel und Namen ohne zusätzliche Verdichtung. */
  --fm-tracking-heading: 0em;
  --fm-weight-title: 800;
  --fm-weight-heading: 700;
  --fm-leading-title: 1.15;
  --fm-text-body: 1rem;
  --fm-text-label: 0.875rem;
  --fm-text-supporting: 0.75rem;
  --fm-text-micro: 0.75rem;
  --fm-text-footnote: 0.75rem;
  --fm-text-compact: 0.6875rem;
  --fm-text-axis: 0.875rem;
  --fm-text-lead: 1.125rem;
  --fm-text-heading-sm: clamp(1.35rem, 2vw, 1.7rem);
  --fm-text-heading-lg: clamp(1.9rem, 4vw, 3.25rem);

  --fm-space-1: 0.25rem;
  --fm-space-2: 0.5rem;
  --fm-space-3: 0.75rem;
  --fm-space-4: 1rem;
  --fm-space-5: 1.25rem;
  --fm-space-6: 1.5rem;
  --fm-space-8: 2rem;
  --fm-space-10: 2.5rem;
  --fm-space-12: 3rem;
  --fm-space-16: 4rem;

  --fm-page-gutter: clamp(1rem, 4vw, 4.5rem);
  /* Bühne: Jede Route liegt auf derselben Bühne. Die Breite ist die
     Aufnahmebreite der Serie (2560 px Viewport minus Navigationsleiste); auf
     breiteren Monitoren zeigt das Bild exakt den Videoausschnitt. Routen
     setzen keine eigenen Außenbreiten mehr, nur innere Kompositionen. */
  --fm-stage-max: 2336px;
  --fm-stage-wide: 1600px; /* Dokumentation: ab hier gelten die breiten Kompositionen (Media Queries nutzen den Literalwert). */
  --fm-wide-max: var(--fm-stage-max);
  --fm-content-editorial: var(--fm-stage-max);
  /* Gemeinsamer Seitenkopf: Eyebrow, Titel, Standzeile. */
  --fm-text-page-title: clamp(2rem, 1.25rem + 1.2vw, 2.75rem);
  --fm-text-page-eyebrow: var(--fm-text-supporting);
  --fm-control-size: 44px;
  --fm-header-height: 76px;

  /* Druck statt Leuchten: eckige Flächen, keine Karten- und Markenschatten.
     Überlagerungen (Dialoge, Menüs) behalten ihren Schatten. */
  --fm-radius-control: 3px;
  --fm-radius-container: 0px;
  --fm-radius-pill: 3px;
  --fm-shadow-card: none;
  --fm-shadow-overlay: var(--shadow-high);
  --fm-shadow-brand-sm: none;
  --fm-shadow-brand-md: none;
  --fm-shadow-offset-paper: var(--fm-shadow-card);
  --fm-shadow-preview: 0 8px 24px color-mix(in srgb, var(--fm-color-canvas) 34%, transparent);

  --fm-motion-press: 90ms;
  --fm-motion-control: 180ms;
  --fm-motion-route: 220ms;
  --fm-motion-signature: 460ms;
  --fm-ease-out: cubic-bezier(0.18, 0.76, 0.26, 1);
  --fm-ease-press: cubic-bezier(0.3, 0, 0.7, 1);
}