/*
 * AI Room shared design tokens.
 *
 * Confirmed sources:
 * - AI Room Club demo: styles.css and the approved scroll-story direction.
 * - Meridian Design System.zip: tokens/*.css and README.md.
 *
 * IMPORTED AND LIVE. `styles.css` line 1 imports this file (css-import of
 * "./src/styles/tokens.css" — spelled out here without the literal at-rule, because
 * build-standalone.js greps the built HTML for leftover external imports and would
 * trip on a verbatim quote in this comment), and that
 * import has been in HEAD all along — verified in the browser on 2026-07-31, where
 * --ease-reveal, --ease-swift, --ease-settle, --duration-*, --font-club, --radius-club-*,
 * --shadow-club-product and --club-* all resolve on the Club demo. Editing a value here changes
 * the live Club demo. (This line previously claimed the file was "intentionally not imported
 * yet", which was false and had already caused one wrong bug report.)
 * Every unresolved Studio-specific choice is marked PROPOSED for approval.
 */

:root {
  /* AI Room Club — confirmed brand palette. */
  --club-paper: #f3f0e8;
  --club-paper-deep: #e9e5da;
  --club-ink: #0b0c0d;
  --club-ink-soft: #17191d;
  --club-graphite: #24272d;
  --club-muted: #777b83;
  --club-muted-light: #a8abb1;
  --club-blue: #315cff;
  --club-acid: #dfff4f;
  --club-line-dark: rgba(11, 12, 13, 0.16);
  --club-line-light: rgba(243, 240, 232, 0.18);

  /* AI Room Club 2026 sky system — approved redesign direction. */
  --club-v2-ink: #0a1018;
  --club-v2-deep-sky: #15283b;
  --club-v2-slate: #617182;
  --club-v2-steel: #607fa2;
  --club-v2-sky: #91b9db;
  --club-v2-mist: #dde8f2;
  --club-v2-cloud: #f6f8fa;
  --club-v2-white: #ffffff;
  --club-v2-line-dark: rgba(10, 16, 24, 0.15);
  --club-v2-line-light: rgba(255, 255, 255, 0.42);
  --club-v2-glass: rgba(238, 246, 252, 0.58);
  --club-v2-glass-dark: rgba(18, 34, 49, 0.66);

  /* Meridian — confirmed surface ladder. */
  --meridian-bg-0: #0a0a0c;
  --meridian-bg-1: #101013;
  --meridian-bg-2: #16161a;
  --meridian-bg-3: #1d1d23;
  --meridian-bg-4: #25252d;
  --meridian-fg-1: #f7f8f8;
  --meridian-fg-2: #9b9ca3;
  --meridian-fg-3: #686a74;
  --meridian-border-1: rgba(255, 255, 255, 0.07);
  --meridian-border-2: rgba(255, 255, 255, 0.12);
  --meridian-border-focus: rgba(163, 230, 53, 0.65);
  --meridian-accent: #a3e635;
  --meridian-accent-hover: #b4f252;
  --meridian-accent-active: #8fcc2b;
  --meridian-accent-fg: #0a0a0c;
  --meridian-accent-subtle: rgba(163, 230, 53, 0.14);
  --meridian-accent-text: #bdd98b;

  /* Meridian — confirmed semantic colors. */
  --status-error: #e5534b;
  --status-error-subtle: rgba(229, 83, 75, 0.14);
  --status-warning: #e39a26;
  --status-warning-subtle: rgba(227, 154, 38, 0.14);
  --status-success: #35a06b;
  --status-success-subtle: rgba(53, 160, 107, 0.14);
  --status-info: #4c9ffe;
  --status-info-subtle: rgba(76, 159, 254, 0.14);
  --status-highlight: #e5793a;
  --status-highlight-subtle: rgba(229, 121, 58, 0.14);

  /* PROPOSED: Studio uses Meridian's dark ladder with the Club palette as identity. */
  --color-page: var(--meridian-bg-0);
  --color-panel: var(--meridian-bg-1);
  --color-card: var(--meridian-bg-2);
  --color-raised: var(--meridian-bg-3);
  --color-hover: var(--meridian-bg-3);
  --color-active: var(--meridian-bg-4);
  --color-text: var(--meridian-fg-1);
  --color-text-secondary: var(--meridian-fg-2);
  --color-text-muted: var(--meridian-fg-3);
  --color-border: var(--meridian-border-1);
  --color-border-strong: var(--meridian-border-2);
  --color-brand-primary: var(--club-blue);
  --color-brand-signal: var(--club-acid);
  --color-on-brand: var(--club-ink);
  --color-light-scene: var(--club-paper);
  --color-on-light: var(--club-ink);

  /* Confirmed font families from both sources. */
  --font-club: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-meridian-sans: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-meridian-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* PROPOSED: Studio typography. Requires an approved font-loading strategy. */
  --font-display: var(--font-meridian-sans);
  --font-body: var(--font-meridian-sans);
  --font-utility: var(--font-meridian-mono);

  /* Meridian typography scale — confirmed. */
  --text-display: 40px;
  --text-title: 24px;
  --text-heading: 18px;
  --text-subheading: 15px;
  --text-base: 14px;
  --text-ui: 13px;
  --text-small: 12px;
  --text-micro: 11px;
  --leading-display: 1.1;
  --leading-heading: 1.3;
  --leading-body: 1.55;
  --leading-ui: 1.4;
  --tracking-display: -0.022em;
  --tracking-heading: -0.012em;
  --tracking-body: -0.006em;
  --tracking-caps: 0.06em;
  --weight-regular: 450;
  --weight-medium: 510;
  --weight-semibold: 590;
  --weight-bold: 650;

  /* PROPOSED: responsive marketing display scale for the Studio landing page. */
  --text-hero-min: 48px;
  --text-hero-max: 96px;
  --text-section-min: 36px;
  --text-section-max: 72px;

  /* Meridian 4px spacing grid — confirmed. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* PROPOSED: larger values continue the same 4px grid for landing-page rhythm. */
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Meridian compact radii — confirmed. */
  --radius-meridian-sm: 4px;
  --radius-meridian-control: 6px;
  --radius-meridian-card: 8px;
  --radius-meridian-modal: 10px;
  --radius-full: 9999px;

  /* AI Room Club scene radii — confirmed from the current demo. */
  --radius-club-ui: 12px;
  --radius-club-module: 14px;
  --radius-club-control: 16px;
  --radius-club-panel: 24px;
  --radius-club-scene: 32px;
  --radius-club-object: 42px;
  --radius-club-section: 64px;
  --radius-club-pill: 999px;

  /* PROPOSED: Studio uses compact UI inside larger spatial scenes. */
  --radius-control: var(--radius-meridian-control);
  --radius-card: var(--radius-meridian-card);
  --radius-scene: var(--radius-club-panel);
  --radius-cta: var(--radius-full);

  /* Meridian effects — confirmed. */
  --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-mid: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-high: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-inset-edge: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-focus: 0 0 0 2px var(--color-page), 0 0 0 4px var(--meridian-border-focus);
  --overlay: rgba(6, 6, 8, 0.7);
  --blur-panel: blur(12px);

  /* AI Room Club depth effects — confirmed from the current demo. */
  --shadow-club-float: 0 18px 60px rgba(0, 0, 0, 0.24);
  --shadow-club-stage: 0 30px 80px rgba(0, 0, 0, 0.3);
  --shadow-club-product: 0 42px 110px rgba(11, 12, 13, 0.24);
  --shadow-club-blue-glow: 0 0 60px rgba(49, 92, 255, 0.6);
  --shadow-club-acid-glow: 0 0 20px rgba(223, 255, 79, 0.9);

  /* PROPOSED: CTA pill treatment transferred from the reference button (light 2px rim,
     dark body, blurred colour halo behind). Re-toned into the Club palette: no neon, the
     halo alphas are an order of magnitude below --shadow-club-acid-glow on purpose. */
  --club-rim-light: rgba(255, 255, 255, 0.12);
  --gradient-cta-text: linear-gradient(180deg, var(--club-muted-light) 0%, var(--club-v2-white) 76%);
  /* PROPOSED, revised 2026-08-02 after owner review: the first attempt was a hard lens
     (`inset 0 8px 18px -9px` at alpha .85) sitting under an equally hard `inset 0 1px 0`
     rim. Measured at 4x it produced a two-pixel plateau of L=254 against a body at L=245 —
     read as a white stripe across the top of every CTA, which is what the owner reported.
     The crown replaces both: no offset-zero row, alpha halved, falloff spread over ~4px, so
     the top reads brighter without a locatable edge. */
  --shadow-cta-crown: inset 0 4px 7px -4px rgba(255, 255, 255, 0.44);
  --shadow-cta-halo-acid: 0 0 34px rgba(206, 240, 66, 0.22);
  --shadow-cta-halo-ink: 0 0 30px rgba(223, 255, 79, 0.12);

  /* PROPOSED, 2026-08-02 (round 3, item 9): the "экономия N ₽" line on the price cards. The
     owner asked for a warm red/orange accent. One tone cannot serve both card types and stay
     above 4.5:1 — the acid card's own background is #dfff4f (relative luminance .878), which
     needs text at L <= .156, while the near-black cards (#151616, L ~ .007) need L >= .207.
     So the warm accent is --status-highlight, the confirmed Meridian orange, on the dark
     cards, and this deeper burnt tone of the same hue on the acid card. Nothing else in the
     file is warm, which is the point: it is the only orange on the page. */
  --club-warn-accent-deep: #9c3a00;

  /* Confirmed motion curves and timings. */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-control: 160ms;
  --duration-stage: 500ms;
  /* Round 4: 600/700 → 700/860. The owner's round-4 verdict on the round-3 values was still
     «слишком резкое» and «текст обгоняет страницы», so both lanes slow down again, together
     with the later observer trigger in script.js (-12% → -18%): the text now starts a beat
     later and settles noticeably longer. */
  --duration-reveal: 700ms;
  /* PROPOSED, 2026-08-02 (round 3, item 5): the slow lane of the v2 system — the per-word blur
     on the two largest headings and the letter-spacing condense on every other heading both run
     on it, while opacity keeps the shorter --duration-reveal so text becomes legible before the
     geometry finishes settling. */
  --duration-reveal-long: 860ms;
  --ease-swift: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-expressive: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  /* PROPOSED: CTA hover model from the reference pill — the whole stack scales, nothing
     inside moves, over `transform .2s ease-out`. --ease-settle is the decelerating curve
     already in this file, so no new easing is introduced. */
  --duration-hover: 200ms;
  --scale-cta-hover: 1.05;

  /* PROPOSED: word-reveal choreography for section headings. --delay-heading-lead is how
     much later the section body starts, so heading and body read as staged, not parallel.
     Revised 2026-08-02 (round 3, item 5) after the owner called the effect harsh: the blur
     halves (8px → 4px, so a word arrives out of focus rather than out of existence) and the
     stagger opens up (75 → 90ms, so the words read as a wave instead of a burst). The effect
     is now used on two headings, not nine — see --tracking-reveal-max. */
  --stagger-word: 90ms;
  --blur-word: 4px;
  /* Round 4: 160 → 220ms — the body clearly follows the heading instead of chasing it. */
  --delay-heading-lead: 220ms;

  /* PROPOSED, 2026-08-02 (round 3, item 5): every heading that is *not* word-revealed condenses
     from a widened tracking to its own. This is the widest start considered; script.js walks
     down from here in 0.01em steps and keeps the largest value that does not change the
     heading's rendered height, so the effect can never re-wrap a line and shift the page. */
  --tracking-reveal-max: 0.06em;
  --lift-reveal: 24px;

  /* Meridian layout values — confirmed. */
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --control-height-lg: 38px;
  --sidebar-width: 220px;
  --content-max-ui: 1024px;

  /* PROPOSED: Studio marketing layout. */
  --content-max-page: 1376px;
  --page-gutter-mobile: 20px;
  --page-gutter-desktop: 32px;

  /* 2026-08-03: знак «стрелка вверх-вправо» как МАСКА, а не как символ шрифта.
     Символ ↗ (U+2197) на iOS приезжает цветным эмодзи — синий квадрат вместо
     тонкого штриха, замечено владельцем на настоящем iPhone. Маска рисуется
     одинаково в любом браузере и красится через currentColor, поэтому знак
     наследует цвет кнопки и не зависит ни от одного шрифта. */
  --icon-arrow-up-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E");

  /* 2026-08-03, выбор Tony и Руслана по референсу Chrome UI: главное действие — хром.
     Свет падает сверху, как на металле: блик по верхней кромке, тело, тёмная полоса ниже
     середины, отбивка по нижней кромке. Пять остановок, а не две — на двух получается
     пластик, а не металл. */
  --surface-chrome: linear-gradient(180deg, #fdfdfc 0%, #edeeea 16%, #c5c7c0 52%, #e8e9e4 84%, #fdfdfd 100%);

  /* Рельеф металла: внутренний блик сверху, внутренняя тень снизу, короткая тень на паперу. */
  --shadow-chrome:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 1px rgba(16, 17, 16, .16),
    0 2px 5px rgba(16, 17, 16, .2);

  /* Свечение под кнопкой — салатовое, а не фиолетовое, как в референсе: фирменный цвет
     остаётся на первом экране, но теперь кнопка на нём СТОИТ, а не покрашена им. */
  --glow-acid: 0 14px 34px -12px rgba(191, 255, 57, .95);
  --glow-acid-strong: 0 18px 42px -12px rgba(191, 255, 57, 1);

  /* 2026-08-04, выбор Tony по замеру: ход между карточками липкой стопки отзывов.
     Это не отступ, а время: ровно столько прокрутки карточка стоит одна, прежде чем
     следующая начнёт её закрывать. До правки ход был 14px на телефоне и 100-118px на
     планшете и десктопе — отзыв не успевал побыть на экране целиком ни секунды.
     45vh даёт ~0.45 экрана одиночества на всех трёх форматах. */
  --case-reel-travel: 45vh;

  /* 2026-08-04: бумага, на которой нарисован лист маршрута. Значение снято пиксельно с
     самого ассета (угол route-cards-v1.webp = rgb(244,245,247)), а не подобрано на глаз:
     на телефоне лист разрезан на отдельные карточки, и подложка под ними обязана совпасть
     с фоном, вплавленным в каждую карточку, иначе швы видно. */
  --route-sheet-paper: #f4f5f7;
}