/*
  RENOVON design tokens — single source of truth.
  Colors: Asset-002 (Final Assets). Type: Asset-001 (Montserrat).
  Do not hardcode hex values anywhere else — reference these variables.
*/

:root {
  /* ---- Core palette — Asset-002 Section 01 ---- */
  --ink-navy: #0B2D38;      /* primary dark background, hero, premium foundation */
  --charcoal: #1E2329;      /* text & UI structure, dark panels */
  --renovon-teal: #0F6B6E;  /* primary brand accent, lines, buttons, section details */
  --light-stone: #F5F4F0;   /* primary light background */
  --premium-gold: #DEA02D;  /* sparing premium accent, O-ring, key emphasis only */
  --white: #FFFFFF;         /* reverse text and clean space */
  --signal-cyan: #22B8D6;   /* rare digital accent only */

  /* Derived (kept here so no stray hex leaks into components) */
  --navy-deep: #081F27;         /* footer / deepest panel */
  --gold-soft: rgba(222,160,45,.35);
  --teal-line: rgba(15,107,110,.45);

  /* ---- Theme system (body[data-theme] switches these; bg transition = the
         continuous section color-flow) ---- */
  --theme-bg: var(--ink-navy);
  --theme-fg: var(--light-stone);

  /* ---- Type ---- */
  --font-brand: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.4rem, 5.6vw, 4.4rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-lead: clamp(1.02rem, 1.6vw, 1.22rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .72rem;
  --track-caps: .18em;

  /* ---- Space & shape ---- */
  --container: min(1180px, 92vw);
  --sect-y: clamp(84px, 11vw, 150px);
  --radius: 14px;
  --radius-lg: 22px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --dur: .7s;

  /* ---- O-ring construction ratios — Asset-001 Sec.01 (1024 master) ---- */
  --ring-outer-stroke: 31;   /* /1024 */
  --ring-inner-r: 289.5;     /* /1024 */
  --ring-inner-band: 138;    /* /1024 */
}

body[data-theme="dark"]     { --theme-bg: var(--ink-navy);   --theme-fg: var(--light-stone); }
body[data-theme="light"]    { --theme-bg: var(--light-stone);--theme-fg: var(--ink-navy); }
body[data-theme="charcoal"] { --theme-bg: var(--charcoal);   --theme-fg: var(--light-stone); }