/* ============================================
   Sorring Udlejning — brand token sheet
   Direction 01 "Høvlbænk" (owner pick 2026-10-07, card-ea0162cd)
   ============================================
   A proper workshop: every tool has its place and its label tag. Steel blue,
   black steel, yellow marking tape; Zilla Slab on the tags, Libre Franklin for
   everything you read.

   The ONE place brand values live: colour, type, radii, shadows, motion.
   styles.css, admin.css, konto.css and every page/script only use these
   variables; no hex values outside this file (jest: brandSheet.test.js).
   Mails mirror the colour tokens in backend/services/brandTokens.js
   (jest: brandTokens.test.js). Every text/background pair is checked for WCAG
   AA from the values below (jest: brandContrast.test.js). The reference page
   is /admin/brand.

   Rules of the tape:
   - Tape yellow (--accent) is a MARK: stripes, tags, the active admin item,
     the offer badge. Never text on a light background (1.9:1). As text on
     light use --accent-text; on dark use --accent-on-inverse.
   - Signals are never colour-only: ok ✓ solid, booked ✕ dashed + struck
     through, warn ! dotted, error ✕ dashed.

   Sorring Udlejning does NOT use Graphite Iris (owner decision 2026-10-07,
   deliberate exception, like kai). Never add Iris, /design/, YGGDRASIL_DESIGN
   or ys-* classes back. */

/* Fonts: self-hosted, SIL OFL 1.1 (see /fonts/OFL.txt). latin covers æøå. */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/zilla-slab-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/zilla-slab-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zilla-slab-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zilla-slab-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-franklin-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-franklin-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;

  /* Surfaces + text */
  --bg: #ECE9E3;                  /* workshop wall: page background */
  --bg-subtle: #F6F4F0;           /* quiet band: hero, table hover, read-only fields */
  --surface: #FFFFFF;             /* cards, forms, mails, modals */
  --text: #23211E;                /* black steel */
  --muted: #57534C;               /* secondary text, AA on bg and surface */
  --line: #CBC5BA;                /* decorative rules and card edges */
  --line-soft: #E2DDD4;           /* row separators */
  --line-strong: #8A8378;         /* form controls: >= 3:1 on surface and bg */

  /* Primary: steel blue (buttons, links, the tag mark) */
  --primary: #2D4756;
  --primary-hover: #223744;
  --on-primary: #FFFFFF;
  --primary-soft: #DCE5EA;        /* selected date, info badge, outbound tint */

  /* Accent: marking tape (marks only, see the rules above) */
  --accent: #E8B21F;
  --accent-hover: #D49F12;
  --on-accent: #23211E;
  --accent-text: #765300;         /* the accent as text on light */
  --accent-soft: #FBF3DC;         /* offer / campaign tint */

  /* Signals: ok ✓ solid · booked ✕ dashed · warn ! dotted · error ✕ dashed */
  --ok: #2C6636;
  --ok-soft: #E0EEDD;
  --booked: #4E555B;
  --booked-soft: #E4E6E8;
  --warn: #8C4700;
  --warn-soft: #FBE6CC;
  --error: #A12A1F;
  --error-soft: #F8E1DD;

  /* Dark steel: footer, admin sidebar, toast, flyer/post, campaign banner */
  --inverse: #25292C;
  --on-inverse: #F1EEE8;
  --muted-inverse: #B3AEA4;
  --accent-on-inverse: #E8B21F;
  /* The scrim laid over a banner photo so on-inverse text stays readable on
     ANY image (card-97cf1791; proven on pure white and pure black). */
  --scrim: rgba(37, 41, 44, 0.74);
  --overlay: rgba(35, 33, 30, 0.55);  /* behind modals */

  /* Focus ring (>= 3:1 against what it sits on) */
  --focus: #2D4756;
  --focus-on-inverse: #E8B21F;

  /* Shadows: low and hard, like a tag on a pegboard */
  --shadow-sm: 0 1px 0 rgba(35, 33, 30, 0.08);
  --shadow: 0 1px 2px rgba(35, 33, 30, 0.10);
  --shadow-md: 0 2px 0 rgba(35, 33, 30, 0.10), 0 4px 10px rgba(35, 33, 30, 0.06);
  --shadow-lg: 0 6px 18px rgba(35, 33, 30, 0.16);

  /* Radii: square-ish, workshop not app */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-full: 9999px;

  /* Rules */
  --border-w: 2px;                /* buttons, chips, signals, the price tags */
  --tape: 4px;                    /* the yellow tape stripe under headers */

  /* Type + motion */
  --font-display: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --font: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --transition: 150ms ease;
}

/* ---------- Wordmark (one component, used in every header) ----------
   <a class="wm" aria-label="Sorring Udlejning"><span class="wm-mark" aria-hidden="true">S</span>
   <span class="wm-words"><span class="wm-a">Sorring</span><span class="wm-b">Udlejning</span></span></a>
   The mark is a label tag (square end, rounded nose, a punched hole), the
   same shape as favicon.svg and the PWA icons. */
.wm { display: inline-flex; align-items: center; gap: 0.45em; line-height: 1; font-family: var(--font-display); white-space: nowrap; color: var(--text); text-decoration: none; font-size: 1.5rem; }
.wm-mark { position: relative; display: inline-grid; place-items: center; width: 1.3em; height: 1.05em; padding-right: 0.18em; border-radius: 2px 0.35em 0.35em 2px; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 1em; }
.wm-mark::after { content: ""; position: absolute; right: 0.12em; top: 50%; width: 0.16em; height: 0.16em; margin-top: -0.08em; border-radius: 50%; background: var(--wm-hole, var(--bg)); }
.wm-words { display: inline-flex; flex-direction: column; gap: 0.1em; align-items: flex-start; }
.wm-a { font-size: 0.72em; font-weight: 700; }
.wm-b { font-family: var(--font); font-size: 0.38em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; }
.wm-on-inverse { color: var(--on-inverse); --wm-hole: var(--inverse); }
.wm-on-inverse .wm-mark { background: var(--accent-on-inverse); color: var(--inverse); }
.wm-on-surface { --wm-hole: var(--surface); }