/* ============================================================
   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.jpg?v=64');

  /* ---- 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.74);
  --text-3: rgba(255, 255, 255, 0.64);
  --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);

  /* ---- Semantic accents (themeable, coordinated per theme with the main accent) ----
     attention = "needs you / overdue / urgent-but-gentle"  ·  good = "handled / autopay / done".
     Baseline below is today's universal look (rose + teal), so any theme not yet given its
     own inspo keeps exactly the current look. Each theme overrides the two -rgb vars to
     harmonize with its main color; the soft/line variants derive automatically. */
  --attention-rgb: 237, 99, 140;
  --attention: rgb(var(--attention-rgb));
  --attention-soft: rgba(var(--attention-rgb), 0.13);
  --attention-line: rgba(var(--attention-rgb), 0.34);
  --good-rgb: 111, 168, 160;
  --good: rgb(var(--good-rgb));
  --good-soft: rgba(var(--good-rgb), 0.12);
  --good-line: rgba(var(--good-rgb), 0.30);

  /* 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: "Nunito", -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.jpg?v=64');
  /* warm inspo: deep red = needs-you, gold = handled — all in the orange family */
  --attention-rgb: 220, 47, 2;   /* #DC2F02 */
  --good-rgb: 250, 163, 7; }     /* #FAA307 */
html[data-theme="pink"]   { --accent-rgb: 237, 45, 136;  --accent-bright: #F75BA5; --accent-deep: #C21568; --hero-img: url('../assets/hero-pink.jpg?v=64');
  /* pink + green pairing (from the Purple/Pink/Green palette): rose = needs-you, emerald = handled */
  --attention-rgb: 237, 99, 140; /* #ED638C rose */
  --good-rgb: 16, 185, 129; }    /* #10B981 emerald */
html[data-theme="purple"] { --accent-rgb: 171, 90, 230;  --accent-bright: #C07DF2; --accent-deep: #8A3CC8; --hero-img: url('../assets/hero-purple.jpg?v=64');
  /* purple + green + cream inspo → purple/rose/green triad: rose = needs-you, forest = handled */
  --attention-rgb: 237, 99, 140; /* #ED638C rose */
  --good-rgb: 64, 145, 108; }    /* #40916C forest green */
html[data-theme="green"]  { --accent-rgb: 0, 158, 16;     --accent-bright: #1FC52F; --accent-deep: #007A0C; --hero-img: url('../assets/hero-green.jpg?v=64');
  /* iguana/jungle inspo: warm amber = needs-you (shouts past the greens), sage = handled */
  --attention-rgb: 245, 158, 11; /* #F59E0B amber */
  --good-rgb: 82, 183, 136; }    /* #52B788 sage */
html[data-theme="sky"]    { --accent-rgb: 90, 193, 230;   --accent-bright: #82D4F2; --accent-deep: #3A9DC4; --hero-img: url('../assets/hero-sky.jpg?v=64');
  /* Technology Blues inspo: warm orange pops for needs-you, deep blue = handled */
  --attention-rgb: 243, 107, 28; /* #F36B1C orange */
  --good-rgb: 11, 106, 176; }    /* #0B6AB0 blue */
html[data-theme="red"]    { --accent-rgb: 194, 45, 33;    --accent-bright: #E14638; --accent-deep: #9A2017; --hero-img: url('../assets/hero-red.jpg?v=64');
  /* red + blue + black inspo: hot red pops past the brick main for needs-you, petrol blue = handled */
  --attention-rgb: 255, 46, 31;  /* #FF2E1F */
  --good-rgb: 30, 136, 176; }    /* #1E88B0 blue */
/* 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-mono.jpg?v=64');
  --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);
  --attention-rgb:214,214,214; --good-rgb:150,150,150; }
/* 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); }