/* ============================================================
   ThirdEyeOS — Brand Design Tokens
   Source of truth: ThirdEyeOS Brand Identity + Investor Deck
   Colors: #000000 foundation · #FFFFFF text · #D85C27 orange
   Typeface: Poppins
   ============================================================ */

:root {
  /* ---- Accent (themeable) — everything derives from --accent-rgb ----
     Default theme: orange #D85C27. Other themes override the 3 vars below. */
  --accent-rgb: 216, 92, 39;
  --accent-bright: #F0743B;
  --accent-deep: #B6481C;

  --orange: rgb(var(--accent-rgb));
  --orange-bright: var(--accent-bright);
  --orange-deep: var(--accent-deep);
  --orange-soft: rgba(var(--accent-rgb), 0.14);
  --orange-line: rgba(var(--accent-rgb), 0.30);
  --orange-glow: rgba(var(--accent-rgb), 0.45);

  /* themed command-center hero graphic (overridden per theme) */
  --hero-img: url('../assets/hero-orange.png?v=63');

  /* ---- Foundation (near-black, never pure flat) ---- */
  --bg-0: #0a0807;   /* deepest */
  --bg-1: #100c0a;   /* app base */
  --bg-2: #16110e;   /* raised */
  --ink: #ffffff;

  /* ---- Glassy panels / cards ---- */
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(28, 22, 18, 0.72);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-warm: rgba(var(--accent-rgb), 0.22);
  --hairline: rgba(255, 255, 255, 0.07);

  /* ---- Text hierarchy ---- */
  --text-1: rgba(255, 255, 255, 0.96);
  --text-2: rgba(255, 255, 255, 0.66);
  --text-3: rgba(255, 255, 255, 0.42);
  --text-on-orange: #1a0f08;

  /* ---- Supportive accent set (derived, not invented palettes) ---- */
  --calm: #6FA8A0;      /* muted teal-grey for "calm" states only */
  --calm-soft: rgba(111, 168, 160, 0.14);
  --warn: #E0A03C;      /* gentle amber, never red-alarm */
  --warn-soft: rgba(224, 160, 60, 0.14);

  /* Life-area color coding (calm, low-saturation, on-brand) */
  --area-family: #E08A4A;
  --area-health: #6FA8A0;
  --area-work:   #A8917A;
  --area-legal:  #C77B5A;
  --area-money:  #D9A441;
  --area-home:   #9AA37F;

  /* ---- Shape & depth ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shadow-soft: 0 18px 50px -24px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 12px 34px -22px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 0 1px var(--orange-line), 0 18px 60px -22px var(--orange-glow);

  /* ---- Type ---- */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Layout ---- */
  --rail: 248px;
  --maxw: 1180px;
  --gap: 18px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   THEMES — accent-only. Each overrides --accent-rgb + bright + deep;
   all soft/line/glow/border tokens derive automatically.
   ============================================================ */
html[data-theme="orange"] { --accent-rgb: 216, 92, 39;  --accent-bright: #F0743B; --accent-deep: #B6481C; --hero-img: url('../assets/hero-orange.png?v=63'); }
html[data-theme="pink"]   { --accent-rgb: 237, 45, 136;  --accent-bright: #F75BA5; --accent-deep: #C21568; --hero-img: url('../assets/hero-pink.png?v=63'); }
html[data-theme="purple"] { --accent-rgb: 171, 90, 230;  --accent-bright: #C07DF2; --accent-deep: #8A3CC8; --hero-img: url('../assets/hero-purple.png?v=63'); }
html[data-theme="green"]  { --accent-rgb: 0, 158, 16;     --accent-bright: #1FC52F; --accent-deep: #007A0C; --hero-img: url('../assets/hero-green.png?v=63'); }
html[data-theme="sky"]    { --accent-rgb: 90, 193, 230;   --accent-bright: #82D4F2; --accent-deep: #3A9DC4; --hero-img: url('../assets/hero-sky.png?v=63'); }
html[data-theme="red"]    { --accent-rgb: 194, 45, 33;    --accent-bright: #E14638; --accent-deep: #9A2017; --hero-img: url('../assets/hero-red.png?v=63'); }
/* Monochrome: a calm black-and-white theme. Accent + every semantic color collapse to greys. */
html[data-theme="mono"]   { --accent-rgb: 224, 224, 224;  --accent-bright: #F0F0F0; --accent-deep: #A6A6A6; --hero-img: url('../assets/hero-orange.png?v=63');
  --area-family:#cfcfcf; --area-health:#a6a6a6; --area-work:#bcbcbc; --area-legal:#9a9a9a; --area-money:#dadada; --area-home:#b0b0b0;
  --calm:#bcbcbc; --calm-soft:rgba(188,188,188,0.14); --warn:#c8c8c8; --warn-soft:rgba(200,200,200,0.14); }
/* light accent needs dark text on filled buttons */
html[data-theme="mono"] .btn-primary, html[data-theme="mono"] .tb-btn-primary { color:#15110e; }
/* desaturate photos, avatars, cover art, and the living background so the whole UI reads monochrome */
html[data-theme="mono"] img,
html[data-theme="mono"] canvas,
html[data-theme="mono"] .hero-tile,
html[data-theme="mono"] .vroom-art,
html[data-theme="mono"] .reslib-art-hero,
html[data-theme="mono"] .reslib-rel-thumb { filter: grayscale(1); }