/* Langenwalter brand tokens — sampled directly from the logo PNG (1479x716).
   Values marked "sampled" are exact pixel values; "derived" are tints/shades
   computed from a sampled color for UI states the logo itself doesn't contain. */
:root {
  /* Core brand (sampled) */
  --brand-red:          #E51B24;  /* dominant flat fill (~60% of opaque pixels) — primary */
  --brand-yellow:       #FFD206;  /* saturated yellow lobe edges */
  --brand-yellow-light: #FFE384;  /* yellow lobe mid-gradient */
  --brand-cream:        #FFF4CF;  /* lobe highlight center */
  --brand-orange:       #F8AC4B;  /* red-to-yellow gradient midpoint */
  --brand-coral:        #ED765A;  /* red-to-yellow gradient, red side */
  --brand-black:        #000000;  /* splat + letter outlines */
  --brand-white:        #FFFFFF;  /* wordmark fill */

  /* Derived for UI states */
  --brand-red-dark:     #B8151D;  /* hover / pressed / small red text on light bg */
  --brand-red-deep:     #8C0F16;  /* dark surfaces, footer */
  --brand-red-tint:     #FDE8E9;  /* subtle red background */
  --brand-yellow-tint:  #FFF8DE;  /* subtle yellow background (sampled lightest highlight) */
  --brand-ink:          #1F1F20;  /* body text; sampled anti-aliased outline */
  --brand-gray:         #ACAEB1;  /* sampled letter-edge gray; borders / muted */

  /* Logo gradients (reproduce the splat fills from sampled stops) */
  --grad-yellow: radial-gradient(circle at 50% 60%, #FFF4CF 0%, #FFE384 35%, #FFD206 75%, #FDC038 100%);
  --grad-red:    radial-gradient(circle at 50% 60%, #F8AC4B 0%, #ED765A 35%, #E51B24 70%, #E51B24 100%);

  /* Semantic */
  --color-primary:        var(--brand-red);
  --color-primary-hover:  var(--brand-red-dark);
  --color-accent:         var(--brand-yellow);
  --color-bg:             var(--brand-white);
  --color-bg-alt:         var(--brand-yellow-tint);
  --color-text:           var(--brand-ink);
  --color-text-muted:     #5A5B5E;
  --color-border:         var(--brand-gray);
  --color-on-primary:     var(--brand-white);
  --color-on-accent:      var(--brand-black);

  /* Typography — wordmark is a heavy condensed humanist italic (Myriad Pro Bold Condensed Italic).
     Open Sans is Myriad-derived and ships a width axis, so it is the closest free match. */
  --font-display: "Open Sans", "Myriad Pro", "Segoe UI", Arial, sans-serif;
  --font-body:    "Open Sans", "Segoe UI", Arial, sans-serif;
  --display-weight:    800;
  --display-style:     italic;
  --display-stretch:   75%;      /* font-stretch: condensed */
  --display-tracking:  0.02em;
  --display-transform: uppercase;
}