/* ============================================================================
   LUTZ UND LUTZ · COLOR TOKENS
   Petrol = institutional gravitas (hygiene · health · environment).
   Orange = the signature signal, used sparingly (~10% of any surface).
   Vanille = the warm, human canvas.
   Brief-defined steps are marked ◆ ; intermediate steps generated for a
   coherent, AA-tested ramp.
   ============================================================================ */

:root {
  /* ---- Petrol / pine — the spine of the brand ---------------------------- */
  --color-petrol-900: #0A2E2C; /* ◆ dark hero / footer */
  --color-petrol-800: #0C3633; /*   generated */
  --color-petrol-700: #0F3D3A; /* ◆ headlines on light, primary buttons */
  --color-petrol-600: #154E4A; /*   generated */
  --color-petrol-500: #1F6360; /* ◆ secondary / hover */
  --color-petrol-400: #3A827E; /*   generated */
  --color-petrol-300: #79ACA8; /*   generated */
  --color-petrol-200: #BFD8D5; /* ◆ cool surfaces */
  --color-petrol-100: #D9E8E6; /*   generated */
  --color-petrol-50:  #EDF4F2; /* ◆ cool card background (Bereich B) */

  /* ---- Orange — the accent. The brand. ----------------------------------- */
  --color-orange-700: #8A4A0A; /*   generated — deep, for emphasis text */
  --color-orange-600: #E0760C; /* ◆ hover / filled-button states */
  --color-orange-500: #F88917; /* ◆ THE accent · rgb(248 137 23) */
  --color-orange-400: #FBA34A; /*   generated */
  --color-orange-300: #FCC089; /*   generated */
  --color-orange-200: #FDD7B5; /*   generated */
  --color-orange-100: #FEE7D1; /*   generated */
  --color-orange-50:  #FFF2E3; /* ◆ warm card background (Bereich A) */
  --color-orange-text:#A8560A; /* ◆ text-safe orange · ≥4.5:1 on light */

  /* ---- Warm canvas + surfaces -------------------------------------------- */
  --color-vanille:    #FBF7EF; /* ◆ PRIMARY page background */
  --color-cream-200:  #F4EEE2; /* ◆ secondary surface */
  --color-cream-100:  #F8F3E9; /*   generated — between vanille & cream */
  --color-white:      #FFFFFF; /* ◆ cards above the cream */

  /* ---- Ink + neutrals (warm-cooled greys, never pure black) -------------- */
  --color-ink:        #1B201F; /* ◆ body copy */
  --color-slate-700:  #3A4341; /*   generated — strong secondary */
  --color-slate-500:  #5B6664; /* ◆ secondary text, captions */
  --color-slate-400:  #8A9491; /*   generated — disabled / meta */
  --color-slate-300:  #B7BEBC; /*   generated — placeholder */

  /* ---- Hairlines --------------------------------------------------------- */
  --color-line-warm:  #E9E2D5; /* ◆ dividers on cream */
  --color-line-cool:  #D7E2E0; /* ◆ dividers on petrol-tinted areas */

  /* ========================================================================
     SEMANTIC ROLES — reference these in components, not the raw ramps.
     ======================================================================== */
  --bg:               var(--color-vanille);
  --surface:          var(--color-white);
  --surface-alt:      var(--color-cream-200);
  --surface-sunken:   var(--color-cream-100);

  --primary:          var(--color-petrol-700);
  --primary-deep:     var(--color-petrol-900);
  --primary-hover:    var(--color-petrol-500);
  --on-primary:       var(--color-vanille);

  --accent:           var(--color-orange-500);
  --accent-hover:     var(--color-orange-600);
  --accent-text:      var(--color-orange-text);
  --on-accent:        var(--color-ink);

  --text:             var(--color-ink);
  --text-muted:       var(--color-slate-500);
  --text-faint:       var(--color-slate-400);
  --on-dark:          #F2EDE2;          /* cream-white text on petrol */
  --on-dark-muted:    #A9C2BE;          /* muted text on petrol */

  --line:             var(--color-line-warm);
  --line-cool:        var(--color-line-cool);

  /* ---- Two-area split — Bereich A (warm) / Bereich B (cool).
     Components flip between these by setting the [data-area] attribute. ----- */
  --area-a-accent:     var(--color-orange-500);
  --area-a-accent-deep:var(--color-orange-600);
  --area-a-surface:    var(--color-orange-50);
  --area-a-line:       var(--color-line-warm);
  --area-a-check-bg:   var(--color-orange-500);
  --area-a-check-fg:   var(--color-white);

  --area-b-accent:     var(--color-petrol-500);
  --area-b-accent-deep:var(--color-petrol-700);
  --area-b-surface:    var(--color-petrol-50);
  --area-b-line:       var(--color-line-cool);
  --area-b-check-bg:   var(--color-petrol-700);
  --area-b-check-fg:   var(--color-white);

  /* ---- System gradients — used sparingly and intentionally --------------- */
  --gradient-petrol: linear-gradient(145deg, var(--color-petrol-700), var(--color-petrol-900)); /* @kind color */
  --gradient-hero: radial-gradient(120% 80% at 82% -8%, rgba(31,99,96,.55), transparent 58%),
                   radial-gradient(90% 70% at -10% 120%, rgba(248,137,23,.10), transparent 55%); /* @kind color */
  --gradient-accent: linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300)); /* @kind color */
  --gradient-wash-warm: linear-gradient(180deg, var(--color-orange-50), transparent); /* @kind color */
  --gradient-wash-cool: linear-gradient(180deg, var(--color-petrol-50), transparent); /* @kind color */
}