/* Metric-matched fallback for Onest (perf 21.10): the text set in Arial/Helvetica takes the width and line height of Onest, so the swap
   when the font file arrives does not move the lines. Values: Onest hhea 970 / -305 / 0 on 1000 upm, mean letter width vs Arial. */
@font-face { font-family: "Onest Fallback"; font-weight: 400; src: local("Arial"), local("Helvetica"), local("Arimo"), local("Liberation Sans"); size-adjust: 107.69%; ascent-override: 90.07%; descent-override: 28.32%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; font-weight: 500; src: local("Arial"), local("Helvetica"), local("Arimo"), local("Liberation Sans"); size-adjust: 108.88%; ascent-override: 89.09%; descent-override: 28.01%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Arimo Bold"), local("Liberation Sans Bold"); size-adjust: 100.13%; ascent-override: 96.87%; descent-override: 30.46%; line-gap-override: 0%; }

/* Klaumo design tokens — brandbook v1.2 (14.10.2026) + Liquid Glass rules (research 26, 52–54).
   Light world only: the owner excluded dark themes, so there is no dark-mode remap. */
:root {
  /* brand colours (brandbook p.10) */
  --ink: #212121;
  --paper: #f6f5fa;
  /* 5 colour families (owner 14.10) — nothing outside them:
     1 neutral (ink · paper · white · greys) · 2 warm (brand circle, the result) · 3 sky (the client, focus)
     4 green (confirm / success only) · 5 red (error / end only). Each family: base · soft · tint · ink · rgb channels */
  --warm: #e8743b;        /* the circle: the next step / the answer. Never text */
  --warm-soft: #f4b48c;   /* only inside Föhn */
  --warm-tint: #fbe4d6;
  --warm-ink: #a8491a;    /* text/glyph on warm-tint 4.73:1 */
  --warm-rgb: 232, 116, 59;
  --sky: #6f9bd1;         /* the client */
  --sky-soft: #bfd3ea;    /* only inside Föhn and the sky tile */
  --sky-tint: #dce8f5;
  --sky-ink: #33609a;     /* text/glyph on sky-tint 5.15:1 */
  --sky-rgb: 111, 155, 209;
  --green-rgb: 31, 122, 58;
  --red-rgb: 215, 0, 21;
  --grey-1: #e4e6ec;      /* underlays, info cards, grey tile */
  --grey-2: #ebeaf1;      /* group underlay */
  --shade: 31, 62, 120;   /* every shadow: one cool shade, alpha only */
  /* legacy names → families (keep old markup working) */
  --sky-pastel: var(--sky-soft);
  --peach: var(--warm-soft);
  --alice: var(--grey-1);

  --bg: var(--paper);
  --card: #ffffff;
  --text: var(--ink);
  --text-2: #5c5c66;      /* 6.09:1 on paper */
  --text-3: #6e6e78;      /* captions ≥ 13 px only */
  --line: var(--alice);
  --fill: rgba(120, 130, 150, 0.12);   /* iOS fill: chips, fields, slots — no borders */
  --fill-strong: rgba(120, 130, 150, 0.2);
  --focus: var(--sky);

  /* meaning (owner 14.10): every positive action and answer is GREEN, every negative one is RED.
     Fills carry white text (≥ 4.7:1 across the gradient); bright Apple green/red only as glow, never alone. */
  --positive: #1f7a3a;                                         /* 4.96:1 on paper — dots, icons, text */
  --positive-fill: linear-gradient(180deg, #22843e, #1a6a32);  /* buttons: white text 4.73–6.66:1 */
  --positive-tint: #e3f6e7;
  --positive-ink: #1b6e2f;                                     /* text on tint 5.61:1 */
  --positive-glow: rgba(52, 199, 89, 0.45);
  --negative: #d70015;                                         /* white text 5.38:1 */
  --negative-fill: linear-gradient(180deg, #e0141f, #b00012);  /* buttons: white text 4.9–7.36:1 */
  --negative-tint: #ffe5e3;
  --negative-ink: #d70015;                                     /* text on tint 4.5:1 */
  --negative-glow: rgba(255, 59, 48, 0.45);
  /* legacy names used by components */
  --loss: var(--negative); --loss-ink: var(--negative-ink); --loss-tint: var(--negative-tint);
  --gain: var(--positive); --gain-ink: var(--positive-ink); --gain-tint: var(--positive-tint);

  /* Föhn: sky pastel bottom-left, peach top-right, on paper */
  --foehn:
    radial-gradient(120% 90% at 100% 0%, rgba(244, 180, 140, 0.55), rgba(244, 180, 140, 0) 60%),
    radial-gradient(120% 90% at 0% 100%, rgba(191, 211, 234, 0.9), rgba(191, 211, 234, 0) 62%),
    var(--paper);

  /* type: Onest 400 / 500 / 600 */
  --font: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(40px, 9vw, 76px);
  --fs-title: clamp(28px, 6vw, 40px);
  --fs-headline: 21px;
  --fs-body: 18px;
  --fs-callout: 16px;
  --fs-caption: 13px;
  --fs-label: 13px;
  --lh-tight: 1.04;
  --lh-title: 1.15;
  --lh-body: 1.5;
  --track-display: -0.032em;
  --track-label: 0.08em;

  /* space: 4 / 8 rhythm */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  /* page layout (owner 20.10: «spacing in order on every screen»): one content width, one edge, one rhythm for every
     section of the site — the home page and the industry landings */
  --page-max: 1376px;                                                       /* content width */
  --edge: max(clamp(16px, 2.2vw, 32px), calc((100% - var(--page-max)) / 2));  /* side edge: 16 on phones → 32, then centred */
  --section-y: clamp(64px, 9vw, 128px);                                     /* from one section to the next */
  --head-gap: clamp(32px, 5vw, 64px);                                       /* from a section headline to its cards */
  --card-gap: 16px;                                                         /* between cards (12 on phones) */
  --edge-vw: max(clamp(16px, 2.2vw, 32px), calc((100vw - var(--page-max)) / 2));   /* the same edge for fixed and absolute layers (header, hero) */
  --card-pad: clamp(20px, 2.4vw, 32px);                                   /* inside a card: 20 on phones → 32 */
  --col-8: 912px;                                                           /* 8 of 12 columns of the page width: centred text columns */

  /* radii: concentric (inner = outer − padding) */
  --r-xl: 36px; --r-l: 28px; --r-m: 20px; --r-s: 14px; --r-pill: 999px;  /* one scale: sheets · cards/tiles · rows/fields · small */

  /* elevation */
  --shadow-1: 0 1px 2px rgba(33, 33, 33, 0.05), 0 8px 24px -12px rgba(31, 62, 120, 0.18);
  --shadow-2: 0 1px 2px rgba(33, 33, 33, 0.05), 0 28px 56px -24px rgba(31, 62, 120, 0.32);
  --shadow-warm: 0 10px 30px -8px rgba(232, 116, 59, 0.55);

  /* glass (functional layer only, ≥ 55 % tint because Safari hides Reduce Transparency) */
  --glass-1: linear-gradient(140deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.58) 60%, rgba(255, 255, 255, 0.66));
  --glass-2: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(232, 238, 247, 0.66) 60%, rgba(252, 236, 226, 0.7));
  --glass-ink: linear-gradient(160deg, rgba(64, 64, 70, 0.94), rgba(33, 33, 33, 0.97));
  --blur-1: blur(18px) saturate(190%);
  --blur-2: blur(24px) saturate(180%);

  /* motion (research 27 §6.1) */
  --d-micro: 160ms; --d-ui: 320ms; --d-step: 640ms; --d-story: 1100ms;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-snap: cubic-bezier(0.5, 0, 0.1, 1);
  --e-morph: cubic-bezier(0.7, 0, 0.2, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layers */
  --z-content: 0; --z-sticky: 10; --z-dock: 40; --z-sheet: 100; --z-toast: 200; --z-loader: 1000;

  /* touch */
  --hit: 44px;
  --btn-h: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-ui: 1ms; --d-step: 1ms; --d-story: 1ms; }
}