/* ============================================================
   RenuuAI color tokens
   ------------------------------------------------------------
   Edit color values here to update the site-wide palette.
   Semantic aliases below are used by pages and components.
   ============================================================ */

:root {
  /* Core palette */
  --palette-black: #000000;
  --palette-white: #ffffff;
  --palette-off-white: #f5f5f5;
  --palette-soft-gray: #c9c9c9;
  --palette-muted-gray: #9A9A9A;
  --palette-charcoal: #0a0c0e;
  --palette-charcoal-2: #1e242b;
  --palette-charcoal-3: #313232;
  --palette-cyan: #25EAE7;
  --palette-error: #ffb4a8;

  /* Semantic site colors */
  --color-bg: var(--palette-black);
  --color-bg-alt: var(--palette-charcoal-2);
  --color-surface: var(--palette-charcoal);
  --color-surface-2: var(--palette-charcoal-2);
  --color-border: var(--palette-charcoal-3);
  --color-border-strong: rgba(255,255,255,0.22);
  --color-border-subtle: rgba(255,255,255,0.06);
  --color-border-soft: rgba(255,255,255,0.08);
  --color-text: var(--palette-off-white);
  --color-text-strong: var(--palette-white);
  --color-text-soft: var(--palette-soft-gray);
  --color-muted: var(--palette-muted-gray);
  --color-accent: var(--palette-cyan);
  --color-error: var(--palette-error);
  --color-on-accent: var(--palette-black);

  /* Transparent overlays and borders */
  --color-white-02: rgba(255,255,255,0.02);
  --color-white-018: rgba(255,255,255,0.018);
  --color-white-025: rgba(255,255,255,0.025);
  --color-white-04: rgba(255,255,255,0.04);
  --color-white-045: rgba(255,255,255,0.045);
  --color-white-05: rgba(255,255,255,0.05);
  --color-white-055: rgba(255,255,255,0.055);
  --color-white-06: rgba(255,255,255,0.06);
  --color-white-18: rgba(255,255,255,0.18);
  --color-white-20: rgba(255,255,255,0.2);
  --color-white-25: rgba(255,255,255,0.25);
  --color-white-30: rgba(255,255,255,0.3);
  --color-white-34: rgba(255,255,255,0.34);
  --color-white-38: rgba(255,255,255,0.38);
  --color-white-40: rgba(255,255,255,0.4);

  --color-black-40: rgba(0,0,0,0.4);
  --color-black-50: rgba(0,0,0,0.5);
  --color-black-55: rgba(0,0,0,0.55);
  --color-black-60: rgba(0,0,0,0.6);
  --color-black-65: rgba(0,0,0,0.65);
  --color-black-68: rgba(0,0,0,0.68);
  --color-black-94: rgba(0,0,0,0.94);

  /* Accent alpha variants */
  --color-accent-04: color-mix(in srgb, var(--color-accent) 4%, transparent);
  --color-accent-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-accent-15: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --color-accent-25: color-mix(in srgb, var(--color-accent) 25%, transparent);
  --color-accent-40: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --color-accent-82: color-mix(in srgb, var(--color-accent) 82%, transparent);

  /* App preview frame */
  --color-app-page-bg: var(--palette-charcoal-2);
  --color-phone-shell: #0a0a0a;
  --color-phone-border-1: #2a2a2a;
  --color-phone-border-2: #111111;
  --color-phone-border-3: #2e2e2e;
  --color-phone-button: #222222;
  --color-phone-screen: var(--palette-black);
  --color-phone-inner-border: #1a1a1a;

  /* Backward-compatible aliases used by existing CSS */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --line: var(--color-border);
  --muted: var(--color-muted);
  --text: var(--color-text);
  --accent: var(--color-accent);
  --accent-04: var(--color-accent-04);
  --accent-10: var(--color-accent-10);
  --accent-15: var(--color-accent-15);
  --accent-25: var(--color-accent-25);
  --accent-40: var(--color-accent-40);
}