/**
 * Oli — central colour theme
 * --------------------------
 * Edit this file only to retune the palette. Loaded before main.css.
 * Hero node network (main.js) keeps its own RGBA — not controlled here.
 */

:root {
  /* ============================================================
     1. SOURCE SWATCHES — your palette (hex)
     ============================================================ */
  --palette-sage: #7c9188;
  --palette-taupe: #c5bbb3;
  --palette-clay: #998a73;
  --palette-deep-green: #143815;
  --palette-charcoal: #1b221b;
  --palette-stone: #d6d3d1;

  /* ============================================================
     2. DERIVED TINTS — lighten / darken for contrast balance
     ============================================================ */
  --tint-sage-light: #9dada5;
  --tint-sage-pale: #bcc9c4;
  --tint-mist: #e8e7e5;
  --tint-whisper: #ebeae8;
  --tint-surface: #f3f2f1;
  /* Warm light sand — Ideas Pipeline and similar bands */
  --tint-sand: #efe8de;
  --tint-spark-on-dark: #e8e4e0;
  --tint-metrics-bg: #2f3d32;
  --tint-hero-glow: rgba(124, 145, 136, 0.38);
  --tint-lab-selected: rgba(124, 145, 136, 0.45);
  --tint-ideas-accent: rgba(197, 187, 179, 0.22);
  --tint-cta-glow: rgba(214, 211, 209, 0.08);
  --tint-lab-decor: rgba(var(--rgb-sage), 0.35);
  --tint-status-amber-bg: rgba(200, 137, 31, 0.13);

  /* ============================================================
     3. SEMANTIC TOKENS — used across main.css (legacy names)
     ============================================================ */
  --oak-deep: var(--palette-deep-green);
  --oak-forest: var(--palette-charcoal);
  --oak-mid: var(--palette-clay);
  --oak-bright: var(--palette-sage);
  /* Primary button hover — darker sage (avoid clay brown from --oak-mid on CTAs) */
  --oak-bright-hover: #5f736a;
  --oak-light: var(--tint-sage-light);
  --oak-pale: var(--tint-sage-pale);
  --oak-whisper: var(--tint-whisper);
  --oak-mist: var(--tint-mist);

  /* Page body copy & headings on light sections — dark mode overrides in media query */
  --text-primary: var(--oak-forest);

  /* Accent on dark sections (replaces lime spark) */
  --spark: var(--tint-spark-on-dark);
  --spark-dim: var(--palette-taupe);
  --amber: #f5a623;

  --ink: var(--palette-charcoal);
  --ink-soft: #2a322a;
  --ink-muted: #5a6562;
  --ink-faint: var(--palette-sage);

  --white: #ffffff;
  /* Page shell behind sections (dark mode uses a charcoal canvas; --white stays literal for text/cards). */
  --canvas: var(--white);
  --surface: var(--tint-surface);

  /* RGB triples for rgba(var(--rgb-*), alpha) */
  --rgb-forest: 27, 34, 27;
  --rgb-deep: 20, 56, 21;
  --rgb-sage: 124, 145, 136;

  --border: rgba(var(--rgb-forest), 0.1);
  --border-mid: rgba(var(--rgb-forest), 0.2);

  /* ============================================================
     4. MOCKUP / PRODUCT UI SURFACES (tweak without touching main.css)
     ============================================================ */
  /* Icon tiles in mockups (hero tiles, lab available-features icons, project rows) */
  --graphic-icon-bg: #d9ebd9;

  --mockup-browser-surface: var(--graphic-icon-bg);
  --mockup-browser-border: rgba(var(--rgb-sage), 0.32);
  --mockup-chat-oli-bubble: #e6ebe9;
  --dash-browser-surface: var(--graphic-icon-bg);

  /* ============================================================
     5. STATUS & FEEDBACK (unchanged hues for accessibility)
     ============================================================ */
  --color-danger: #c84040;
  --color-danger-hover: #a03030;
  --status-amber: #c8891f;
  --status-amber-dark: #8a6220;
  --ideas-review: #b07818;
  --tint-amber-soft: rgba(245, 166, 35, 0.1);
  --tint-danger-soft: rgba(200, 64, 64, 0.5);

  /* ============================================================
     6. VALUE / CTA one-shots
     ============================================================ */
  --value-metrics-bg: var(--tint-metrics-bg);
}