/* Colours — transcribed from "Datenblatt Seite 2" of the Högerle style guide.
   The guide defines exactly two brand colours plus a neutral set. The two
   ramps are alpha steps of those colours (10% … 100%), which is how they are
   authored in the source file; the -on-white values are the flattened hex for
   places that need an opaque fill. */
:root{
  /* Hauptfarbe / Sekundärfarbe */
  --hg-primary:#ED6B12;
  --hg-secondary:#ECECEC;

  /* Primär 10–100 (alpha steps of Hauptfarbe, exactly as in the guide) */
  --hg-primary-10:rgba(237,107,18,0.1);
  --hg-primary-20:rgba(237,107,18,0.2);
  --hg-primary-30:rgba(237,107,18,0.3);
  --hg-primary-40:rgba(237,107,18,0.4);
  --hg-primary-50:rgba(237,107,18,0.5);
  --hg-primary-60:rgba(237,107,18,0.6);
  --hg-primary-70:rgba(237,107,18,0.7);
  --hg-primary-80:rgba(237,107,18,0.8);
  --hg-primary-90:rgba(237,107,18,0.9);
  --hg-primary-100:#ED6B12;

  /* Primär, flattened on white */
  --hg-primary-10-on-white:#FDF0E7;
  --hg-primary-20-on-white:#FBE1D0;
  --hg-primary-30-on-white:#FAD3B8;
  --hg-primary-40-on-white:#F8C4A0;
  --hg-primary-50-on-white:#F6B589;
  --hg-primary-60-on-white:#F4A671;
  --hg-primary-70-on-white:#F29759;
  --hg-primary-80-on-white:#F18941;
  --hg-primary-90-on-white:#EF7A2A;

  /* Sekundär 10–100 (alpha steps of Sekundärfarbe) */
  --hg-secondary-10:rgba(236,236,236,0.1);
  --hg-secondary-20:rgba(236,236,236,0.2);
  --hg-secondary-30:rgba(236,236,236,0.3);
  --hg-secondary-40:rgba(236,236,236,0.4);
  --hg-secondary-50:rgba(236,236,236,0.5);
  --hg-secondary-60:rgba(236,236,236,0.6);
  --hg-secondary-70:rgba(236,236,236,0.7);
  --hg-secondary-80:rgba(236,236,236,0.8);
  --hg-secondary-90:rgba(236,236,236,0.9);
  --hg-secondary-100:#ECECEC;

  /* Neutrals used across the guide, the logo and the website */
  --hg-black:#000000;
  --hg-ink:#1D1D1B;        /* logo / icon black */
  --hg-text:#1B1F23;       /* running copy */
  --hg-text-muted:#6A737D; /* secondary copy, captions */
  --hg-grey:#7D7D7D;       /* greyscale icon variant */
  --hg-line:#EEEEEE;
  --hg-white:#FFFFFF;

  /* Semantic aliases */
  --hg-bg:var(--hg-white);
  --hg-bg-muted:var(--hg-secondary);
  --hg-bg-invert:var(--hg-primary);
  --hg-surface-card:var(--hg-white);
  --hg-surface-field:var(--hg-white);
  --hg-text-heading:var(--hg-primary);
  --hg-text-body:var(--hg-text);
  --hg-text-on-primary:var(--hg-white);
  --hg-text-nav:var(--hg-ink);
  --hg-border-field:#DCDCDC;
  --hg-border-subtle:var(--hg-line);
  --hg-accent:var(--hg-primary);
  --hg-accent-hover:#F59349;      /* client-specified button hover */
  --hg-accent-pressed:#B85410;    /* inferred — see readme.md */
  --hg-overlay-dim:rgba(0,0,0,0.45);
  --hg-link:var(--hg-primary);
  --hg-link-hover:var(--hg-accent-hover);
}