/*
 * WeeMeetly Admin: Marken-Ueberschreibung "Armband" (Sonnengelb auf Aubergine).
 * Wird in index.html NACH dem gebauten Bundle-CSS geladen; das Bundle bleibt unveraendert.
 * Rueckbau: den <link> auf /brand-theme.css aus index.html entfernen = altes Aussehen.
 * Tokens: docs/DESIGN.md. Kontrastpaare prueft __tests__/site-backend.test.ts (liest dieses File).
 * Hinweis: unlayerte Regeln schlagen die @layer-Regeln des Bundles, daher kein !important noetig.
 */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 100 599;
  font-display: swap;
  src: url("/fonts/Figtree_400Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/fonts/Figtree_600SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 100 799;
  font-display: swap;
  src: url("/fonts/BricolageGrotesque_700Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("/fonts/BricolageGrotesque_800ExtraBold.ttf") format("truetype");
}

:root,
:host {
  /* Schriften */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Hell: "Papier" */
  --color-background: #f2eef3;
  --color-foreground: #241b2c;
  --color-card: #fbf8fb;
  --color-card-foreground: #241b2c;
  --color-surface: #e7e1ea;
  --color-surface-2: #ddd5e1;
  --color-muted-foreground: #5e5368;
  --color-border: #cec4d3;
  --color-ring: #946a00;

  /* Marke: Flaeche Sonnengelb, Schrift darauf dunkel; Gelbbraun als Schrift = Ink */
  --color-primary: #ffc531;
  --color-primary-foreground: #1f1200;
  --color-primary-ink: #7a5200;
  --color-primary-soft: #ffd866;
  --color-accent: #ffc93c;
  --color-accent-foreground: #1f1200;

  /* Zustaende (als Text AA); Info neutral als Garn Petrol, kein SaaS-Blau */
  --color-destructive: #b3261e;
  --color-success: #2b6e2f;
  --color-warning: #86520a;
  --color-info: #1f6a7a;

  /* Markenblock Aubergine */
  --color-brand-block: #2b1f36;
  --color-brand-block-2: #3d2b4a;
  --color-on-brand-block: #ffffff;

  --brand-bg-glow-a: #ffc93c24;
  --brand-bg-glow-b: #ffc53114;
  --brand-scroll: #5e536847;
  --brand-scroll-hover: #5e536885;
  --brand-shadow: #241b2c;
}

/* Dunkel: "Tinte". Die App kennt keinen Dunkelmodus, daher nur Farbvariablen, wo die Utilities ihnen folgen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #1b1521;
    --color-foreground: #f4eef6;
    --color-card: #261e2d;
    --color-card-foreground: #f4eef6;
    --color-surface: #322839;
    --color-surface-2: #3b3044;
    --color-muted-foreground: #b6aabf;
    --color-border: #4a3e53;
    --color-ring: #ffb84d;
    --color-primary: #ffb84d;
    --color-primary-foreground: #2b1700;
    --color-primary-ink: #ffc670;
    --color-primary-soft: #4a3412;
    --color-accent: #ffd25e;
    --color-accent-foreground: #2b1700;
    --color-destructive: #ff9470;
    --color-success: #86d58c;
    --color-warning: #f2b862;
    --color-info: #7fc6d4;
    --brand-bg-glow-a: #ffd25e12;
    --brand-bg-glow-b: #ffb84d0c;
    --brand-scroll: #b6aabf47;
    --brand-scroll-hover: #b6aabf85;
    --brand-shadow: #000000;
    color-scheme: dark;
  }
}

/* Grundflaeche: Aubergine-Papier statt Gold-/Orange-Schleier mit festen Hex-Werten */
html,
body {
  background:
    radial-gradient(1200px 600px at 0% 0%, var(--brand-bg-glow-a), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, var(--brand-bg-glow-b), transparent 50%),
    var(--color-background);
  font-feature-settings: normal;
}

/* Ueberschriften: Bricolage Grotesque; Text bleibt Figtree */
h1,
h2,
h3,
.font-extrabold {
  font-family: var(--font-display);
}
h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

/* Monospace: JetBrains Mono wird nicht mehr geladen */
.mono {
  font-family: var(--font-mono);
}

/*
 * Primaerflaeche (Buttons, Logo, Avatar, aktiver Nav-Punkt): im Bundle ein fester Verlauf gold -> #ff8c00 (Orange)
 * mit text-white. Neu: flaches Sonnengelb mit dunkler Schrift (nie weiss auf Gelb).
 */
.bg-brand-gradient {
  background-image: none;
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}
.bg-brand-gradient.text-white,
.bg-brand-gradient .text-white {
  color: var(--color-primary-foreground);
}
.text-brand-gradient {
  color: var(--color-primary-ink);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

/* Gelbbraun als Schrift/Icon auf hellem Grund: Ink-Ton (>= 4,5:1) */
.text-primary {
  color: var(--color-primary-ink);
}

/* Push-Vorschau (Verlauf foreground): Markenblock Aubergine mit weisser Schrift */
.bg-gradient-to-br.from-foreground\/95 {
  background-image: linear-gradient(135deg, var(--color-brand-block-2), var(--color-brand-block));
  color: var(--color-on-brand-block);
}

/* Pillen-Knoepfe und weiche Flaechen */
button.bg-brand-gradient,
a.bg-brand-gradient {
  border-radius: 999px;
}

/* Schatten dezent, aubergine-getoent statt Slate */
.shadow-card {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-shadow) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--brand-shadow) 7%, transparent);
}
.shadow-card-hover {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-shadow) 8%, transparent), 0 16px 40px color-mix(in srgb, var(--brand-shadow) 10%, transparent);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-scroll);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-scroll-hover);
}

/* Fokus: gut sichtbarer Ring in Markenfarbe (Ring-Offset folgt dem Hintergrund) */
:focus-visible {
  outline-color: var(--color-ring);
}

/*
 * Bekannte Grenze: Alpha-Farben wie .bg-accent/30 (#ffd7004d) haben im Bundle einen festen Hex-Fallback und
 * danach eine color-mix()-Regel auf die Variable. Alle Browser mit color-mix (Chrome 111+, Safari 16.2+,
 * Firefox 113+) folgen der Variable; nur sehr alte Browser sehen noch die alten Fallback-Hex-Werte.
 */

/* Weisse Flaechen im Bundle (bg-white, Hover-Weiss, Milchglas) -> Karte (nie reinweiss, siehe DESIGN.md) */
.bg-white {
  background-color: var(--color-card);
}
.bg-white\/60 {
  background-color: color-mix(in srgb, var(--color-card) 60%, transparent);
}
.bg-white\/85 {
  background-color: color-mix(in srgb, var(--color-card) 85%, transparent);
}
.group-hover\:bg-white:is(:where(.group):hover *),
.hover\:bg-white:hover {
  background-color: var(--color-card);
}

/* Schalter "an": das Bundle nutzt data-[state=checked]:bg-brand-gradient, die Klasse fehlt aber im gebauten CSS
   (schon im Original sah "an" wie "aus" aus). Hier ergaenzt, damit der Zustand erkennbar ist. */
.data-\[state\=checked\]\:bg-brand-gradient[data-state="checked"] {
  background-color: var(--color-primary);
}

/* Dunkel: Zustandsfarben sind hell (Korall, Gruen, Bernstein, Garn-Petrol): Schrift/Icons darauf dunkel statt weiss */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-destructive,
  :root:not([data-theme="light"]) .bg-success,
  :root:not([data-theme="light"]) .bg-warning,
  :root:not([data-theme="light"]) .bg-info,
  :root:not([data-theme="light"]) :is(.bg-destructive, .bg-success, .bg-warning, .bg-info) .text-white {
    color: var(--color-primary-foreground);
  }
  :root:not([data-theme="light"]) .bg-destructive.text-white,
  :root:not([data-theme="light"]) .bg-success.text-white,
  :root:not([data-theme="light"]) .bg-warning.text-white,
  :root:not([data-theme="light"]) .bg-info.text-white {
    color: var(--color-primary-foreground);
  }
}