/* ============================================================
   RELAVENDO · COLOR SYSTEM
   Cool isometric-gradient world derived from the logo.
   Navy foundations · teal/aqua mids · electric cyan = "money found".
   ============================================================ */
:root {
  /* ---- Navy foundations (deep → deepest) ---- */
  --navy-500: #0C3C6C;   /* primary navy */
  --navy-600: #0A2A4E;   /* deep navy */
  --navy-700: #071B33;   /* deepest navy — app canvas on dark */
  --navy-400: #14508C;   /* raised navy / hover */
  --navy-300: #2B6DAE;   /* navy line on dark */

  /* ---- Cool blues / azure ---- */
  --azure-500: #1499D6;  /* azure — links, info */
  --azure-400: #3FB0E4;

  /* ---- Teals & mints ---- */
  --teal-500: #0FA3A3;   /* teal — secondary brand */
  --teal-400: #17BDBD;
  --mint-500: #1BE0C4;   /* aqua-mint — fresh accent */

  /* ---- Electric cyan — THE money signal (use sparingly) ---- */
  --cyan-500: #22E4E4;   /* "money found" */
  --cyan-600: #10C6C6;   /* cyan pressed */
  --cyan-glow: rgba(34, 228, 228, 0.45);

  /* ---- Cool neutrals (off-white → slate) ---- */
  --white: #FFFFFF;
  --offwhite: #F4F7FA;   /* cool off-white — light app canvas */
  --cloud-100: #E7EDF3;  /* light surface / hairline on light */
  --cloud-200: #D4DEE8;
  --slate-300: #A8B6C6;  /* muted text on light / loss */
  --slate-400: #7C8DA1;
  --slate-500: #55677C;  /* secondary text on light */
  --ink-700: #1E2A3A;    /* primary text on light */
  --ink-900: #0E1722;

  /* ---- Semantic: money & loss ---- */
  --money-found: var(--cyan-500);       /* glows cyan, sparingly */
  --money-found-soft: rgba(34,228,228,0.12);
  --loss: #4A5F7A;                       /* cool navy-gray — muted, never alarming red; keeps cyan the only glow */
  --loss-soft: rgba(74,95,122,0.14);
  --positive: var(--mint-500);
  --warning: #E7B54D;

  /* ============================================================
     SEMANTIC ALIASES — light surface (default app / web)
     ============================================================ */
  --bg-app: var(--offwhite);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--cloud-100);
  --surface-inverse: var(--navy-700);

  --text-primary: var(--ink-700);
  --text-secondary: var(--slate-500);
  --text-muted: var(--slate-400);
  --text-inverse: var(--offwhite);
  --text-link: var(--azure-500);

  --border-hairline: var(--cloud-200);
  --border-strong: var(--slate-300);
  --border-focus: var(--azure-500);

  --brand-primary: var(--navy-500);
  --brand-secondary: var(--teal-500);
  --brand-accent: var(--cyan-500);
}

/* ============================================================
   DARK / IMMERSIVE SCOPE — hero, app canvas, splash.
   Apply .rlv-dark to a container to flip surfaces to navy.
   ============================================================ */
.rlv-dark {
  --bg-app: var(--navy-700);
  --surface-card: var(--navy-600);
  --surface-raised: var(--navy-500);
  --surface-sunken: var(--navy-700);
  --surface-inverse: var(--offwhite);

  --text-primary: var(--offwhite);
  --text-secondary: #9FB4CC;
  --text-muted: #6E86A2;
  --text-inverse: var(--ink-700);
  --text-link: var(--azure-400);

  --border-hairline: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-focus: var(--cyan-500);

  --brand-primary: var(--cyan-500);
  --brand-accent: var(--cyan-500);
}