/* ---------------------------------------------------------------------------
 * Design tokens - VS Ruprechtshofen
 *
 * Ported from design/VS-Ruprechtshofen-standalone-src.html (Claude Design
 * project 0275efc4-2754-416f-9cb8-f8d39989b1c6), which authored every value as
 * an inline style="" attribute on the element that used it.
 *
 * This is the ONLY stylesheet or template in site/templates/ that may contain a
 * hex colour. Everything else says var(--vsr-*). tests/FrontendTokensTest.php
 * enforces that; it is what keeps the palette reviewable instead of scattered.
 *
 * Consumed by nb-anmeldung, nb-wochenuebersicht and nb-tan-verwaltung, which is
 * why the Anmeldung branch's state colours are declared here even though this
 * feature ships no Anmeldung page.
 * ------------------------------------------------------------------------- */

:root {
  /* --- palette, role positions (fixed by the contract) ------------------- */
  --vsr-bg:              #faf9f4;   /* page background            */
  --vsr-ink:             #2b3122;   /* ink / headings             */
  --vsr-accent:          #b3c626;   /* accent                     */
  --vsr-link:            #6d8a1f;   /* link                       */
  --vsr-link-hover:      #556d15;   /* link hover / active nav ink*/
  --vsr-panel:           #eef0da;   /* panel / active nav fill    */
  --vsr-border:          #e7e5da;   /* border                     */
  --vsr-muted:           #8b8b7a;   /* muted                      */
  --vsr-body:            #55603f;   /* body copy                  */

  /* --- palette, supporting ---------------------------------------------- */
  --vsr-surface:         #ffffff;
  --vsr-on-dark:         #fdfdf8;
  --vsr-on-dark-muted:   #c6c9a8;
  --vsr-on-dark-faint:   #8f9678;
  --vsr-ink-hover:       #414a33;
  --vsr-accent-hover:    #a2b41c;
  --vsr-accent-light:    #c3d63a;
  --vsr-hairline:        #eeece1;
  --vsr-field-border:    #d5d3c4;
  --vsr-burger-border:   #e0dece;
  --vsr-hover-tint:      #f1f0e6;
  --vsr-table-head:      #f4f3ea;

  /* --- placeholder hatch (design's "Foto: ..." stand-in; per the contract
   *     Decision this is the EMPTY STATE for a photo-less card, not shipped
   *     decoration) --------------------------------------------------------*/
  --vsr-hatch-a:         #e3e6c4;
  --vsr-hatch-b:         #dadeb4;
  --vsr-hatch-ink:       #7c8560;
  --vsr-hatch-chip:      #fafaf2;

  /* --- state colours (Anmeldung branch; consumed by nb-anmeldung) --------- */
  --vsr-warn-bg:         #fbeee7;
  --vsr-warn-border:     #eccdb8;
  --vsr-warn-ink:        #8a4b22;
  --vsr-warn-body:       #8a5b3a;
  --vsr-error-ink:       #a8422e;
  --vsr-note-ink:        #a8842e;
  --vsr-row-on-bg:       #f6f8e3;
  --vsr-row-on-border:   #cdd88a;
  --vsr-row-off-bg:      #faf9f4;
  --vsr-row-off-border:  #eeece1;
  --vsr-faint-ink:       #a0a08e;
  --vsr-disabled-ink:    #c9c7b8;

  /* --- type -------------------------------------------------------------- */
  --vsr-font-heading: 'Outfit', 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  --vsr-font-body:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --vsr-font-mono:    ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --vsr-fs-eyebrow:    13px;
  --vsr-fs-h1:         clamp(30px, 6vw, 42px);
  --vsr-fs-h1-page:    clamp(27px, 5.5vw, 34px);
  --vsr-fs-h2:         28px;
  --vsr-fs-h2-sub:     22px;
  --vsr-fs-h2-card:    21px;
  --vsr-fs-h3:         18px;
  --vsr-fs-h3-sm:      17px;
  --vsr-fs-lede:       17px;
  --vsr-fs-lede-page:  16.5px;
  --vsr-fs-body:       16px;
  --vsr-fs-logo:       19px;
  --vsr-fs-nav:        14.5px;
  --vsr-fs-nav-mobile: 16.5px;
  --vsr-fs-btn:        15px;
  --vsr-fs-card:       14.5px;
  --vsr-fs-name:       15.5px;
  --vsr-fs-item:       16px;
  --vsr-fs-meta:       13.5px;
  --vsr-fs-tag:        12.5px;
  --vsr-fs-small:      12px;
  --vsr-fs-chip-day:   19px;
  --vsr-fs-big:        24px;

  --vsr-lh-tight:      1.12;
  --vsr-lh-heading:    1.3;
  --vsr-lh-body:       1.6;
  --vsr-lh-card:       1.55;
  --vsr-lh-logo:       1.1;

  --vsr-fw-normal:     400;
  --vsr-fw-semibold:   600;
  --vsr-fw-bold:       700;

  --vsr-track-eyebrow: .12em;
  --vsr-track-chip:    .06em;
  --vsr-track-tag:     .04em;

  /* --- layout ------------------------------------------------------------ */
  --vsr-container:        1080px;
  --vsr-container-narrow: 760px;
  --vsr-gutter:           clamp(18px, 4vw, 28px);
  --vsr-gutter-header:    clamp(16px, 3vw, 28px);
  --vsr-section-top:      clamp(36px, 6vw, 56px);
  --vsr-section-bottom:   72px;

  --vsr-gap-grid:    22px;
  --vsr-gap-galerie: 20px;
  --vsr-gap-team:    18px;
  --vsr-gap-list:    10px;

  --vsr-card-min:         250px;
  --vsr-card-min-galerie: 240px;
  --vsr-card-min-team:    170px;
  --vsr-card-min-hero:    290px;

  --vsr-radius-sm:   8px;
  --vsr-radius:      12px;
  --vsr-radius-card: 14px;
  --vsr-radius-lg:   16px;
  --vsr-radius-pill: 99px;

  /* --- type, nb-anmeldung ------------------------------------------------- */
  --vsr-fs-h2-key:     20px;
  --vsr-fs-h2-form:    19px;
  --vsr-fs-done-check: 26px;
}