/* ============================================================================
   RendeReal — shared design tokens (single source of truth)
   Phase 1 (2026-07-16): LIGHT is now the site-wide default, aligned to the new
   homepage palette. Dark is preserved as an opt-in [data-theme="dark"] toggle
   (no prefers-color-scheme auto-switch — the site is deliberately light, to
   match the always-light homepage). --amber stays a text-legible depth because
   calc pages use it for large headline numbers on white.
   ============================================================================ */

:root{
  /* ---- canonical palette (LIGHT default, aligned to homepage) ---- */
  --bg:#F6F8FB; --panel:#FFFFFF; --panel-2:#F1F4F9; --line:#E7EBF1; --line-2:#EEF1F6;
  --ink:#0A0E15; --soft:#3F4859; --faint:#586274;
  --amber:#B4771A; --amber-2:#8A5A0E; --amber-soft:#FBF1DD; --amber-dim:#F3E7CE;
  --up:#0E9560; --up-bg:#E3F4EB; --down:#CE3E31; --down-bg:#FBE9E7;
  --blue:#3A5CA8; --blue-bg:#EAF0FB;

  /* ---- type ---- */
  --sans:"SF Pro Display","SF Pro Text",system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* NOTE: --mono is intentionally the sans stack (numbers use tabular-nums, not a
     monospace face). Do not point this at a real monospace — that reverts the
     deliberate "modern, not 80s-terminal" decision. */
  --mono:"SF Pro Display","SF Pro Text",system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* ---- elevation ---- */
  --shadow:0 1px 2px rgba(13,18,25,.05),0 16px 40px -28px rgba(13,18,25,.35);
  --glow:0 0 0 1px color-mix(in oklab,var(--amber) 40%,transparent),0 10px 30px -12px color-mix(in oklab,var(--amber) 45%,transparent);

  /* ---- shape scale ---- */
  --radius-lg:16px; --radius:12px; --radius-sm:9px; --radius-pill:100px;
  --border:1px;
  --on-accent:#0C0F15;   /* text colour on amber buttons */

  /* ---- legacy aliases (kept so rende-simulador's old token names resolve) ---- */
  --brand:var(--amber); --brand-2:var(--amber-2); --gold:var(--amber);
  --surface:var(--panel);
  --pos:var(--up); --pos-bg:var(--up-bg); --neg:var(--down); --neg-bg:var(--down-bg);
  --brandwash:#F6EFDD;
}

/* ---- opt-in dark toggle (manual only; not auto via OS preference) ---- */
:root[data-theme="dark"]{
  --bg:#0C0F15; --panel:#151A23; --panel-2:#1B212C; --line:#28303D; --line-2:#1D242F;
  --ink:#EBEFF6; --soft:#A4AFBF; --faint:#6C7889;
  --amber:#F6AE42; --amber-2:#FFC569; --amber-soft:#2A2214; --amber-dim:#2A2113;
  --up:#43D08C; --up-bg:#0F2A1E; --down:#F26458; --down-bg:#2B1512;
  --blue:#6E93FF; --blue-bg:#141E33;
  --shadow:0 1px 0 rgba(255,255,255,.02),0 18px 44px -28px rgba(0,0,0,.9);
  --brandwash:#1B1A12;
}
:root[data-theme="light"]{
  --bg:#F6F8FB; --panel:#FFFFFF; --panel-2:#F1F4F9; --line:#E7EBF1; --line-2:#EEF1F6;
  --ink:#0A0E15; --soft:#3F4859; --faint:#586274;
  --amber:#B4771A; --amber-2:#8A5A0E; --amber-soft:#FBF1DD; --amber-dim:#F3E7CE;
  --up:#0E9560; --up-bg:#E3F4EB; --down:#CE3E31; --down-bg:#FBE9E7;
  --blue:#3A5CA8; --blue-bg:#EAF0FB;
  --shadow:0 1px 2px rgba(13,18,25,.05),0 16px 40px -28px rgba(13,18,25,.35);
  --brandwash:#F6EFDD;
}

/* minimal shared base (pages still carry their own component CSS for now) */
*{box-sizing:border-box}