/* ══ AIOOS design system · tokens.css · updated 13 Oct 2026 ═════════════════════
   One token block for every page family. Loaded before editorial-20260908/style.css on the
   homepage family and on the pages that use pages-20261011/shell.css.
   Update of the 15 Sep 2026 sheet from design.aioos.ai (VOX-core specs/design-email-20260923).
   Token names stay. Changes in this update:
     RETIRED  the trial: --t-offer, --t-offer-unit, --t-offer-line, --t-offer-h3, --lh-offer,
              --track-offer. The website sells no trial (free sample, then Start 39 / Pro 99 /
              Premium 399 EUR per month, 30-day money-back guarantee).
     RETIRED  --shadow-paper, --shadow-plinth, --shadow-core, --shadow-float, --shadow-mark,
              --stage-plinth, --stage-floor, --stage-dots, --t-manifesto, --t-human-r1,
              --r1-* faces: none of them renders on the redesigned pages. --radius-card is kept as an
              alias of --radius-surface.
     CHANGED  radius is a scale, no longer "0 for everything": section 3.
     CHANGED  shadows are two families: flat raise/hover/object (ink-violet, soft) and the device
              frames. Section 4.
     CHANGED  type and section-rhythm tokens carry the values the live site renders.
     ADDED    the icon family (assets/system-20261012/icons.svg): section 7.
     ADDED    13 Oct: leading of the two leads and of section copy (section 2), the section header stack
              --stack-label, --stack-title, --stack-block (section 3), the pressed state, exit easing and the
              dialog distances (section 6), one scrim blur (section 1).
   RULE OF USE: no colour, face, size, radius, shadow, duration or easing outside this sheet.
   Nearest token wins. A new value is a change to this file first, then the code.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1 · COLOUR · nine named colours plus the lilac stage ─────────────────── */
  --paper: #f2eddf;   /* ground */
  --panel: #f8f4e9;   /* raised paper; light text on ink */
  --soft: #eae5d8;    /* sunken paper */
  --ink: #191b1b;     /* text, buttons */
  --muted: #5f5d56;   /* secondary text (4.9:1 on paper; 4.1:1 at the lilac end of gradients, use ink there) */
  --muted-word: #80786e; /* de-emphasised word inside a headline, display sizes only */
  --line: #aaa597;    /* hairline between sections and cards (decoration, not a control edge) */
  --accent: #473b70;  /* the one hue: hover, current, focus, eyebrows */
  --lilac: #b5a6cd;   /* product stage material */
  --tint: #e4dced;    /* lilac wash: hover fills, selected fills */
  --line-ui: #7f7a6e;     /* edge of a control (input, chip, tab, outlined button, language trigger, segmented rail): 3.66:1 on paper, 3.21:1 on tint, WCAG 1.4.11 */
  --line-soft: #aaa59766;  /* card hairline on paper (live on content pages) */
  --line-card: #aaa5978c;  /* card hairline that needs more presence */
  --line-accent: #473b7033; /* edge of a tinted card */
  --error: #9b2c1f;       /* invalid border, 6.5:1 on paper */
  --error-tint: #f5e4de;  /* ground of an error message */
  --error-ink: #6e1d12;   /* text of an error message, 9.2:1 on --error-tint */
  --bezel: #292828;  --island: #242423;  --stage-ink: #42354e;  --chrome: #e7e1d5; /* device mock-ups only */
  --stage-panel: #ddd4e3;
  --stage-bubble: #e8e1ed;
  --stage-core: linear-gradient(135deg, #f7f3f5, #c8bbd1);
  --stage-field: radial-gradient(ellipse at 70% 40%, #fffafbdf 0, #f4effc9e 23%, #e7ddf451 45%, transparent 72%), linear-gradient(130deg, #e9e0f1, #daceeb 57%, #d2c1e2); /* full-bleed lilac field behind the tools hub */
  --err-ink: #842c25;   /* error text on --err-bg, 7.2:1 */
  --err-bg: #f4e4de;    /* error wash for messages and invalid fields */
  --err-line: #9b3028;  /* error border, 6.3:1 on paper */
  --scrim: rgb(25 27 27 / .35);  --scrim-blur: 6px;  /* --scrim with --scrim-blur sits behind every dialog and drawer; the open menu sheet uses --scrim alone */
  --photo-shade: linear-gradient(transparent, #191b1bbf);

  /* ── 2 · TYPE · Bebas Neue for the word AIOOS, Manrope for everything else ──
     --display, --body, --heading, --mono and --type-family stay defined by
     editorial-20260908/style.css and typography-20260910/typography.css (Manrope). */
  --w-body: 400;  --w-nav: 500;  --w-link: 550;  --w-ui: 600;  --w-head: 650;
  /* sizes: the values the live site renders (hero.css, footer.css, app.css, faq.css, human.css) */
  --t-word: clamp(158px, 19.5vw, 302px);        /* hero AIOOS, line-height .86, tracking -.012em */
  --t-word-closing: clamp(180px, 22vw, 340px);  /* closing AIOOS (violet), line-height .83, tracking -.015em */
  --t-hero-intro: clamp(32px, 4.4vw, 65px);     /* hero statement h2, 1.05, -.05em */
  --t-human: clamp(52px, 6.2vw, 88px);          /* "fully present" h2, 550, 1.08, -.05em */
  --t-section: clamp(36px, 4vw, 60px);          /* section h2: app, film, FAQ (3.75rem cap), 550-600, 1.1, -.04em */
  --t-feature: clamp(2.125rem, 1.6rem + 1.5vw, 3.25rem);
  --t-price: clamp(3rem, 2.3rem + 1.5vw, 4rem);
  --t-title: 1.625rem;
  --t-faq: 1.125rem;
  --t-body: clamp(1rem, .96rem + .18vw, 1.125rem);
  --t-ui: .9375rem;
  --t-nav: 13px;
  --t-small: .875rem;
  --t-note: .8125rem;
  --t-caption: .75rem;
  --t-micro: .6875rem;   /* disclosure labels never go below this (docs/website.md) */
  /* roles of the type scale. One section heading (h2), two leads, one label. Sizes carry a rem part so zoom and the browser font setting work. */
  --t-h2: clamp(2rem, 1.5rem + 2.1vw, 3.75rem);   /* 32 to 60 px (60 from 1714 px; flatter slope keeps voice and products headings at two lines near 1024), every section heading */
  --w-h2: 600;  --lh-h2: 1.08;  --track-h2: -.035em;
  --t-lead-l: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); /* 20 to 28 px, lead of the idea and human sections */
  --t-lead: clamp(1.0625rem, 1rem + .25vw, 1.25rem);   /* 17 to 20 px, intro under every other heading */
  --lh-lead-l: 1.4;  --lh-lead: 1.5;  --lh-copy: 1.6;   /* leading of the large lead, of the lead, and of section copy (card descriptions, notes under a lead); weight --w-body, no tracking */
  --t-label: .75rem;  --w-label: 600;  --lh-label: 1.4;  --track-label: .08em; /* uppercase label: kicker, caption row */
  --code: 'IBM Plex Mono', ui-monospace, Menlo, monospace;  --code-string: #7a4a1f;
  --lh-word: .86;  --track-word: -.012em;
  --lh-head: 1.12;  --track-head: -.045em;
  --lh-body: 1.65;  --lh-long: 1.7;   /* running text of content pages; the homepage sections use --lh-copy */
  --lh-caption: 1.5;  --track-kicker: .06em;
  --measure-lead: 34ch;  --measure-body: 42ch;

  /* ── 3 · SPACE and RHYTHM ─────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px;  --s-10: 40px;  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;
  --wrap: 1440px;
  /* The header block of a section: label, --stack-label, heading, --stack-title, intro, --stack-block, content. Every section uses these three gaps. */
  --stack-label: clamp(1rem, .6rem + 1.2vw, 1.5rem);    /* label to heading, 16 to 24 px */
  --stack-title: clamp(1rem, .6rem + 1.2vw, 1.5rem);    /* heading to intro, 16 to 24 px */
  --stack-block: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); /* header block to content, 28 to 40 px */
  --section: clamp(54px, 4.4vw, 68px);      /* section padding-block: use cases, voice, tools (the compact rhythm of 11 Oct) */
  --section-photo: clamp(64px, 5.8vw, 88px); /* inner padding of the photo sections (idea) */
  --nav-h: 76px;       /* from 1100px; the compact header below 1100px is 66px */
  --tap: 44px;
  --pad-card: 32px;
  --gap-card: clamp(16px, 2vw, 26px);
  --gutter: clamp(20px, 4.4vw, 80px);  /* one fluid page gutter, no steps: 20 px up to 454, 34 at 768 */
  /* Layout breakpoints are two and only two: 768 and 1100 (phone below 768, tablet 768 to 1099, desktop from 1100).
     A media query cannot read a variable, so they are written as 767/768 and 1099/1100. Inside a tier the content decides the columns. */

  /* ── 4 · SHAPE · a radius scale ────────────────────────────────────────────
     Structure stays square (header, bands, footer, full-bleed photos: --radius).
     Objects are soft. The scale is what the redesigned site renders. */
  --radius: 0;
  --radius-xs: 4px;        /* small marks, focus plates, code chips */
  --radius-chip: 6px;      /* chips, disclosure notes inside photos, tags */
  --radius-control: 7px;   /* buttons, inputs, select, segments on content pages */
  --radius-sm: 8px;        /* inner panels, menu rows, list items */
  --radius-surface: 10px;  /* cards, plan cards, FAQ items, demo panels, hub tiles, photos in the rail */
  --radius-lg: 12px;       /* large panels, laptop and tablet frames */
  --radius-panel: 14px;    /* the voice demo panel */
  --radius-phone: 38px;    /* phone frame, 30px for the screen ring inside */
  --radius-pill: 999px;    /* segmented rails, tabs, language trigger */
  --radius-circle: 50%;    /* dots, discs, round icon plates */
  --radius-device: var(--radius-lg);
  --radius-card: var(--radius-surface);
  --radius-button: var(--radius-control);
  --radius-disclosure: var(--radius-sm);
  --rule: 1px;
  --focus: 3px solid var(--accent);
  --focus-offset: 5px;
  /* one primary button: 56 px high (44 px in the header), 24 px side padding, control radius, 16 to 17 px type, 16 px arrow gap, no shadow */
  --btn-h: 56px;  --btn-h-nav: 44px;  --btn-pad-x: 24px;  --btn-gap: 16px;  --t-btn: clamp(1rem, .96rem + .12vw, 1.0625rem);

  /* ── 5 · ELEVATION · one hue (violet-ink), no neutral black drop shadow, no glow ──
     Flat, soft shadows for objects; hard offsets only for the tool-hub paper-cut tiles on content pages. */
  --shadow-raise: 0 12px 24px -16px #55416955;   /* flat cards that float: hub tiles, demo panels, product scenes */
  --shadow-hover: 0 14px 28px -16px #30203c40;   /* interactive card on hover and focus-within */
  --shadow-object: 0 24px 34px -16px #30203c66;  /* tilted product objects: wallet card, phone in products */
  --shadow-device: 0 4px 0 #72706c, 0 24px 26px -15px #30263d70; /* laptop and tablet frames */
  --shadow-phone: inset 0 0 0 1px #787573, 3px 2px 0 1px #74706c, 0 23px 30px -10px #27213055;
  --shadow-nav: 0 5px 18px #191b1b0b;            /* scrolled header */
  --shadow-dialog: 0 40px 100px #191b1b66;       /* dialog and drawer */
  --cut-1: #b8a8c1;
  --shadow-block: 5px 7px 0 var(--cut-1), 10px 20px 22px #32233a26; /* paper-cut tile on content pages; in use, no new use */
  --shadow-card-back: 0 1px 0 var(--accent), 0 8px 16px #191b1b12;
  /* buttons carry no shadow. */

  /* ── 6 · MOTION ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .65, .3, 1);
  --dur: 200ms;  --dur-nav: 160ms;  --dur-shell: 180ms;  --dur-block: 320ms;
  --lift: translateY(-2px);
  --dur-press: 100ms;  --dur-fast: 180ms;  --dur-base: 240ms;  --dur-slow: 480ms;  /* press; hover colour, border, tab pill; card depth, crossfade, accordion, dialog; scroll reveal, hero entrance */
  --ease-in-out: cubic-bezier(.45, 0, .2, 1);  /* a move between two states: height, sliding pill */
  --ease-in: cubic-bezier(.4, 0, 1, 1);  --dur-exit: 160ms;  /* a dialog or sheet leaving: two thirds of --dur-base */
  --press: translateY(1px) scale(.985);  /* a pressed button, tab or chip; --dur-press, colour only under reduced motion */
  --dialog-rise: 12px;  --dialog-slide: 24px;  /* a dialog rises 12 px; a drawer or a phone sheet slides 24 px */

  /* ── 7 · ICONS · one stroke family ───────────────────────────────────────────
     assets/system-20261012/icons.svg: symbols on a 24 grid, stroke 1.75, round caps and joins,
     currentColor. Use <svg class="icon" aria-hidden="true" width="1em" height="1em">
     <use href="/assets/system-20261012/icons.svg#arrow-up-right"/></svg>. Sizes 16, 20, 24.
     Text glyphs (arrows, check marks, the menu symbol) are not icons: Manrope does not contain them. */
  --icon-s: 16px;  --icon-m: 20px;  --icon-l: 24px;  --icon-stroke: 1.75;
}

.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.icon * { vector-effect: non-scaling-stroke; }

/* Text size: keep the authored size when a phone rotates (UI-266). Also set in editorial-20260908/style.css. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }