/* Woertliche Kopie von src/Apps/LilleHus.Web/wwwroot/css/design-tokens.css. Aenderungen dort hier nachziehen. */
/* ─────────────────────────────────────────────────────────────────────────
   LilleHus Manager design tokens (Sidebar/Top-Bar redesign — Story #313)
   ─────────────────────────────────────────────────────────────────────────
   The Manager-Navigation prototype (design_handoff_manager_navigation) uses the
   LilleHus Design System tokens (colors/typography/elevation) under unprefixed
   names (--brand, --sand-100, --rose-100, …). Imported verbatim here so the app
   shell + nav reproduce the prototype exactly. This is the canonical palette —
   reuse these (not a parallel set) when building further redesign surfaces.

   Diese Datei fuehrt genau EIN Vokabular. Ein zweiter, abweichender Satz in
   derselben global geladenen Datei ist der Grund, weshalb /social jahrelang
   fast, aber nicht ganz nach CI aussah — nie wieder anlegen.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ---- Blue family (primary) ---- */
  --blue-700: #307382;  /* Steel Blue  */
  --blue-500: #3A7D8C;  /* Teal Blue   ← primary brand */
  --blue-400: #4C91A1;  /* Teal        */
  --blue-100: #DBE7EA;  /* tint, derived for surfaces */
  --blue-050: #EEF4F5;  /* faint wash, derived */

  /* ---- Green family (secondary) ---- */
  --green-600: #5A8C8C; /* Sage          */
  --green-500: #6D998C; /* Cadet Blue    */
  --green-400: #81A69B; /* Viridian Green */
  --green-100: #E2EAE6; /* tint, derived */

  /* ---- Sand / warm neutrals ---- */
  --sand-400: #D9BC9C;  /* Alabaster     */
  --sand-300: #E8D9C6;  /* derived mid   */
  --sand-200: #F0EAE1;  /* Honey Peach   */
  --sand-100: #F5F2ED;  /* Antique White */
  --sand-050: #FAF8F4;  /* paper, derived lightest */

  /* ---- Rose family (accent) ---- */
  --rose-500: #C2999B;  /* Misty Rose    */
  --rose-300: #D6BFBF;  /* Dusty Rose    */
  --rose-200: #DEC8C9;  /* Thistle       */
  --rose-100: #F0E5E5;  /* tint, derived */

  /* ---- Ink (warm near-black) + pure white ---- */
  --ink-900: #2E2E2E;
  --ink-700: #4D4D4D;
  --ink-500: #6E6E6A;
  --ink-400: #908B83;
  --ink-300: #BFB9AF;
  --white:   #FFFFFF;

  /* ---- Semantic status ---- */
  --success-600: #4F7A66;
  --success-100: #E2EDE6;
  --warning-600: #B07A3C;
  --warning-100: #F6E9D6;
  --danger-600:  #B06157;
  --danger-100:  #F3E0DC;
  --info-600:    var(--blue-500);
  --info-100:    var(--blue-100);

  /* ---- Semantic aliases (reference these in product code) ---- */
  --brand:           var(--blue-500);
  --brand-strong:    var(--blue-700);
  --brand-soft:      var(--blue-100);
  --brand-wash:      var(--blue-050);
  --accent:          var(--rose-300);
  --accent-strong:   var(--rose-500);

  /* Surfaces */
  --surface-page:    var(--sand-050);
  --surface-card:    var(--white);
  --surface-sunken:  var(--sand-100);
  --surface-raised:  var(--white);
  --surface-warm:    var(--sand-200);
  --surface-brand:   var(--blue-500);
  --surface-inverse: var(--ink-900);

  /* Text */
  --text-strong:     var(--ink-900);
  --text-body:       var(--ink-700);
  --text-muted:      var(--ink-500);
  --text-subtle:     var(--ink-400);
  --text-on-brand:   var(--white);
  --text-on-accent:  var(--ink-900);
  --text-link:       var(--blue-700);

  /* Borders & lines */
  --border-soft:     #ECE6DC;
  --border-default:  #E0D9CD;
  --border-strong:   var(--sand-400);
  --border-brand:    var(--blue-500);
  --focus-ring:      color-mix(in srgb, var(--blue-500) 45%, transparent);

  /* Typography families (Dosis/Merriweather already loaded in _Layout.cshtml) */
  --font-display: 'Dosis', system-ui, sans-serif;
  --font-body:    'Merriweather', Georgia, serif;
  --font-ui:      'Dosis', system-ui, sans-serif;
  --font-numeric: 'Dosis', system-ui, sans-serif;

  /* Schriftgroessen (#1920). Bis dahin fuehrte das DS nur Familien, keine Groessen:
     jeder Canvas malte eigene px-Werte, die per Hand in den Code wanderten — 235
     Einzelwerte ohne gemeinsame Skala, 61 % davon unter 14 px. Man konnte gar nicht
     "eine Stufe groesser" sagen, weil es keine Stufen gab.

     In rem, nicht px: nur so wirkt die Schriftgroessen-Einstellung des Browsers.
     Die px-Angabe im Kommentar gilt bei der Standard-Wurzelgroesse von 16 px.

     Dosis ist kondensiert und hat eine kleine x-Hoehe — eine Stufe hier liest sich
     kleiner als dieselbe Zahl in einer normalen Schrift. Beim Waehlen eher eine
     Stufe hoeher greifen als bei anderen Schriften. */
  --text-2xs:  0.6875rem;  /* 11px — Mikro-Label, Zaehler, Untertitel in Zellen */
  --text-xs:   0.75rem;    /* 12px — Spaltenkoepfe (uppercase), Fusszeilen, Pager */
  --text-sm:   0.875rem;   /* 14px — Tabellentext, Detailkarten, Knoepfe: der Standard */
  --text-base: 1rem;       /* 16px — Fliesstext, hervorgehobene Zellen, Kartentitel */
  --text-lg:   1.125rem;   /* 18px — Karten-/Abschnittsueberschriften */
  --text-xl:   1.375rem;   /* 22px — Seitentitel */
  --text-2xl:  1.75rem;    /* 28px — die eine grosse Zahl einer Seite (TK-Bestand) */
  --text-3xl:  2.25rem;    /* 36px — Hero-Zahl, die die Seite traegt (Trinkgeld-Summe) */

  /* Radii / shadows / motion */
  --shadow-xs:  0 1px 2px rgba(77, 77, 77, 0.06);
  --shadow-sm:  0 2px 6px rgba(77, 77, 77, 0.07);
  --shadow-md:  0 6px 18px rgba(77, 77, 77, 0.08);
  --shadow-lg:  0 14px 34px rgba(77, 77, 77, 0.10);
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  /* --lh-ease ist der aeltere Name derselben Kurve und wird ausserhalb des
     Social-Bereichs noch benutzt (site.css definiert ihn ein zweites Mal).
     Neues CSS nimmt --ease-out. */
  --lh-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-brand: 0 10px 28px rgba(58, 125, 140, 0.20);

  /* Kanal-Tinten — Hintergrund/Vordergrund je Archetyp, geteilt zwischen
     ChannelSwitch und ThreadList (sonst zwei identische Werte-Kopien). */
  --tint-mail-bg: var(--blue-100);
  --tint-mail-fg: var(--blue-700);
  --tint-komm-bg: var(--green-100);
  --tint-komm-fg: var(--green-600);
  --tint-dm-bg:   var(--rose-100);
  --tint-dm-fg:   color-mix(in srgb, var(--rose-500) 58%, var(--ink-900));
}