/**
 * Design Tokens
 * ----
 * Alle Design-Entscheidungen als CSS-Variablen.
 * Aenderungen hier wirken sich global aus - bitte verantwortungsvoll.
 *
 * Aesthetic Direction: Moderner, warmer Editorial-Look.
 * Nicht der Klischee-Chinarestaurant-Look (Drachenornamente, Goldrahmen).
 * Die Farben stammen aber aus der echten Marke: dem Logo "FU LIESTAL".
 *
 * Markenfarben, ausgelesen aus public/assets/images/logo.png:
 *   Rot   #D8242E  (47 % der Logoflaeche)  -> Hauptakzent
 *   Weiss #FFFFFF  (21 %)
 *   Gelb  #E7DA1E  (19 %)                  -> Akzent auf dunklem Grund
 *   Gruen #69A375  ( 8 %)                  -> Marker, Verfuegbarkeit, vegetarisch
 *
 * Grundregel fuer den Akzent:
 *   Auf hellem Grund traegt das Rot. Auf dunklem Grund traegt das Gelb.
 *   Das spiegelt das Logo selbst - roter Block, gelber Kreis.
 *
 * Kontrastwerte gegen --color-bg (#FAF7F2), WCAG AA verlangt 4.5:1 fuer Text:
 *   #D8242E  4.67:1  gerade ausreichend, aber knapp -> nur fuer Flaechen und grosse Typo
 *   #B01B23  6.49:1  komfortabel -> Links und kleine Schrift
 *   #43704D  5.36:1  gruener Text
 *   #E7DA1E  1.36:1  NIEMALS als Textfarbe auf Hell. Nur als Flaeche mit dunklem Text
 *                    darauf (10.53:1) - genau wie der gelbe Kreis im Logo.
 */

:root {
  /* ================================
     FARBEN
     ================================ */

  /* Neutral / Base */
  --color-bg: #faf7f2;                   /* Warmes Off-White */
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f2ede4;
  /* Halbtransparent fuer klebende Leisten (Kopf, Kategorien) - der Inhalt
     soll durchscheinen, aber lesbar bleiben. */
  --color-bg-sticky: rgba(250, 247, 242, 0.88);
  --color-bg-dusk: #1e1a18;              /* Warmes Dunkel fuer Abendsektionen.
                                            Ersetzt das frueher hier stehende Nachtblau,
                                            das mit Rot/Gelb/Gruen schlecht harmonierte. */
  --color-bg-dusk-subtle: #2a2321;

  --color-text: #2a2420;                 /* Warmes Schwarz, kein reines #000 */
  --color-text-muted: #7a6f66;
  --color-text-subtle: #9d928a;
  --color-text-on-dusk: #f0ece5;

  /* Marke: Rot - Hauptakzent auf hellem Grund */
  --color-accent: #d8242e;               /* Exaktes Logo-Rot. Flaechen, Knoepfe, Logo-Bezug */
  --color-accent-ink: #b01b23;           /* Abgedunkelt fuer Links und kleine Schrift */
  --color-accent-hover: #b01b23;
  --color-accent-active: #96161d;
  --color-accent-soft: rgba(216, 36, 46, 0.08);
  --color-accent-on-fill: #ffffff;       /* Text auf gefuelltem Rot - 4.99:1 */

  /* Marke: Gelb - Akzent auf dunklem Grund, Badges, Hervorhebungen */
  --color-highlight: #e7da1e;            /* Exaktes Logo-Gelb */
  --color-highlight-hover: #d2c518;
  --color-highlight-soft: rgba(231, 218, 30, 0.14);
  --color-highlight-on-fill: #2a2420;    /* Text auf gefuelltem Gelb - 10.53:1 */
  --color-accent-on-dusk: #e7da1e;       /* Auf --color-bg-dusk: 11.88:1.
                                            Das Rot kaeme dort nur auf 3.46:1. */

  /* Marke: Gruen - Verfuegbarkeit, vegetarisch, Bestaetigungen */
  --color-leaf: #69a375;                 /* Exaktes Logo-Gruen, nur als Flaeche */
  --color-leaf-ink: #43704d;             /* Textsicher auf Hell - 5.36:1 */
  --color-leaf-soft: rgba(105, 163, 117, 0.12);

  /* Status
     Achtung: Die Marke ist selbst rot. Fehler werden deshalb nicht allein ueber
     die Farbe kommuniziert, sondern immer zusaetzlich mit Symbol und Text -
     sonst ist ein Fehlerhinweis von einem Aktionsknopf nicht zu unterscheiden. */
  --color-success: #43704d;              /* Gleiche Familie wie das Logo-Gruen */
  --color-success-soft: rgba(67, 112, 77, 0.12);
  --color-warning: #9a6b0c;              /* Bewusst braeunlicher als das Marken-Gelb */
  --color-warning-soft: rgba(154, 107, 12, 0.12);
  --color-error: #96161d;                /* Dunkler als der Akzent, nie als Knopffarbe */
  --color-error-soft: rgba(150, 22, 29, 0.10);
  --color-info: #3b6d8f;
  --color-info-soft: rgba(59, 109, 143, 0.12);

  /* Kompatibilitaet
     --color-secondary hiess frueher warmes Amber (d4a574) und wird in components.css,
     home.css, account.css und im Admin noch verwendet - ausnahmslos auf dunklem Grund.
     Dort ist das Logo-Gelb die richtige Farbe. Alias bleibt, damit nichts bricht;
     in neuem Code bitte --color-highlight bzw. --color-accent-on-dusk verwenden. */
  --color-secondary: var(--color-highlight);
  --color-secondary-hover: var(--color-highlight-hover);

  /* Borders */
  --color-border: rgba(42, 36, 32, 0.12);
  --color-border-strong: rgba(42, 36, 32, 0.24);
  --color-border-accent: rgba(216, 36, 46, 0.32);

  /* ================================
     TYPOGRAFIE
     ================================ */

  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-chinese: 'Noto Serif SC', 'Songti SC', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type Scale (modular, 1.250 ratio) */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.375rem;      /* 22px */
  --text-2xl: 1.75rem;      /* 28px */
  --text-3xl: 2.25rem;      /* 36px */
  --text-4xl: 3rem;         /* 48px */
  --text-5xl: 4rem;         /* 64px */
  --text-6xl: 5.5rem;       /* 88px */

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ================================
     SPACING (4px-Basis)
     ================================ */

  --space-1: 0.25rem;       /* 4px */
  --space-2: 0.5rem;        /* 8px */
  --space-3: 0.75rem;       /* 12px */
  --space-4: 1rem;          /* 16px */
  --space-5: 1.25rem;       /* 20px */
  --space-6: 1.5rem;        /* 24px */
  --space-8: 2rem;          /* 32px */
  --space-10: 2.5rem;       /* 40px */
  --space-12: 3rem;         /* 48px */
  --space-16: 4rem;         /* 64px */
  --space-20: 5rem;         /* 80px */
  --space-24: 6rem;         /* 96px */
  --space-32: 8rem;         /* 128px */

  /* ================================
     LAYOUT
     ================================ */

  --container-max: 1280px;
  --container-narrow: 880px;
  --container-wide: 1440px;

  --gutter-mobile: var(--space-4);
  --gutter-desktop: var(--space-8);

  /* ================================
     BORDER RADIUS
     ================================ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ================================
     SHADOWS
     ================================ */

  --shadow-sm: 0 1px 2px rgba(42, 36, 32, 0.05);
  --shadow-md: 0 4px 12px rgba(42, 36, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(42, 36, 32, 0.12);
  --shadow-xl: 0 24px 64px rgba(42, 36, 32, 0.16);
  --shadow-inner: inset 0 2px 4px rgba(42, 36, 32, 0.06);

  /* ================================
     TRANSITIONS
     ================================ */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 480ms;

  /* ================================
     Z-INDEX LAYERS
     ================================ */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}


/* ================================
   DUNKELMODUS
   ================================
   Das Logo lebt vom dunklen Kontrast - roter Block, gelber Kreis. Auf hellem
   Grund wirkt die Marke blasser als auf dunklem. Deshalb ist der Dunkelmodus
   hier bewusst gestaltet und nicht dem Browser ueberlassen, der eine helle
   Seite sonst automatisch invertiert (mit unvorhersehbarem Ergebnis).

   Die Grundregel aus dem Logo bleibt: auf hellem Grund traegt das Rot,
   auf dunklem das Gelb. Deshalb wechselt --color-accent-ink hier auf ein
   helleres Rot - das Logo-Rot #D8242E kommt auf dunklem Grund nur auf
   3.46:1 und ist als Textfarbe nicht lesbar genug.

   Geaendert werden ausschliesslich Tokens. Keine Komponente definiert eine
   Farbe direkt, deshalb genuegt das hier. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #16120f;
    --color-bg-elevated: #1f1a16;
    --color-bg-subtle: #241e19;
    --color-bg-sticky: rgba(22, 18, 15, 0.90);
    --color-bg-dusk: #100d0b;
    --color-bg-dusk-subtle: #1a1613;

    --color-text: #f2ede6;
    --color-text-muted: #a89c91;
    --color-text-subtle: #7d7268;
    --color-text-on-dusk: #f2ede6;

    /* Rot bleibt die Handlungsfarbe fuer Flaechen und Knoepfe.
       Fuer TEXT auf dunklem Grund braucht es eine hellere Variante. */
    /* Flaeche bleibt das Logo-Rot: weisser Text darauf erreicht 4.99:1.
       Das hellere #e5343e sah kraeftiger aus, kam aber nur auf 4.29:1. */
    --color-accent: #d8242e;
    --color-accent-ink: #ff6b73;        /* 6.74:1 auf #16120f — nur fuer TEXT */
    --color-accent-hover: #e5343e;
    --color-accent-active: #b01b23;
    --color-accent-soft: rgba(216, 36, 46, 0.18);
    --color-accent-on-fill: #ffffff;

    --color-highlight-soft: rgba(231, 218, 30, 0.14);

    --color-leaf-ink: #8fc49a;          /* aufgehellt fuer Lesbarkeit */
    --color-leaf-soft: rgba(105, 163, 117, 0.16);

    --color-success: #8fc49a;
    --color-success-soft: rgba(105, 163, 117, 0.16);
    --color-warning: #d9a441;
    --color-warning-soft: rgba(217, 164, 65, 0.16);
    --color-error: #ff6b73;
    --color-error-soft: rgba(255, 107, 115, 0.14);
    --color-info: #7fb0cf;
    --color-info-soft: rgba(127, 176, 207, 0.16);

    --color-border: rgba(242, 237, 230, 0.14);
    --color-border-strong: rgba(242, 237, 230, 0.26);
    --color-border-accent: rgba(216, 36, 46, 0.42);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  }
}

/* Explizite Wahl des Betrachters gewinnt in beide Richtungen. */
:root[data-theme="dark"] {
  --color-bg: #16120f;
  --color-bg-elevated: #1f1a16;
  --color-bg-subtle: #241e19;
  --color-bg-sticky: rgba(22, 18, 15, 0.90);
  --color-bg-dusk: #100d0b;
  --color-bg-dusk-subtle: #1a1613;
  --color-text: #f2ede6;
  --color-text-muted: #a89c91;
  --color-text-subtle: #7d7268;
  --color-text-on-dusk: #f2ede6;
  --color-accent: #d8242e;
  --color-accent-ink: #ff6b73;
  --color-accent-hover: #e5343e;
  --color-accent-active: #b01b23;
  --color-accent-soft: rgba(216, 36, 46, 0.18);
  --color-accent-on-fill: #ffffff;
  --color-highlight-soft: rgba(231, 218, 30, 0.14);
  --color-leaf-ink: #8fc49a;
  --color-leaf-soft: rgba(105, 163, 117, 0.16);
  --color-success: #8fc49a;
  --color-success-soft: rgba(105, 163, 117, 0.16);
  --color-warning: #d9a441;
  --color-warning-soft: rgba(217, 164, 65, 0.16);
  --color-error: #ff6b73;
  --color-error-soft: rgba(255, 107, 115, 0.14);
  --color-info: #7fb0cf;
  --color-info-soft: rgba(127, 176, 207, 0.16);
  --color-border: rgba(242, 237, 230, 0.14);
  --color-border-strong: rgba(242, 237, 230, 0.26);
  --color-border-accent: rgba(216, 36, 46, 0.42);
}

/* ================================
   RESPONSIVE ANPASSUNGEN
   ================================ */

@media (max-width: 768px) {
  :root {
    --text-4xl: 2.25rem;
    --text-5xl: 2.75rem;
    --text-6xl: 3.5rem;
  }
}