/* tokens.css — design tokens (D1). No external resources. */
/* Class prefix `zt-`, BEM-light. No hex values outside this file. */

:root {
  /* 1.1 Color */
  --bg: #111214;
  --bg-deep: #0a0b0c;
  --surface-1: #17191c;
  --surface-2: #1e2124;
  --surface-3: #262a2e;
  --studio: #26272b;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);
  --text: #ecebe7;
  --text-2: #a6acb1;
  --text-3: #767d83;
  --accent: #d6342b;
  --accent-hover: #e8483e;
  --accent-deep: #9e211a;
  --accent-soft: rgba(214, 52, 43, .14);
  --accent-glow: rgba(214, 52, 43, .38);
  /* Second accent (amber, from the test banner): orientation, labels, numbers, active states.
     Red stays for actions (buttons, cart). */
  --accent-2: #e3b04b;
  --accent-2-hover: #efc266;
  --accent-2-soft: rgba(227, 176, 75, .12);
  --accent-2-line: rgba(227, 176, 75, .38);
  --ok: #7fae72;
  --ok-soft: rgba(127, 174, 114, .14);
  --ok-line: rgba(127, 174, 114, .38);
  --warn: #dcaa45;
  --warn-soft: rgba(220, 170, 69, .14);
  --warn-line: rgba(220, 170, 69, .38);
  --glass: rgba(20, 21, 24, .66);
  --glass-strong: rgba(14, 15, 17, .86);
  --overlay-backdrop: rgba(0, 0, 0, 0.8);

  /* 1.2 Typography */
  --font-display: "Encode Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(3rem, 1.6rem + 6vw, 6.5rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 1.18rem + .7vw, 1.75rem);
  --fs-lead: clamp(1.075rem, 1rem + .4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-s: .9375rem;
  --fs-xs: .8125rem;
  --fs-label: .72rem;
  --lh-display: .92;
  --lh-head: 1.02;
  --lh-body: 1.65;
  --tracking-display: -.012em;
  --tracking-label: .16em;
  --measure: 64ch;

  /* 1.3 Spacing & layout */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, .6rem + 2.2vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* 1.4 Radii */
  /* Revision 3 (Felix): a bit softer again, between V2 and R2. */
  --r-xs: 6px;
  --r-s: 10px;
  --r-btn: 12px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* 1.5 Shadows & surfaces */
  /* Revision 3: visible, soft, layered elevation (Felix wants shadows on elements). */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 2px 6px rgba(0, 0, 0, .28), 0 14px 34px -14px rgba(0, 0, 0, .75);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 6px 16px rgba(0, 0, 0, .3), 0 34px 70px -24px rgba(0, 0, 0, .9);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 14px -6px rgba(0, 0, 0, .7);
  --shadow-accent: 0 10px 30px -10px var(--accent-glow);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .07);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 1.6 Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-1: 160ms;
  --d-2: 280ms;
  --d-3: 520ms;
  --d-4: 900ms;

  /* 1.7 Focus & layers */
  --z-base: 1;
  --z-header: 30;
  --z-overlay: 40;
  --z-consent: 60;
  --z-grain: 80;

  /* 1.8 Legacy tokens (older site stylesheets such as checkout.css; the admin CSS no longer uses them) */

  /* Surfaces */
  --grund: var(--bg);
  --grund-tief: var(--bg-deep);
  --flaeche: var(--surface-1);
  --flaeche-2: var(--surface-2);

  /* Lines */
  --linie: var(--line);
  --linie-hell: var(--line-strong);

  /* Accent */
  --rot: var(--accent);
  --rot-hell: var(--accent-hover);
  --rot-tief: var(--accent-deep);
  --rot-leise: var(--accent-soft);
  --muted: var(--text-2);

  /* Typography families */
  --schrift-head: var(--font-display);
  --schrift-text: var(--font-text);
  --schrift-mono: var(--font-mono);
  --mono: var(--font-mono);

  /* Type scale (legacy fixed sizes) */
  --fs-m: 1rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: var(--fs-h1);

  /* Line heights */
  --lh-tight: var(--lh-head);
  --lh-eng: 1.35;
  --lh-weit: var(--lh-body);

  /* Label */
  --ls-label: var(--tracking-label);
  --spur: var(--tracking-label);

  /* Geometry */
  --radius: var(--r-s);
  --schatten: var(--shadow-2);
  --inhalt: var(--container);
  --gap: var(--s-5);
  --grid-gap: var(--s-5);
  --pad-x: var(--gutter);

  /* Motion */
  --t-schnell: var(--d-1);
  --t-normal: var(--d-2);
}