/* public/assets/rn/tokens.css — one design system shared by the hero and the site.
   The hero (assets/hero/ran-morph.css) hardcodes the same values; this file never edits it.
   It holds custom properties and token-only scopes, so it cannot win or lose a specificity fight.

   LOAD ORDER (10 core pages, 404.html, /ja/*):
     assets/rn/fonts.css                       @font-face only
     → site.css → studio.css → lux.css           all three wrapped in @layer legacy from stage 1
     → assets/hero/ran-morph.css               index pages only; unlayered; never edited
     → assets/rn/hotfix.css                    stage 0; folded away in stage 4
     → tokens.css → base.css → motion.css → chrome.css → components.css
     → pages/<page>.css                        always last (later layers are inserted before it)
     → ja.css                                  /ja/ only
   LAYERS: line 1 of site.css is `@layer rn-motion-guard, legacy;`. Every rn file is unlayered except the
     guard block in motion.css. Unlayered rules beat legacy at any specificity. For !important the order
     flips: the guard's !important beats everything, and legacy !important beats unlayered !important,
     so stage 1 removes the legacy !important colour declarations that rn overrides.
   BREAKPOINTS (@media cannot read custom properties): rn files use only max-width 640 (phone),
     900 (nav → dock, 2 → 1 column) and 1180 (compact nav, 3 → 2 columns). New rules use only these. The other values
     still in page files are either the hero's approved ones (home-hero.css, mirrored in ja.css), tuned in stage 3 at
     widths checked by eye, or matched to a legacy rule that still applies (legal.css with the legacy legal layout).
   FONTS (self-hosted from stage 1: assets/rn/fonts.css + assets/fonts/, the same woff2 files Google served):
     Bricolage Grotesque opsz,wght 12..96,400..800 (no width axis) · IBM Plex Mono 400;500 · Manrope 400;500;600;700, kept STATIC.
     The hero pill copies the CTA's rendered width, size, weight, gap and padding (ran-morph.js:391-393); the CTA
     renders at 700 (lux.css's old 750 did too, from the static faces, and went in 4-consolidation). Every declared
     weight is 400, 500, 600 or 700: a weight between faces would render as a neighbour, and a variable Manrope
     would render it true and resize the pill. */
:root {
  /* ── Colour · surfaces (the hero's palette, exact) ── */
  --rn-stage: #080a0c;               /* hero stage, 404, the closing-band card, the Edamame feature */
  --rn-ink: #090b0d;                 /* body, header, dock, footer (was #111 / #151515 / #0a0b0c / #050607) */
  --rn-ink-soft: #12161a;            /* ink card on ink, chips, stat strips */
  --rn-ring: #34383c;                /* the 1px ring on dark surfaces */
  --rn-paper: #f1f2ef;
  --rn-paper-hi: #ffffff;            /* cards sitting on paper */

  /* ── Colour · text and lines (AA-checked) ── */
  --rn-text-on-ink: #f1f2ef;
  --rn-muted-on-ink: #aeb4ba;        /* 9.4:1 on ink */
  --rn-text-on-paper: #090b0d;
  --rn-muted-on-paper: #5f6264;      /* 5.4:1 on paper. The hero's rgba(9,11,13,.55) is 4.25:1: labels only */
  --rn-line-on-ink: rgba(241, 242, 239, 0.14);
  --rn-line-on-paper: rgba(9, 11, 13, 0.14);
  --rn-line-strong-on-paper: rgba(9, 11, 13, 0.28);
  --rn-grid-line: rgba(255, 255, 255, 0.036);   /* the hero's .rm-grid */
  --rn-grid: 88px;

  /* ── Colour · single-purpose greys (moved here from the page files in 4-consolidation; values unchanged) ── */
  --rn-field-line-on-paper: #7c7f81;    /* brief: input underline, 4.0:1 on white, 3.6:1 on paper (non-text) */
  --rn-placeholder-on-paper: #6b6f71;   /* brief: placeholder, 5.1:1 on white */
  --rn-field-line-on-ink: #6c7278;      /* brief: input underline on ink-soft, 3.7:1 */
  --rn-placeholder-on-ink: #8d9399;     /* brief: placeholder on ink-soft, 5.7:1 */
  --rn-legal-text: #3f4441;             /* privacy and terms: long-form copy on paper */
  --rn-legal-muted: #4f5551;            /* privacy and terms: secondary copy on paper */
  --rn-bench: #4a5056;                  /* prototypes: the agency benchmark bar */

  /* ── Tone-relative colours. Components read these, never the raw pairs; the tone scopes below re-set them ── */
  --rn-text: var(--rn-text-on-ink);
  --rn-muted: var(--rn-muted-on-ink);
  --rn-line: var(--rn-line-on-ink);
  --rn-on-text: var(--rn-ink);

  /* ── Accents: one value per hue ── */
  --rn-red: #ff4e45;          /* ONE meaning on every page: a finding, or attention. 6.0:1 on ink */
  --rn-red-text: #c8352c;     /* red as TEXT on paper or white: 4.7:1 (#ff4e45 on paper is 2.9:1) */
  --rn-on-red: #090b0d;       /* text on red fills (6.0:1); never paper on red (2.9:1) */
  --rn-lime: #d9ff5b;         /* studio-family signal, the home ticker, ::selection. 17:1 on ink */
  --rn-yellow: #ffd75a;       /* writing-family signal. 14:1 on ink */
  --rn-blue: #79a9ff;         /* AI-family signal. 8.2:1 on ink */
  /* --rn-signal is deliberately NOT set on :root. Only the studio, AI and writing families set it (scopes
     below). Components read var(--rn-signal, var(--rn-text)). The audit family (home's audit half,
     Audits, Approach, Brief, Privacy, Terms, 404) therefore marks things ink-on-paper and paper-on-ink, as the
     hero does.
     RED IS ALLOWED ONLY FOR: the hero (untouched); one H1 emphasis phrase on an audit-family ink hero (as the
     hero's own H1 does); findings and the "Now" priority inside rn-example; form errors; the footer spectrum
     segment. Never for eyebrow dots, index numbers, hovers, focus, bands, active or current-step states.
     Cap: at most 2 red marks per 900px slice outside rn-example and form errors (audit/work/lead/red-scan.mjs).
     SIGNAL RULES: on ink, text, dots, bars and chip fills are fine. On paper, a signal is only a fill behind
     ink text, or a mark of 6px or more with --rn-signal-edge (lime or yellow alone on paper is about 1:1;
     see audit/work/lead/shots-proto/d-01.png). Never a glow, a gradient, a focus ring, a button hover fill
     or a surface larger than a chip; the home ticker is the one exception. */
  --rn-signal-edge: 0 0 0 1.5px var(--rn-ink);
  --rn-data-1: #090b0d;       /* chart series (the hero's donut and legend) */
  --rn-data-2: #6f7275;
  --rn-data-3: #c3c5c2;

  /* ── Type · families ── */
  --rn-font-display: 'Bricolage Grotesque', Arial, sans-serif;           /* H1, H2 and one number per view; weight 700 */
  --rn-font-body: 'Manrope', Arial, sans-serif;                          /* UI, body, H3, card titles */
  --rn-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;    /* UPPERCASE labels, eyebrows, numbers */
  /* Japanese, applied by assets/rn/ja.css on :lang(ja). Latin glyphs still come from the first family. */
  --rn-font-display-ja: 'Bricolage Grotesque', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --rn-font-body-ja: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --rn-font-mono-ja: 'IBM Plex Mono', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', monospace;

  /* ── Type · fluid scale (px at 390 → 1440) ── */
  --rn-fs-label: 0.6875rem;                                   /* 11 · mono UPPERCASE; the text floor outside the hero stage */
  --rn-fs-small: 0.8125rem;                                   /* 13 */
  --rn-fs-body: 1rem;                                         /* 16 */
  --rn-fs-body-lg: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);   /* 16 → 18 */
  --rn-fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);     /* 18 → 22 */
  --rn-fs-title: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);     /* 20 → 24 · card titles, Manrope 700 */
  --rn-fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);     /* 22 → 30 · Manrope 700 */
  --rn-fs-h2-sm: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem);    /* 30 → 44 · COMPACT H2 role: H2s inside cards, forms, strips,
                                                                 the blog index headings, and the blog article title */
  --rn-fs-h2: clamp(2.5rem, 1.6rem + 2.9vw, 4rem);            /* 40 → 64 · SECTION H2 role. These two are the only H2 sizes */
  --rn-fs-stat: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);      /* 36 → 52 · the one big number per view */
  --rn-fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 6.3rem);    /* 44 → 101 · interior hero H1 only; the home H1 stays as the hero sets it */
  --rn-weight-display: 700;
  --rn-weight-title: 700;
  --rn-weight-ui: 600;
  --rn-weight-body: 400;
  --rn-lh-display: 0.92;
  --rn-lh-heading: 1;
  --rn-lh-title: 1.2;
  --rn-lh-lead: 1.45;
  --rn-lh-body: 1.55;
  --rn-lh-heading-ja: 1.25;
  --rn-lh-body-ja: 1.8;
  --rn-track-display: -0.025em;
  --rn-track-title: -0.02em;         /* H3s and card titles in Manrope 700 (added in 1-foundation) */
  --rn-track-label: 0.02em;          /* the hero's .rm-m */
  --rn-track-label-wide: 0.06em;     /* ticker, dock */
  --rn-track-ja: 0.04em;
  --rn-measure: 62ch;

  /* ── Buttons: EXACTLY today's .lux-button metrics, which the hero pill measures (ran-morph.js:391-393
     copies the CTA's offsetWidth, fontSize, fontWeight, columnGap and paddingLeft). Changing any of these
     moves the hero. ── */
  --rn-btn-h: 52px;
  --rn-btn-h-compact: 44px;
  --rn-btn-pad: 22px;
  --rn-btn-fs: 0.82rem;
  --rn-btn-weight: 700;              /* the weight the CTA has always rendered at (static Manrope) */
  --rn-btn-gap: 20px;

  /* ── Space (4px base) ── */
  --rn-space-1: 4px;
  --rn-space-2: 8px;
  --rn-space-3: 12px;
  --rn-space-4: 16px;
  --rn-space-5: 24px;
  --rn-space-6: 32px;
  --rn-space-7: 48px;
  --rn-space-8: 64px;
  --rn-space-9: 96px;
  --rn-space-10: 128px;
  --rn-section: clamp(72px, 10vw, 144px);        /* section padding-block, equal top and bottom */
  --rn-section-tight: clamp(48px, 6vw, 88px);    /* strips, the closing band's outer padding */
  --rn-gutter: clamp(16px, 3.4vw, 48px);
  --rn-max: 1280px;
  --rn-target: 44px;                             /* minimum hit area */

  /* ── Radius (the hero uses 6/7, 10, 12, 14, 999) ── */
  --rn-radius-xs: 6px;
  --rn-radius-sm: 10px;
  --rn-radius-media: 12px;
  --rn-radius-md: 14px;
  --rn-radius-card: 20px;
  --rn-radius-pill: 999px;
  --rn-radius-input: 0;              /* underline fields */

  /* ── Rings, elevation, focus (no glows) ── */
  --rn-ring-on-ink: 0 0 0 1px var(--rn-ring);
  --rn-ring-on-paper: 0 0 0 1px rgba(9, 11, 13, 0.12);
  --rn-ring-hover-on-ink: 0 0 0 1px var(--rn-muted-on-ink);
  --rn-ring-hover-on-paper: 0 0 0 1px var(--rn-line-strong-on-paper);
  --rn-lift: 0 18px 48px rgba(0, 0, 0, 0.28);   /* open menus and sheets only; nothing at rest */
  --rn-focus-outline: 2px solid var(--rn-ink);  /* two-tone ring: an ink outline outside … */
  --rn-focus-offset: 2px;
  --rn-focus-band: 0 0 0 2px var(--rn-paper);   /* … and a paper band inside; one of the two clears 3:1 on ink, paper, colour or imagery */

  /* ── Motion · the hero's springs (ran-morph.js:64-66) sampled into linear(), each cut at 0.1% settle.
     Generated by overhaul/tools/springs.mjs; assets/rn/motion.js runs the same maths for WAAPI. ── */
  /* UI [ω22, ζ0.78]: reveals, cards, toggles. Overshoot ≤2%. */
  --rn-ease-ui: linear(0, 0.005 1.3%, 0.023 2.8%, 0.057 4.5%, 0.102 6.3%, 0.147 7.8%, 0.204 9.5%, 0.442 16.3%, 0.543 19.3%, 0.641 22.5%, 0.727 25.8%, 0.794 28.7%, 0.855 32%, 0.903 35.3%, 0.94 38.5%, 0.972 42.3%, 0.995 46.3%, 1.009 50.5%, 1.018 55.5%, 1.019 64.3%, 1);
  --rn-dur-ui: 377ms;
  /* SNAP [ω38, ζ0.82]: hover, press, focus. */
  --rn-ease-snap: linear(0, 0.005 1.3%, 0.025 2.8%, 0.055 4.3%, 0.1 6%, 0.146 7.5%, 0.196 9%, 0.426 15.5%, 0.527 18.5%, 0.626 21.8%, 0.705 24.8%, 0.774 27.8%, 0.835 31%, 0.883 34.3%, 0.924 37.8%, 0.956 41.5%, 0.98 45.5%, 0.996 50%, 1.007 55.3%, 1.011 66%, 1);
  --rn-dur-snap: 227ms;
  /* LEAD [ω34, ζ0.8]: a shape that arrives first (the highlight behind kinetic words). Overshoot 1.5% (added in 1-motion-system). */
  --rn-ease-lead: linear(0, 0.005 1.3%, 0.024 2.8%, 0.053 4.3%, 0.098 6%, 0.143 7.5%, 0.201 9.3%, 0.431 15.8%, 0.532 18.8%, 0.631 22%, 0.717 25.3%, 0.785 28.2%, 0.846 31.5%, 0.894 34.8%, 0.932 38%, 0.964 41.8%, 0.987 45.8%, 1.003 50.2%, 1.012 55.3%, 1.015 65%, 1);
  --rn-dur-lead: 249ms;
  /* TRAIL [ω13, ζ0.92]: menus, sheets. No overshoot. */
  --rn-ease-trail: linear(0, 0.006 1.8%, 0.023 3.5%, 0.052 5.5%, 0.09 7.5%, 0.175 11.3%, 0.382 19.5%, 0.472 23.3%, 0.561 27.3%, 0.634 31%, 0.695 34.5%, 0.748 38%, 0.793 41.5%, 0.834 45.3%, 0.876 50%, 0.911 55%, 0.938 60.3%, 0.96 66.3%, 0.976 72.8%, 0.987 80%, 1);
  --rn-dur-trail: 505ms;
  /* Critically damped (ζ1): one curve shared by FADE [ω28], OUT [ω42] and CAM [ω8.5]. */
  --rn-ease-critical: linear(0, 0.004 1%, 0.019 2.3%, 0.042 3.5%, 0.079 5%, 0.161 7.8%, 0.362 13.8%, 0.465 17%, 0.557 20.3%, 0.638 23.5%, 0.706 26.8%, 0.767 30.3%, 0.817 33.8%, 0.86 37.5%, 0.899 42%, 0.929 46.8%, 0.953 52.3%, 0.971 58.5%, 0.983 65.5%, 0.991 73.8%, 1);
  --rn-dur-fade: 330ms;       /* entrances: opacity */
  --rn-dur-out: 220ms;        /* exits and closes */
  --rn-dur-cam: 1086ms;       /* large one-off measures (bars, graphs) */
  --rn-beat: 555.56ms;        /* 108 BPM, the hero's tempo */
  --rn-stagger: 69ms;         /* 1/8 beat; at most 6 steps (≤345ms) */
  --rn-reveal-distance: 16px;
  --rn-swap-blur: 5px;        /* same-document content swaps, hover-capable devices only (the hero's blur) */

  /* ── Z-index (replaces 22 ad-hoc values) ── */
  --rn-z-raised: 2;
  --rn-z-sticky: 100;
  --rn-z-header: 140;
  --rn-z-dock: 150;
  --rn-z-menu: 160;
  --rn-z-overlay: 200;
  --rn-z-skip: 1000;

  /* ── Chrome geometry. ran-morph.js measures [data-site-header]: never change top or height ── */
  --rn-header-top: 18px;
  --rn-header-h: 72px;
  --rn-header-clearance: 112px;     /* html { scroll-padding-top } */
  --rn-dock-h: 64px;
  --rn-dock-gap: max(12px, env(safe-area-inset-bottom));
  --rn-dock-clearance: calc(var(--rn-dock-h) + var(--rn-dock-gap) + 16px);   /* reserved once, on the footer */
}

@media (max-width: 900px) {
  :root { --rn-header-top: 12px; --rn-header-h: 64px; --rn-header-clearance: 92px; }
}
@media (max-width: 640px) {
  /* Today's phone .lux-button (lux.css, max-width 640px), which the hero pill also copies (added in 1-foundation). */
  :root { --rn-btn-h: 46px; --rn-btn-pad: 17px; --rn-btn-fs: 0.73rem; --rn-btn-gap: 14px; }
}
@media (hover: none) {
  :root { --rn-swap-blur: 0px; }   /* blur costs about a third of a frame on a throttled phone */
}
/* Fallback for browsers without linear() (Safari < 17.2, Chrome < 113): closest cubic-bezier fits. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --rn-ease-ui: cubic-bezier(0.3, 1.1, 0.4, 1);
    --rn-ease-snap: cubic-bezier(0.3, 1.05, 0.4, 1);
    --rn-ease-lead: cubic-bezier(0.3, 1.08, 0.4, 1);
    --rn-ease-trail: cubic-bezier(0.25, 0.8, 0.3, 1);
    --rn-ease-critical: cubic-bezier(0.25, 0.8, 0.3, 1);
  }
}

/* ── Tone scopes. Stage 0 corrects data-tone on the first sections (dark on the ink heroes, light on privacy/terms) ── */
[data-tone=light], body.studio-legal-page, .studio-brief-form, .rn-surface-paper {
  --rn-text: var(--rn-text-on-paper); --rn-muted: var(--rn-muted-on-paper); --rn-line: var(--rn-line-on-paper);
  --rn-on-text: var(--rn-paper);
}
[data-tone=dark], .site-header, .site-footer, .mobile-bottom-nav, .rn-surface-ink {
  --rn-text: var(--rn-text-on-ink); --rn-muted: var(--rn-muted-on-ink); --rn-line: var(--rn-line-on-ink);
  --rn-on-text: var(--rn-ink);
}
/* --rn-on-text is the colour of text sitting on a fill of --rn-text (a highlight or pressed pill): added in 1-motion-system. */

/* ── Family signals (token-only; the body classes already exist on every page). The audit family sets none. ── */
body.studio-work-page, body.studio-prototypes-page,
body.lux-home :is(.lux-ticker, .rn-ticker, .lux-work, .lux-prototypes) { --rn-signal: var(--rn-lime); }
body.studio-alchemy-page { --rn-signal: var(--rn-blue); }
body.studio-blog-page, body.studio-books-page { --rn-signal: var(--rn-yellow); }

/* ── Bridge: the three legacy token families → rn (the legacy files read their own names) ── */
:root {
  --ink: var(--rn-ink);  --black: var(--rn-ink);  --coal: var(--rn-ink-soft);  --paper: var(--rn-paper);
  --studio-ink: var(--rn-ink);  --studio-paper: var(--rn-paper);
  --lux-ink: var(--rn-ink);  --lux-ink-soft: var(--rn-ink-soft);  --lux-paper: var(--rn-paper);
  --lux-muted: var(--rn-muted-on-ink);  --lux-line: var(--rn-line-on-ink);
  --display: var(--rn-font-display);  --body: var(--rn-font-body);  --mono: var(--rn-font-mono);
  /* Accents consolidate. Ship together with base.css, whose red-text-on-paper and text-on-red rules keep small labels AA. */
  --red: var(--rn-red);  --studio-red: var(--rn-red);  --lux-red: var(--rn-red);  --red-dark: var(--rn-red-text);
  --yellow: var(--rn-yellow);  --studio-yellow: var(--rn-yellow);  --lux-yellow: var(--rn-yellow);
  --blue: var(--rn-blue);  --studio-blue: var(--rn-blue);  --lux-blue: var(--rn-blue);  --teal: var(--rn-blue);
  --studio-green: var(--rn-lime);  --lux-lime: var(--rn-lime);
  /* Deliberately NOT bridged: --page-pad and --header-h (site.css redefines them on :root inside @media),
     and --studio-radius (cards move to --rn-radius-card per component, not globally). */
}