/* ---------------------------------------------------------------------------
   Semantische Tokens der Weboberfläche.

   Die Namen entsprechen eins zu eins den Rollen aus ADR-016 / ADR-028; die
   Werte stammen aus WarmParticipationTheme.light in
   ios/Servyhub/AppBrandTheme.swift. Hier stehen keine anderen Farben, und
   Komponenten greifen ausschliesslich auf diese Variablen zu.

   Der Dunkelmodus ergaenzt genau dieselben Rollen und fasst keine Komponente
   an: Wer Farben ueber diese Variablen nimmt, ist damit fertig. Die Werte
   stammen aus derselben Quelle wie die hellen -- `adaptive(hell, dunkel)` in
   `WarmParticipationTheme` -- damit App und Web dieselbe Nacht zeigen.
   --------------------------------------------------------------------------- */

:root {
  /* color.* */
  --color-background-primary: #FFF9F6;
  --color-background-subtle: #FFF9F6;
  --color-surface-primary: #FFFFFF;
  --color-surface-secondary: #FFF9F6;
  --color-text-primary: #251B18;
  --color-text-secondary: #6B5B56;
  --color-text-tertiary: #675E5B;
  --color-border-subtle: #E5DEDB;
  --color-brand-signature: #FF5954;
  --color-brand-primary-action: #B93630;
  --color-brand-primary-action-pressed: #8E1F1A;
  --color-brand-secondary-action: #006B66;
  --color-on-brand-primary-action: #FFFFFF;
  --color-selection-background: #FDE8E5;
  --color-selection-foreground: #8E1F1A;
  /* Das Gold der Bewertungssterne. Es stand bis zum 7. September 2026 als
     feste Farbe in `discover.css` und fehlte damit auf jeder Seite ohne
     dieses Blatt -- im Konto war der Stern ueber dem Namen schlicht weiss.
     Im Dunkeln eine Spur heller: Derselbe Ton, der auf Weiss satt wirkt,
     wird auf Schwarz stumpf. */
  --color-rating-star: #E9A825;
  --color-status-success: #1F6F4A;
  --color-status-success-surface: #E4F5F2;
  --color-status-warning: #8A4B00;
  --color-status-warning-surface: #FFF4D6;
  --color-status-error: #B42318;
  --color-status-error-surface: #FDECEA;
  --color-status-info: #155EEF;
  --color-status-info-surface: #E8F0FF;
  --color-focus: #005FCC;
  --color-disabled-foreground: #675E5B;
  --color-disabled-background: #E5DEDB;
  --color-overlay-image: rgba(0, 0, 0, .6);

  /* Kategoriefarben — app-eigen und waehrend der Migration stabil
     (AppColor.category* in ios/Servyhub/AppBrandTheme.swift). Sie
     unterscheiden Bereiche; sie tragen keine Statusbedeutung. */
  --color-category-sport: #007C76;
  --color-category-music: #235B8C;
  --color-category-culture: #17666C;
  --color-category-food: #F36B2C;
  --color-category-family: #2563B3;
  --color-category-education: #6049A6;
  --color-category-community: #9E396D;
  --color-category-services: #40576B;
  --color-category-health: #2E7D57;
  --color-category-leisure: #A9631A;

  /* spacing.* */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-section: 32px;

  /* radius.* */
  --radius-control: 16px;
  --radius-card: 18px;
  --radius-hero: 26px;

  /* sizing.* / layout.* */
  --layout-touch-target: 44px;
  --sizing-icon-compact: 18px;
  --sizing-status-indicator: 10px;
  --sizing-search-control: 52px;

  /* elevation.* */
  --elevation-card: 0 2px 8px rgba(0, 0, 0, .08);
  --elevation-hero: 0 8px 20px rgba(0, 0, 0, .12);
  --elevation-overlay: 0 10px 28px rgba(0, 0, 0, .14);

  /* motion.* */
  --motion-quick: 180ms cubic-bezier(.2, 0, 0, 1);
  --motion-standard: 280ms cubic-bezier(.2, .8, .2, 1);

  /* typography.* — benannte Rollen statt fester Groessen, damit
     Browser-Zoom und Nutzerschriftgroesse durchschlagen.

     Die Web-Stufen liegen bewusst unter denen der App: Ein Zeigergeraet sitzt
     weiter weg und zeigt genauer als ein Daumen, und der Bildschirm traegt
     mehr gleichzeitig. Die Rollen und ihre Verhaeltnisse bleiben dieselben --
     nur die Grundgroesse ist kleiner. Mindestgroessen fuer Bedienelemente
     (layout.touchTarget) sind davon nicht betroffen. */
  --font-family-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-numeric: ui-monospace, SFMono-Regular, Menlo, monospace;
  --typography-screen-title: 700 clamp(1.25rem, 1.05rem + .7vw, 1.5rem) / 1.25 var(--font-family-ui);
  --typography-hero-title: 700 1.1rem / 1.3 var(--font-family-ui);
  --typography-section-title: 600 .94rem / 1.35 var(--font-family-ui);
  --typography-card-title: 600 .87rem / 1.4 var(--font-family-ui);
  --typography-body: 400 .86rem / 1.55 var(--font-family-ui);
  --typography-metadata: 400 .78rem / 1.45 var(--font-family-ui);
  --typography-caption: 400 .71rem / 1.4 var(--font-family-ui);
  --typography-action: 600 .8rem / 1.2 var(--font-family-ui);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------- Dunkelmodus */

/* Dieselben Rollen, die dunklen Werte aus `adaptive(hell, dunkel)`
   (ios/Servyhub/AppBrandTheme.swift). Zwei Wege fuehren hierher: die
   Einstellung des Geraets und die Wahl im Profil. Die Wahl gewinnt -- wer sie
   trifft, meint sie. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background-primary: #0B0F14;
    --color-background-subtle: #0B0F14;
    --color-surface-primary: #12171F;
    --color-surface-secondary: #181E27;
    --color-text-primary: #F5F5F7;
    --color-text-secondary: #A9ADB5;
    --color-text-tertiary: #A9ADB5;
    --color-border-subtle: #2A303A;
    --color-brand-signature: #FF847C;
    --color-brand-primary-action: #FF847C;
    --color-brand-primary-action-pressed: #FFAAA4;
    --color-brand-secondary-action: #5ED6C8;
    --color-on-brand-primary-action: #241413;
    --color-selection-background: #3C2623;
    --color-selection-foreground: #FFAAA4;
    --color-status-success: #70D6A3;
    --color-status-success-surface: #153326;
    --color-rating-star: #F2B93D;
    --color-status-warning: #F5C46B;
    --color-status-warning-surface: #3C2A0D;
    --color-status-error: #FF9A92;
    --color-status-error-surface: #421D1A;
    --color-status-info: #9CB9FF;
    --color-status-info-surface: #1A2845;
    --color-focus: #B8CDFF;
    --color-disabled-foreground: #A9ADB5;
    --color-disabled-background: #181E27;
    --color-overlay-image: rgba(0, 0, 0, .72);

    --color-category-sport: #45C9BB;
    --color-category-music: #7FB7EA;
    --color-category-culture: #61C5CB;
    --color-category-food: #FF9B67;
    --color-category-family: #86B5F2;
    --color-category-education: #B09AEF;
    --color-category-community: #E58CBB;
    --color-category-services: #9DB2C5;
    --color-category-health: #75CEA0;
    --color-category-leisure: #E6B46B;

    /* Dieselbe Zeile wie unten bei der ausdruecklichen Wahl -- hier fehlte
       sie. Folge: Wer sein Geraet auf dunkel stellt und im Profil nichts
       waehlt, bekommt unsere dunklen Farben, aber der Browser haelt die
       Seite weiter fuer hell. Seine eigenen Farben bleiben dann hell: Ein
       Knopf ohne eigene Schriftfarbe schreibt in `buttontext`, also
       schwarz -- im Anlegen stand „Čeština" schwarz auf dunkelgrau. */
    color-scheme: dark;
  }
}

/* Die ausdrueckliche Wahl -- sie gilt auch, wenn das Geraet es anders meint. */
:root[data-theme="dark"] {
  --color-background-primary: #0B0F14;
  --color-background-subtle: #0B0F14;
  --color-surface-primary: #12171F;
  --color-surface-secondary: #181E27;
  --color-text-primary: #F5F5F7;
  --color-text-secondary: #A9ADB5;
  --color-text-tertiary: #A9ADB5;
  --color-border-subtle: #2A303A;
  --color-brand-signature: #FF847C;
  --color-brand-primary-action: #FF847C;
  --color-brand-primary-action-pressed: #FFAAA4;
  --color-brand-secondary-action: #5ED6C8;
  --color-on-brand-primary-action: #241413;
  --color-selection-background: #3C2623;
  --color-selection-foreground: #FFAAA4;
  --color-status-success: #70D6A3;
  --color-status-success-surface: #153326;
  --color-rating-star: #F2B93D;
  --color-status-warning: #F5C46B;
  --color-status-warning-surface: #3C2A0D;
  --color-status-error: #FF9A92;
  --color-status-error-surface: #421D1A;
  --color-status-info: #9CB9FF;
  --color-status-info-surface: #1A2845;
  --color-focus: #B8CDFF;
  --color-disabled-foreground: #A9ADB5;
  --color-disabled-background: #181E27;
  --color-overlay-image: rgba(0, 0, 0, .72);

  --color-category-sport: #45C9BB;
  --color-category-music: #7FB7EA;
  --color-category-culture: #61C5CB;
  --color-category-food: #FF9B67;
  --color-category-family: #86B5F2;
  --color-category-education: #B09AEF;
  --color-category-community: #E58CBB;
  --color-category-services: #9DB2C5;
  --color-category-health: #75CEA0;
  --color-category-leisure: #E6B46B;

  /* Der Browser soll seine eigenen Flaechen mitdrehen: Formularfelder,
     Bildlaufleisten, die Farbe hinter der Seite. */
  color-scheme: dark;
}

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