/* ============================================================================
   BEAUTY4YOU — DESIGN TOKENS  "Warmes Atelier"
   ----------------------------------------------------------------------------
   Quelle der Farben: barbar_shop/lib/screens/splash_screen.dart,
   welcome_screen.dart, auth/*.dart  → die echte Markenpalette der App.
   Struktur: helles editoriales System (Creme-Papier-Canvas, warme Tinte
   statt Schwarz, EINE Akzentfarbe, die alle CTAs traegt).
   ========================================================================== */

:root {
  /* --- Flaechen / Surfaces ------------------------------------------------ */
  --b4y-cream:        #FDF8F4;  /* Seiten-Canvas. App: scaffold hell         */
  --b4y-sand:         #F5E8DF;  /* Sektionswechsel, ruhige Baender           */
  --b4y-clay:         #EDE0D4;  /* dritte Tiefe, Fuellungen, Chips           */
  --b4y-paper:        #FFFFFF;  /* Karten, Eingabefelder, hellste Ebene      */

  /* --- Tinte / Text ------------------------------------------------------- */
  --b4y-ink:          #4A2C1A;  /* Headlines, staerkster Kontrast            */
  --b4y-ink-soft:     #6B4226;  /* Zwischenueberschriften, Labels            */
  --b4y-body:         #8B5E3C;  /* Fliesstext — die meistgenutzte Farbe      */
  --b4y-muted:        #836A52;  /* Hilfstext, Captions - AA-tauglich auf Cream */

  /* --- Akzent: EINE Farbe, die arbeitet ----------------------------------- */
  --b4y-caramel:      #D4A37A;  /* CTA-Fuellung, aktive Zustaende, Eyebrows  */
  --b4y-caramel-deep: #B8845A;  /* Hover / Pressed                           */
  --b4y-peach:        #F4C5A0;  /* nur Glow & Highlight, nie Flaeche         */

  /* --- Linien ------------------------------------------------------------- */
  --b4y-line:         #E6D7C8;  /* Hairline-Border, Standard                 */
  --b4y-line-strong:  #D9C4B0;  /* Trenner, Tabellenlinien                   */

  /* --- Funktionsfarben (identisch zur App, iOS-System) -------------------- */
  --b4y-success:      #34C759;
  --b4y-warning:      #FF9500;
  --b4y-error:        #FF3B30;

  /* --- Typografie --------------------------------------------------------- */
  --b4y-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --b4y-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Helvetica, Arial, sans-serif;

  --b4y-size-display: clamp(2.75rem, 6vw, 4.5rem);
  --b4y-size-h2:      clamp(2rem, 4vw, 3rem);
  --b4y-size-h3:      1.375rem;
  --b4y-size-body:    1.0625rem;
  --b4y-size-small:   0.9375rem;
  --b4y-size-eyebrow: 0.75rem;

  --b4y-track-display: -0.02em;  /* Playfair gross: enger setzen             */
  --b4y-track-eyebrow:  0.18em;  /* Versalien-Labels: weit sperren           */
  --b4y-leading-display: 1.05;
  --b4y-leading-body:    1.7;

  /* --- Radien: flach und editorial, nicht verspielt ----------------------- */
  --b4y-radius-control: 4px;   /* Buttons, Inputs, Badges                    */
  --b4y-radius-card:    8px;   /* Karten, Panels                             */
  --b4y-radius-media:  20px;   /* nur Geraete-Mockups & App-Screenshots      */
  --b4y-radius-pill:  999px;   /* sparsam: Sprachwahl, Store-Badges          */

  /* --- Raster ------------------------------------------------------------- */
  --b4y-space-section: clamp(5rem, 10vw, 8rem);
  --b4y-space-gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --b4y-max-width:     1180px;
  --b4y-max-measure:   62ch;   /* Lesebreite fuer Fliesstext                 */

  /* --- Schatten: es gibt praktisch keine ---------------------------------- */
  --b4y-shadow-none:   none;
  --b4y-shadow-media:  0 24px 60px rgba(74, 44, 26, 0.14);  /* nur Mockups   */
}

/* ============================================================================
   REGELN — das ist der Teil, der den Look ausmacht
   ----------------------------------------------------------------------------
   1  Hintergrund ist IMMER --b4y-cream. Weiss nur fuer Karten.
   2  Text ist nie #000. Headlines --b4y-ink, Fliesstext --b4y-body.
   3  --b4y-caramel ist die einzige gesaettigte Farbe auf der Seite.
      Sie gehoert dem primaeren CTA. Jede weitere Verwendung schwaecht ihn.
   4  Keine Verlaeufe auf Flaechen. Keine Schatten ausser am Geraete-Mockup.
   5  Trennung entsteht durch Hairlines und Weissraum, nicht durch Kaesten.
   6  Playfair nur fuer Display und emotionale Momente (kursiv). Alles
      Funktionale ist Inter.
   7  Versalien-Eyebrows ueber jeder Sektion, 12px, 0.18em gesperrt,
      Farbe --b4y-caramel. Das traegt die editoriale Anmutung.
   ========================================================================== */