/* ============================================================================
   rx-ultra-tokens.css  ·  RX_V='rx1'
   THE single token source for reddenda.com (Reddenda Ultra-Premium design system).
   War-room canonical spec 2026-07-06: direction "Cinematic Depth / Day-for-Night"
   + grafts (precision-instrument gauge/bezel/.num, editorial audited-figure discipline).
   Light = "dawn/midday" (default). Dark = "night" via [data-theme="dark"] / .is-dark.
   ONE teal accent survives the day->night trip; cyan (lume) is the dark "live signal".
   Injected LAST by global-nav.js / perf-nav.js so it wins the cascade. A COMPAT SHIM
   repoints every legacy token (the teal, cyan, th, cc, ros3, reddenda-grad vars)
   onto the rx vars, so existing selectors keep working with zero component rewrites.
   ========================================================================== */

/* ---- self-hosted faces already on disk (no new network cost) ---- */
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/schibsted-grotesk-latin-var.woff2?v=rd1') format('woff2');font-weight:400 800;font-display:swap;font-style:normal}
@font-face{font-family:'Geist';src:url('/assets/fonts/geist-latin-var.woff2?v=rd1') format('woff2');font-weight:400 600;font-display:swap;size-adjust:97%}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-latin-var.woff2?v=rd1') format('woff2');font-weight:400 600;font-display:swap}

:root{
  /* -- ACCENT RAMP -- teal (10 steps, AA-anchored on live canon #0FB5A6) -- */
  --rx-teal-50:#ECFBF8; --rx-teal-100:#D2F5EF; --rx-teal-200:#A6EBE0;
  --rx-teal-300:#6FDDCE; --rx-teal-400:#34C9B6;  /* accent-on-dark, AA */
  --rx-teal-500:#0FB5A6;  /* FILL - brand canon */
  --rx-teal-600:#0A8E83;  /* text/deep */
  --rx-teal-700:#077A70;  /* CTA, AA on white */
  --rx-teal-800:#065F57; --rx-teal-900:#08403B;

  /* -- LUME cyan -- dark glows / waveform / focus signal ONLY (never light text) -- */
  --rx-lume:#22D3EE; --rx-lume-deep:#06B6D4;
  --rx-lume-glow:rgba(34,211,238,.34);
  /* indigo exists ONLY as an ambient-mesh depth stop, never a solo/text color */
  --rx-indigo:#4F46E5;

  /* -- LIGHT palette (dawn/midday -- the default) -- */
  --rx-bg:#F7F9FC;        /* cool off-white, kills dead #FFF */
  --rx-bg-2:#FBFCFE;
  --rx-surface:#FFFFFF;   /* cards brighter than page -> they float */
  --rx-surface-2:#F4F8FA;
  --rx-ink:#0A0B0C;
  --rx-body:#1C2127;
  --rx-muted:#475067;     /* 4.6:1 AA on paper */
  --rx-faint:#5B6470;
  --rx-line:#E6EAF2;
  --rx-line-2:#D7DEE8;
  --rx-highlight:rgba(255,255,255,.9);

  /* -- SEMANTIC (theme-flipping) -- light values -- */
  --rx-accent:var(--rx-teal-500);
  --rx-accent-text:var(--rx-teal-600);
  --rx-accent-cta:var(--rx-teal-700);
  --rx-accent-ink:#FFFFFF;
  --rx-accent-soft:rgba(15,181,166,.08);
  --rx-accent-line:rgba(15,181,166,.22);
  --rx-good:#0A8177; --rx-warn:#B45309; --rx-bad:#DC2F3D;

  /* -- TYPE -- */
  --rx-font-display:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --rx-font-ui:'Inter','Geist',system-ui,-apple-system,sans-serif;
  --rx-font-mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace;
  --rx-display:clamp(2.75rem,1.6rem + 4.6vw,4.75rem); /* 44->76 Schibsted 800 -.025em lh1.02 */
  --rx-h1:clamp(2.25rem,1.5rem + 2.6vw,3.5rem);       /* 36->56 */
  --rx-h2:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);       /* 28->40 */
  --rx-h3:1.5rem; --rx-h4:1.25rem;
  --rx-stat:clamp(2.5rem,1.8rem + 2.8vw,3.75rem);     /* 40->60 the money figure */
  --rx-lead:1.1875rem; --rx-text:1rem; --rx-sm:.875rem; --rx-xs:.8125rem;
  --rx-eyebrow:.75rem; /* Geist Mono, uppercase, .16em, teal */

  /* -- SPACE / LAYOUT (8px rhythm) -- */
  --rx-1:4px; --rx-2:8px; --rx-3:12px; --rx-4:16px; --rx-5:24px; --rx-6:32px;
  --rx-7:48px; --rx-8:64px; --rx-9:96px; --rx-10:128px; --rx-11:160px;
  --rx-section:clamp(96px,10vw,160px);
  --rx-container:1200px; --rx-gutter:clamp(20px,5vw,72px); --rx-measure:62ch;

  /* -- RADII -- */
  --rx-r-xs:6px; --rx-r-sm:10px; --rx-r:14px; --rx-r-lg:20px; --rx-r-xl:28px; --rx-r-pill:999px;

  /* -- SHADOW -- light elevation ladder (tinted 3rd layer = "lit from within") -- */
  --rx-e0:0 1px 2px rgba(16,24,64,.05);
  --rx-e1:0 1px 2px rgba(16,24,64,.05),0 12px 28px -14px rgba(16,24,64,.14);
  --rx-e2:0 1px 2px rgba(16,24,64,.05),0 24px 48px -20px rgba(16,24,64,.18),0 16px 60px -30px rgba(15,181,166,.10);
  --rx-e3:0 1px 2px rgba(16,24,64,.05),0 30px 64px -24px rgba(16,24,64,.20),0 0 90px -34px rgba(6,182,212,.28);

  /* -- GRADIENTS (one canonical value each -- kills the double-defined --reddenda-grad) -- */
  --rx-grad-signal:linear-gradient(110deg,#0FB5A6 0%,#12B6C9 46%,#22D3EE 100%);   /* CTA + clip text, both themes */
  --rx-grad-ink:linear-gradient(100deg,#0A0B0C,#0A8E83 58%,#077A70);              /* dark clip word on light */
  --rx-score-ramp:linear-gradient(90deg,#F43F5E 0%,#F59E0B 42%,#0FB5A6 72%,#22D3EE 100%); /* RateScore 300->850 */
  --rx-dawn:radial-gradient(120% 80% at 50% -8%,#FFFFFF,#F7F9FC 62%);
  --rx-night:radial-gradient(120% 80% at 50% -8%,#0C1426 0%,#05070D 62%);
  --rx-aurora:radial-gradient(60% 50% at 18% 0%,rgba(15,181,166,.14),transparent 68%),
              radial-gradient(50% 45% at 86% 26%,rgba(79,70,229,.10),transparent 70%); /* indigo lives ONLY here, as depth */

  /* -- MOTION (dedup of 19 live cubic-beziers -> 5 named curves) -- */
  --rx-glide:cubic-bezier(.16,1,.3,1);     /* reveals, card lift (ros-v3 expoOut) */
  --rx-ease:cubic-bezier(.22,1,.36,1);     /* HOUSE: hover, nav, day/night morph */
  --rx-spring:cubic-bezier(.34,1.56,.64,1);/* chips/detent/badge pops ONLY - never a full bg */
  --rx-lens:cubic-bezier(.83,0,.17,1);     /* the Day-for-Night aperture dim */
  --rx-scan:linear;                        /* strip-charts, LED rings, needle timing */
  --rx-t1:.18s; --rx-t2:.32s; --rx-t3:.6s;
  --rx-reveal:.85s; --rx-count:1.2s; --rx-cinema:1.1s; --rx-cal:.55s;

  color-scheme:light;
}

/* -- DARK palette (night) -- reconciles the 7 live darks to 4 steps + bezel -- */
:root[data-theme="dark"], .is-dark{
  --rx-bg:#05070D;
  --rx-bg-2:#0A0F1C;
  --rx-surface:#0D1424;      /* lit-glass panel */
  --rx-surface-2:#111A2E;
  --rx-surface-3:#17223A;    /* hover / raised / active detent */
  --rx-ink:#F3F7FB;
  --rx-body:#C9D6E2;
  --rx-muted:#9CB0C0;
  --rx-faint:#6C7E8E;
  --rx-line:rgba(255,255,255,.10);
  --rx-line-2:rgba(255,255,255,.16);
  --rx-highlight:rgba(255,255,255,.07); /* inset top-edge - the bezel tell */

  --rx-accent:var(--rx-lume);           /* lume rises to primary on the dark stage */
  --rx-accent-text:var(--rx-teal-300);
  --rx-accent-cta:var(--rx-teal-500);
  --rx-accent-soft:rgba(34,211,238,.07);
  --rx-accent-line:rgba(34,211,238,.22);
  --rx-good:var(--rx-teal-400);

  /* dark elevation = machined bezel (inset highlight + hairline ring + deep floor) */
  --rx-bezel:inset 0 1px 0 var(--rx-highlight),0 0 0 1px var(--rx-line),0 24px 60px -34px rgba(0,0,0,.75);
  --rx-bezel-raised:inset 0 1px 0 var(--rx-highlight),0 0 0 1px var(--rx-line-2),0 40px 100px -50px rgba(0,0,0,.9);
  --rx-e1:var(--rx-bezel);
  --rx-e2:var(--rx-bezel);
  --rx-e3:var(--rx-bezel-raised);
  --rx-glow:0 0 0 1px rgba(34,211,238,.28),0 30px 70px -24px rgba(34,211,238,.5);
  --rx-floor:radial-gradient(60% 100% at 50% 130%,rgba(34,211,238,.07),transparent 70%);

  color-scheme:dark;
}

/* ============================================================================
   COMPAT SHIM -- legacy tokens now dereference --rx-*. Change once -> propagate.
   Existing selectors keep reading --teal / --th-* / --cc-* / --reddenda-grad, so
   the whole estate unifies onto one accent with zero per-file rewrites.
   ========================================================================== */
:root, html[data-theme="light"]{
  /* accents (single teal on light; fixes the teal/cyan/purple "three companies" tell) */
  --teal:var(--rx-accent); --teal-text:var(--rx-accent-text); --teal-deep:var(--rx-accent-text);
  --teal-cta:var(--rx-accent-cta); --cyan:var(--rx-accent); --ember:var(--rx-accent);
  --th-teal:var(--rx-accent); --th-teal-text:var(--rx-accent-text); --th-teal-cta:var(--rx-accent-cta);
  --th-grad:var(--rx-grad-signal);
  --cc-accent:var(--rx-accent); --reos-accent:var(--rx-accent);
  --ge-cyan:var(--rx-accent); --ros3-accent:var(--rx-accent); --ros3-accent-2:var(--rx-accent-text);
  --pu-cyan:var(--rx-accent); --reddenda-cyan:var(--rx-accent);
  --reddenda-grad:var(--rx-grad-ink);   /* resolves the double-definition conflict */
  --accent:var(--rx-accent); --acc:var(--rx-accent); --cta:var(--rx-accent-cta);
  /* motion aliases (19 curves -> the 5 named) */
  --th-ease:var(--rx-glide); --pu-easing:var(--rx-glide); --pu-ease-platinum:var(--rx-glide);
  --cc-ease-expo:var(--rx-ease); --ease:var(--rx-ease);
  --pu-spring:var(--rx-spring); --cc-ease-elastic:var(--rx-spring);
}
:root[data-theme="dark"], .is-dark{
  --cyan:var(--rx-lume); --cc-accent:var(--rx-lume); --ros3-accent:var(--rx-lume);
  --teal:var(--rx-lume); --ember:var(--rx-lume); --ge-cyan:var(--rx-lume);
}

/* -- SINGLE reduced-motion authority (supersedes scattered per-file blocks) -- */
@media (prefers-reduced-motion:reduce){
  [data-rx-reveal],[data-rx-reveal] *,[data-rx-count],
  .rx-card,.rx-card--interactive,.rx-morph,.rx-gauge *,.rx-strip *,.rx-detent,.rx-dim,.rx-btn::before{
    transition:none!important; animation:none!important;
    opacity:1!important; transform:none!important;
  }
}

/* ============================================================================
   UTILITIES + SIGNATURE COMPONENTS
   ========================================================================== */

/* the trust fingerprint: every financial figure is tabular mono */
.num{font-family:var(--rx-font-mono);font-feature-settings:"tnum","zero";letter-spacing:-.01em}
.stat-figure{font-family:var(--rx-font-display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* one focus ring, estate-wide */
.rx-btn:focus-visible,.rx-card--interactive:focus-visible{outline:2px solid var(--rx-lume);outline-offset:2px}

/* -- Buttons (incl. sheen-wipe; magnetic handled by existing ros-v3 JS) -- */
.rx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:600 15px/1 var(--rx-font-ui);padding:14px 22px;border-radius:var(--rx-r-pill);
  color:var(--rx-accent-ink);background:var(--rx-grad-signal);border:0;cursor:pointer;
  position:relative;overflow:hidden;text-decoration:none;
  box-shadow:0 8px 20px -8px color-mix(in oklab,var(--rx-accent) 50%,transparent);
  transition:transform var(--rx-t1) var(--rx-ease),box-shadow var(--rx-t2) var(--rx-ease)}
.rx-btn:hover{transform:translateY(-1px)}
.rx-btn:active{transform:translateY(1px)}
.rx-btn--ghost{background:transparent;color:var(--rx-accent-cta);border:1px solid var(--rx-accent-line);box-shadow:none}
.rx-btn::before{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-130%);transition:transform var(--rx-t3) var(--rx-ease)}
.rx-btn:hover::before{transform:translateX(130%)}

/* -- Cards / surfaces (real depth; dark auto-becomes the bezel via --rx-e* remap) -- */
.rx-card{background:var(--rx-surface);border:1px solid var(--rx-line);border-radius:var(--rx-r-lg);
  box-shadow:var(--rx-e1);
  transition:transform var(--rx-t3) var(--rx-glide),box-shadow var(--rx-t3) var(--rx-glide)}
.rx-card--interactive{cursor:pointer}
.rx-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--rx-e2)}
.is-dark .rx-card:hover,:root[data-theme="dark"] .rx-card:hover{box-shadow:var(--rx-bezel),var(--rx-glow)}
@media (prefers-reduced-motion:reduce){.rx-card--interactive:hover{transform:none}}

/* -- Section dividers: the "dusk bridge" (smooth light<->dark seam, zero JS) -- */
.rx-bridge{position:relative}
.rx-bridge--to-dark::after,.rx-bridge--to-light::before{content:"";position:absolute;left:0;right:0;height:160px;pointer-events:none;z-index:2}
.rx-bridge--to-dark::after{bottom:-160px;background:linear-gradient(180deg,
  #F7F9FC 0%,#C2CCD2 11%,#6B7783 26%,#22303F 48%,#0B1524 74%,#05070D 100%)}
.rx-bridge--to-light::before{top:-160px;background:linear-gradient(180deg,
  #05070D 0%,#0B1524 26%,#22303F 52%,#6B7783 74%,#C2CCD2 89%,#F7F9FC 100%)}
@media(max-width:560px){.rx-bridge--to-dark::after,.rx-bridge--to-light::before{height:104px}}

/* -- Discrete section theme flip (IO toggles .is-dark; tokens invert in lockstep) -- */
.rx-morph{transition:background-color var(--rx-cal) var(--rx-ease),color var(--rx-cal) var(--rx-ease)}

/* ============================================================================
   WAVE 3 -- "Day-for-Night" cinematic audio aperture.
   rx-cinema.js adds .rx-dim to <html> while the homepage 90-second story audio
   plays; removing it lifts the lights. Scope class = html.rx-dim (NOT an element);
   the scrim is :root::before. All motion is opacity/transform/filter only, 60fps.
   Reserved tokens: --rx-lens (aperture curve), --rx-cinema (1.1s entry).
   ========================================================================= */
/* A. The aperture vignette. Edge-weighted charcoal with a clear center over the
   mid-page stage; the --rx-aurora mesh rides inside for a living night sky.
   Fast 460ms return by default; slow 1.1s cinematic close under .rx-dim. */
:root::before{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  background:var(--rx-aurora),
    radial-gradient(126% 92% at 50% 42%,
      rgba(5,7,13,0) 0%,rgba(5,7,13,0) 30%,
      rgba(5,7,13,.42) 62%,rgba(5,7,13,.72) 100%);
  background-blend-mode:screen,normal;
  transition:opacity 460ms var(--rx-ease);
  will-change:opacity;
}
:root.rx-dim::before{opacity:1;transition:opacity var(--rx-cinema) var(--rx-lens)}

/* B. Peripheral recede -- the story stage's SIBLINGS inside <main> lose light +
   color. NEVER filter <main> itself (it is an ancestor of #see-it -> would dim the
   lit subject). #see-it is a direct child of main, so target main's other children. */
main>:not(#see-it):not(script):not(style){transition:filter 460ms var(--rx-ease)}
:root.rx-dim main>:not(#see-it):not(script):not(style){
  filter:brightness(.56) saturate(.72);
  transition:filter var(--rx-cinema) var(--rx-lens);
}

/* C. The lit subject -- the story stage stays bright (above the scrim), lifts one
   step, and gains a slow breathing lume halo (cinema=night, so lume is on-brand). */
:root.rx-dim #see-it{position:relative;z-index:62}
:root.rx-dim #lm-stage{
  transform:translateY(-2px) scale(1.012);
  box-shadow:0 28px 90px -26px rgba(0,0,0,.72),inset 0 0 0 1px rgba(34,211,238,.14);
  transition:transform 600ms var(--rx-glide),box-shadow var(--rx-cinema) var(--rx-lens);
}
:root.rx-dim #lm-stage::after{
  content:"";position:absolute;inset:-9% -7%;z-index:-1;border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(62% 62% at 50% 46%,
    rgba(34,211,238,.22) 0%,rgba(34,211,238,.06) 46%,transparent 72%);
  filter:blur(18px);
  animation:rxCinemaBreathe 4.2s var(--rx-ease) infinite;
}
@keyframes rxCinemaBreathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:.85}}

/* D. The scorecard live-signal (graceful scroll-up bonus; no-op if the hero
   rebuild reshapes it -> never a hard dependency). */
:root.rx-dim .th-card .num,
:root.rx-dim .th-gauge__num{
  filter:drop-shadow(0 0 14px rgba(34,211,238,.45));
  animation:rxCinemaBreathe 4.6s var(--rx-ease) infinite;
}

/* E. HARD a11y gate -- no dim, no pulse, no recede (belt-and-suspenders with the
   JS gate). The line-166 reduced-motion authority targets .rx-dim (the html el),
   NOT the ::before scrim, so this explicit gate is what suppresses the aperture. */
@media (prefers-reduced-motion:reduce),(prefers-contrast:more),(forced-colors:active){
  :root::before,:root.rx-dim::before{display:none!important}
  :root.rx-dim #lm-stage::after,
  :root.rx-dim .th-card .num,
  :root.rx-dim .th-gauge__num{animation:none!important;filter:none!important}
  :root.rx-dim main>:not(#see-it):not(script):not(style){filter:none!important}
  :root.rx-dim #lm-stage{transform:none!important;box-shadow:none!important}
}

/* ============================================================================
   RX CURSOR -- ultra-premium custom cursor (precise dot + trailing ring).
   Auto-inverts black<->white via mix-blend-mode:difference (Google-style: dark on
   light bg, light on dark bg, inverted over any color/image). Over anything
   clickable, the ring expands + turns solid teal-white with a glow AND the target
   gets a refined accent outline -- so clickability is unmistakable. Fine-pointer
   only (rx-cursor.js adds html.rxc-on after a pointer:fine check; touch keeps the
   native cursor). Retires the old premium-motion .cursor-dot/.cursor-ring.
   ========================================================================== */
.cursor-dot,.cursor-ring{display:none!important}            /* retire the old cursor everywhere rx loads */
html.rxc-on,html.rxc-on *{cursor:none!important}
html.rxc-on input,html.rxc-on textarea,html.rxc-on select,html.rxc-on [contenteditable=true]{cursor:text!important}
.rxc-dot,.rxc-ring{position:fixed;top:0;left:0;pointer-events:none;border-radius:999px;z-index:2147483646;
  mix-blend-mode:difference;opacity:1;transition:opacity .25s var(--rx-ease)}
.rxc-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#fff;will-change:transform;
  transform:translate3d(var(--rxc-x,-100px),var(--rxc-y,-100px),0);
  transition:width .18s var(--rx-ease),height .18s var(--rx-ease),background-color .18s var(--rx-ease),opacity .25s var(--rx-ease)}
.rxc-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;will-change:transform;
  transform:translate3d(var(--rxc-rx,-100px),var(--rxc-ry,-100px),0) scale(var(--rxc-s,1));
  transition:border-color .22s var(--rx-ease),background-color .22s var(--rx-ease),box-shadow .22s var(--rx-ease),scale .22s var(--rx-spring),opacity .25s var(--rx-ease)}
/* HOT -- pointer over a clickable: ring blooms teal-white (blend off so it reads solid), dot brightens */
html.rxc-hot .rxc-ring{mix-blend-mode:normal;--rxc-s:1.5;border-color:color-mix(in oklch,#22D3EE 82%,#fff);
  background:color-mix(in oklch,#22D3EE 20%,transparent);box-shadow:0 0 24px -2px color-mix(in oklch,#22D3EE 62%,transparent)}
html.rxc-hot .rxc-dot{mix-blend-mode:normal;background:#eafcff}
html.rxc-down .rxc-ring{--rxc-s:1.16}
html.rxc-hot.rxc-down .rxc-ring{--rxc-s:1.32}
/* the highlighted clickable itself -- refined accent outline (no layout shift; follows radius) */
.rxc-target{outline:2px solid color-mix(in oklch,var(--rx-accent,#0FB5A6) 55%,transparent)!important;
  outline-offset:3px;transition:outline-color .16s var(--rx-ease)}
@media (prefers-reduced-motion:reduce){.rxc-dot,.rxc-ring{transition:opacity .25s linear,border-color .12s linear,background-color .12s linear}}
@media (hover:none),(pointer:coarse){.rxc-dot,.rxc-ring{display:none!important}html.rxc-on,html.rxc-on *{cursor:auto!important}}