/* Söhne — primary face (Klim Type Foundry, commercial license held by
   Felix Rascher; see /static/fonts/LICENSE-SOEHNE.md for distribution
   constraints). Regular 400 (Buch) + Bold 700 (Dreiviertelfett). */
@font-face {
  font-family: 'Söhne';
  src: url('/static/fonts/soehne-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('/static/fonts/soehne-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Azeret Mono — structural face (numerals, IDs, technical metadata).
   Variable WOFF2 covering 400-700. SIL OFL, see LICENSE-AZERET-OFL.txt. */
@font-face {
  font-family: 'Azeret Mono';
  src: url('/static/fonts/azeret-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --body-font:    "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-font: "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono-font:    "Azeret Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --step--2: clamp(0.6944rem, 0.6840rem + 0.0465vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8060rem + 0.1212vw, 0.9rem);
  --step-0:  clamp(1rem,      0.9489rem + 0.2273vw, 1.125rem);
  --step-1:  clamp(1.2rem,    1.1156rem + 0.375vw,  1.4063rem);
  --step-2:  clamp(1.44rem,   1.31rem   + 0.5778vw, 1.7578rem);
  --step-3:  clamp(1.728rem,  1.536rem  + 0.8532vw, 2.1973rem);
  --step-4:  clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
  --step-5:  clamp(2.4883rem, 2.1018rem + 1.7181vw, 3.4332rem);
  --step-6:  clamp(2.4rem,    1.86rem   + 2.7vw,    4.2916rem);
  --step-7:  clamp(3.5832rem, 2.8545rem + 3.2386vw, 5.3644rem);

  --font-news-title: clamp(2.125rem, 1.7727rem + 1.5667vw, 3.25rem);
  --font-form-input: clamp(0.9375rem, 0.9148rem + 0.1011vw, 1rem);

  --ink:        #1A1816;
  --ink-soft:   #3A3631;
  --ink-mute:   #6F6B65;
  --ink-faint:  #ABA8A2;

  --bg:         #FCFBF8;
  --bg-mute:    #F5F3EE;
  --bg-mute-2:  #EDEAE3;
  /* Card surfaces (form inputs, table rows, success card) use the same
     warm off-white as the page background. We deliberately do NOT use a
     pure #FFFFFF anywhere — pure white reads cool against the warm
     palette. Visible separation comes from borders, not from contrast. */
  --bg-card:    #FCFBF8;

  --rule:       #1A1816;
  --rule-soft:  rgba(26,24,22,0.10);
  --rule-mid:   rgba(26,24,22,0.16);

  --ok:         #2A7E39;
  --warn:       #A87808;
  --danger:     #B0261E;
  --danger-bg:  #FCEBE9;

  --accent:      #C8DCE6;
  --accent-soft: #E5EFF4;
  --accent-line: #1A1816;

  /* Tagging palette — used by .tag-system to mark programming languages
     and runtimes ("Go", "Node.js", "SQLite"). Warm orange so it sits
     intentional next to the warm-neutral palette without clashing. */
  --tag-orange:      #B8651A;
  --tag-orange-line: rgba(184,101,26,0.40);

  /* Disabled controls. A near-white warm gray that sits one step above
     the page background — visible enough to read as "inert surface",
     soft enough not to compete with the live ink/accent palette. The
     label uses transparent ink (--ink at ~35% alpha) so the contrast
     decay matches the surface decay; both fade together. Used by the
     disabled-state branch of .btn. */
  --bg-disabled:  #ECEAE5;
  --ink-disabled: rgba(26,24,22,0.35);

  --eu-blue:    oklch(35% 0.15 270);
  --eu-blue-2:  oklch(48% 0.12 260);
  --eu-gold:    oklch(78% 0.14 88);

  --overlay-hover:         rgba(26,24,22,0.05);
  --overlay-shadow:        rgba(26,24,22,0.06);

  /* Highlighter-yellow accent — used in two places:
       --accent-yellow → opaque hue for solid surfaces (button hover
                         slide-in). On the dark --ink button, the slide
                         needs a fully opaque colour or the dark base
                         bleeds through and the yellow turns muddy.
       --selection-bg  → same hue at 55% alpha for ::selection. Alpha is
                         tuned so the underlying surface reads through
                         like a real marker: enough saturation to be
                         unmistakable, low enough that the type stays
                         crisp. Sits cleanly on warm-white and on the
                         cool accent-blue surfaces alike.
     Both tokens carry rgb(255, 224, 102); change the hue once and the
     selection + hover stay in lockstep. */
  --accent-yellow: #FFE066;
  --selection-bg:  rgba(255, 224, 102, 0.55);
  --overlay-modal:         rgba(26,24,22,0.40);

  --space-3xs: clamp(0.25rem,  0.2372rem + 0.0568vw, 0.2813rem);
  --space-2xs: clamp(0.5rem,   0.4744rem + 0.1136vw, 0.5625rem);
  --space-xs:  clamp(0.75rem,  0.7117rem + 0.1705vw, 0.8438rem);
  --space-s:   clamp(1rem,     0.9489rem + 0.2273vw, 1.125rem);
  --space-m:   clamp(1.5rem,   1.4233rem + 0.3409vw, 1.6875rem);
  --space-l:   clamp(2rem,     1.8977rem + 0.4545vw, 2.25rem);
  --space-xl:  clamp(3rem,     2.8466rem + 0.6818vw, 3.375rem);
  --space-2xl: clamp(4rem,     3.7955rem + 0.9091vw, 4.5rem);
  --space-3xl: clamp(6rem,     5.6932rem + 1.3636vw, 6.75rem);

  --gutter:     clamp(1.25rem, 1.0227rem + 1.0114vw, 3.5rem);
  --page-top:   clamp(3.5rem,  2.4773rem + 4.5455vw, 6rem);
  --page-bot:   clamp(3.5rem,  2.4773rem + 4.5455vw, 6rem);
  --hero-top:   clamp(7.5rem,  4.0909rem + 15.1515vw, 15rem);
  --login-top:  clamp(5rem,    2.7273rem + 10.1011vw, 10rem);

  --max:       1180px;
  --max-doc:    720px;
  --max-app:    880px;
  --max-news:   760px;
  --max-hero:   920px;
  --max-login:  420px;

  --header-public-h: 56px;
  --footer-public-h: 56px;
  --page-inset-x: 32px;
  --page-inset-x-mobile: 16px;

  --ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --duration-quick:  140ms;
  --duration-medium: 180ms;
  --duration-slow:   320ms;

  --radius-0:    0;
  --radius-pill: 999px;
}