/* ==========================================================================
   Klar – design tokens 2027 ("Le Plan")
   The single source of every colour, type size, space, radius, shadow and easing on the
   website. Page styles (site.css, konto.css, trust.css …) only *use* these variables –
   they never redefine them. The desktop app carries the same values in
   stt/apps/desktop/src/styles/tokens.css; change both together (see docs/DESIGN.md §6).
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL – fonts/OFL-*.txt) ----------
   Instrument Sans: one neutral grotesk for everything (variable, 400–700).
   Caveat: the handwritten accent for tiny labels only ("So geht’s", "Als Nächstes").
   Subsets made with tools/subset-fonts.py: Latin + German; the Latin-Extended file only
   downloads when such a character is on the page. */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin-wght.woff2") format("woff2-variations"), url("/fonts/instrument-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E9E, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext-wght.woff2") format("woff2-variations"), url("/fonts/instrument-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02AF, U+1E00-1E9D, U+1E9F-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/caveat-latin-500.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+1E9E, U+2000-206F, U+20AC;
}
/* Metric-matched fallback: the swap from Arial to Instrument Sans moves no line (no layout shift). */
@font-face {
  font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 102.8%; ascent-override: 94.4%; descent-override: 24.3%; line-gap-override: 0%;
}

:root {
  /* ---------- Palette (raw – prefer the semantic tokens below) ---------- */
  --klar-black: #0B0B0B;
  --klar-white: #FFFFFF;
  --klar-grey-50: #F0F0EE;      /* the drafting canvas */
  --klar-grey-100: #E6E6E3;
  --klar-lime: #C8F04A;         /* the one accent: the moment speech becomes text */
  --klar-lime-light: #E2F68A;
  --klar-sage: #AFC6AE;
  --klar-coral: #F98F69;
  --klar-sky: #BEE5F8;
  --klar-apricot: #F2BF7A;
  --klar-steel: #A0C4D6;
  --klar-lilac: #D9D0FF;
  --klar-proof: #E8603C;        /* proofreader red – only as a 12 % tint in the grid lines */

  /* ---------- Semantic colour – light ---------- */
  --canvas: var(--klar-grey-50);          /* page background */
  --canvas-2: var(--klar-grey-100);       /* sunken areas, table stripes, inputs on canvas */
  --paper: #FFFFFF;                       /* cards, the footer card, nav pill */
  --paper-2: #F7F7F5;                     /* hover / pressed card */
  --ink: var(--klar-black);               /* 17.3 : 1 on canvas */
  --ink-2: #4A4A47;                       /* body copy, 7.8 : 1 */
  --ink-3: #62625E;                       /* meta, labels, ≥ 4.9 : 1 on canvas, canvas-2 and paper */
  --rule: rgb(11 11 11 / .10);            /* hairlines, card borders (decorative) */
  --rule-2: rgb(11 11 11 / .18);          /* dividers between list rows */
  --field: #84847F;                       /* input / toggle borders: ≥ 3 : 1 against canvas and paper */
  --grid-line: color-mix(in srgb, var(--canvas) 88%, var(--klar-proof));   /* architectural grid */
  --grid-dot: var(--ink);                 /* corner dots / crosshairs on the grid */
  --accent: var(--klar-lime);             /* surface only – always with --on-accent text */
  --on-accent: var(--klar-black);         /* 15 : 1 on lime */
  --accent-ink: #4D6B00;                  /* lime family as *text* on canvas/paper, 5.4 : 1 */
  --accent-soft: color-mix(in srgb, var(--klar-lime) 35%, transparent);
  --focus: var(--klar-black);             /* focus ring */
  --focus-halo: var(--klar-lime);         /* 3 px halo behind the ring */
  --positive: #1B7346;
  --negative: #B4321E;
  --selection: var(--klar-lime);

  /* Always-dark "stage" sections ("Tippen hält dich auf", the app frame) – same in both modes. */
  --stage: #161615;
  --stage-2: #222220;
  --stage-ink: #F2F2EE;                   /* 16 : 1 */
  --stage-ink-2: #A8A8A2;                 /* 7.6 : 1 */
  --stage-rule: rgb(242 242 238 / .14);
  --stage-chip: rgb(242 242 238 / .10);

  /* Pastel tiles (mosaic, feature frames, stage tiles). Text/glyphs on them: --on-tile. */
  --tile-sage: var(--klar-sage);
  --tile-lime: var(--klar-lime);
  --tile-lime-light: var(--klar-lime-light);
  --tile-coral: var(--klar-coral);
  --tile-sky: var(--klar-sky);
  --tile-apricot: var(--klar-apricot);
  --tile-steel: var(--klar-steel);
  --tile-lilac: var(--klar-lilac);
  --on-tile: var(--klar-black);           /* ≥ 8.5 : 1 on every tile, both modes */

  /* ---------- Typography ---------- */
  --font-sans: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-kbd: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;   /* key caps only, system font */

  /* Fluid scale, 320 → 1440 px viewport */
  --fs-hero: clamp(3rem, 1.71rem + 6.43vw, 8.5rem);        /* 48 → 136 */
  --fs-display: clamp(2.5rem, 1.5rem + 5vw, 6.5rem);       /* 40 → 104  lime moment, pixel scatter */
  --fs-h2: clamp(2rem, 1.43rem + 2.86vw, 4rem);            /* 32 → 64 */
  --fs-h3: clamp(1.375rem, 1.2rem + .89vw, 2rem);          /* 22 → 32 */
  --fs-h4: clamp(1.125rem, 1.07rem + .27vw, 1.3125rem);    /* 18 → 21  card titles */
  --fs-lead: clamp(1.1875rem, 1.07rem + .58vw, 1.5rem);    /* 19 → 24 */
  --fs-body: 1.0625rem;                                    /* 17 */
  --fs-small: .9375rem;                                    /* 15 */
  --fs-micro: .8125rem;                                    /* 13 */
  --fs-label: .75rem;                                      /* 12  uppercase labels, tags */
  --fs-hand: clamp(1.375rem, 1.27rem + .54vw, 1.75rem);    /* 22 → 28  Caveat */
  --fs-price: clamp(3.5rem, 2.5rem + 5vw, 7rem);           /* the big number on the price card */

  --lh-hero: .92;
  --lh-display: .98;
  --lh-heading: 1.04;
  --lh-snug: 1.25;
  --lh-text: 1.5;

  --track-hero: -.05em;
  --track-display: -.045em;
  --track-h2: -.038em;
  --track-h3: -.025em;
  --track-lead: -.015em;
  --track-body: -.006em;
  --track-label: .045em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* ---------- Space (4 px base) ---------- */
  --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; --s-10: 128px; --s-11: 160px; --s-12: 224px;
  --section-y: clamp(96px, 5.7rem + 8.6vw, 208px);   /* vertical rhythm between sections */
  --page-x: clamp(16px, .67rem + 2.14vw, 40px);       /* outer margin; 16 px at 320 */
  --col-gap: clamp(12px, .6rem + 1.07vw, 24px);
  --max: 1440px;                                      /* content max width incl. --page-x */
  --measure: 60ch;                                    /* longest line of running text */
  --cols: 12;
  --grid-cell: clamp(32px, 1.4rem + 4.6vw, 96px);     /* square cell of the background grid */
  --nav-h: 56px;
  --nav-top: 12px;

  /* ---------- Shape ---------- */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;     /* cards, feature frames */
  --r-xl: 32px;    /* stacked frames, the footer card */
  --r-pill: 999px;
  --hair: 1px;

  /* ---------- Elevation – flat by default; shadows only for things that float ---------- */
  --shadow-card: 0 1px 1px rgb(11 11 11 / .04), 0 18px 40px -24px rgb(11 11 11 / .22);
  --shadow-float: 0 1px 2px rgb(11 11 11 / .06), 0 14px 34px -14px rgb(11 11 11 / .28);
  --shadow-lift: 0 2px 6px rgb(11 11 11 / .06), 0 40px 80px -36px rgb(11 11 11 / .38);
  --blur-glass: saturate(1.4) blur(18px);

  /* ---------- Motion ---------- */
  --ease-klar: cubic-bezier(.84, 0, .16, 1);   /* signature in-out: panels, frames, page moments */
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* reveals, hovers */
  --ease-soft: cubic-bezier(.65, 0, .35, 1);   /* loops, orbit, scroll-linked */
  --ease-spring: cubic-bezier(.3, 1.3, .4, 1); /* chips popping in, toggles, the CTA badge */
  --dur-xs: 120ms;
  --dur-s: 240ms;
  --dur-m: 480ms;
  --dur-l: 800ms;
  --dur-xl: 1200ms;
  --stagger: 60ms;
  --motion: 1;                                 /* 0 under prefers-reduced-motion – read it in JS */

  /* ---------- Layers ---------- */
  --z-raised: 10;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;

  color-scheme: light;
}

/* ---------- Dark ----------
   Same structure, night drafting table: near-black canvas, lifted paper, the same pastel
   tiles a touch dimmer, lime unchanged. Applied by data-theme="dark" (the theme switch,
   set before first paint by the inline head script) – and by the OS setting when no
   data-theme is present (no JavaScript). */
:root[data-theme="dark"] {
  --canvas: #121211;
  --canvas-2: #0C0C0B;
  --paper: #1B1B1A;
  --paper-2: #242423;
  --ink: #F2F2EE;
  --ink-2: #C4C4BF;
  --ink-3: #9A9A94;
  --rule: rgb(242 242 238 / .10);
  --rule-2: rgb(242 242 238 / .18);
  --field: #76766F;
  --grid-line: color-mix(in srgb, var(--canvas) 90%, #F2F2EE);
  --grid-dot: #F2F2EE;
  --accent-ink: var(--klar-lime);
  --accent-soft: color-mix(in srgb, var(--klar-lime) 22%, transparent);
  --focus: var(--klar-lime);
  --focus-halo: #121211;
  --positive: #5FD39A;
  --negative: #FF8A70;
  --stage: #070707;
  --stage-2: #151514;
  --tile-sage: #9FB79E;
  --tile-lime: #B9DE45;
  --tile-lime-light: #D1E57E;
  --tile-coral: #E8845F;
  --tile-sky: #A9D3E8;
  --tile-apricot: #E0B06F;
  --tile-steel: #8FB2C3;
  --tile-lilac: #C3B9EE;
  --shadow-card: 0 1px 1px rgb(0 0 0 / .4), 0 18px 40px -24px rgb(0 0 0 / .7);
  --shadow-float: 0 1px 2px rgb(0 0 0 / .5), 0 14px 34px -14px rgb(0 0 0 / .8);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / .5), 0 40px 80px -36px rgb(0 0 0 / .9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --canvas: #121211; --canvas-2: #0C0C0B; --paper: #1B1B1A; --paper-2: #242423;
    --ink: #F2F2EE; --ink-2: #C4C4BF; --ink-3: #9A9A94;
    --rule: rgb(242 242 238 / .10); --rule-2: rgb(242 242 238 / .18); --field: #76766F;
    --grid-line: color-mix(in srgb, var(--canvas) 90%, #F2F2EE); --grid-dot: #F2F2EE;
    --accent-ink: var(--klar-lime); --accent-soft: color-mix(in srgb, var(--klar-lime) 22%, transparent);
    --focus: var(--klar-lime); --focus-halo: #121211; --positive: #5FD39A; --negative: #FF8A70;
    --stage: #070707; --stage-2: #151514;
    --tile-sage: #9FB79E; --tile-lime: #B9DE45; --tile-lime-light: #D1E57E; --tile-coral: #E8845F;
    --tile-sky: #A9D3E8; --tile-apricot: #E0B06F; --tile-steel: #8FB2C3; --tile-lilac: #C3B9EE;
    --shadow-card: 0 1px 1px rgb(0 0 0 / .4), 0 18px 40px -24px rgb(0 0 0 / .7);
    --shadow-float: 0 1px 2px rgb(0 0 0 / .5), 0 14px 34px -14px rgb(0 0 0 / .8);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / .5), 0 40px 80px -36px rgb(0 0 0 / .9);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}