/*
 * AISTHETIC OS — Design Tokens
 * ─────────────────────────────────────────────────────────────────────────────
 * Single source of truth for all CSS custom properties used across the OS.
 * Import this file first in every page's stylesheet.
 *
 * Usage in a page CSS:
 *   @import url('../../shared/css/tokens.css');
 *
 * Or in HTML (before the page stylesheet):
 *   <link rel="stylesheet" href="../../shared/css/tokens.css">
 *   <link rel="stylesheet" href="page.css">
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --bg:           #050505;
  --bg-grain:     #07070a;

  /* ── Surfaces (elevation scale: 1 = lowest, 4 = highest) ─────────────── */
  --surface-1:    #0d0d10;
  --surface-2:    #141418;
  --surface-3:    #1b1b20;
  --surface-4:    #22222a;
  --surface-hover:#1f1f26;

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border:         #25252b;
  --border-bright:  #353540;
  --border-violet:  rgba(124, 58, 237, 0.32);

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-1:    #fafafa;
  --text-2:    #c6c6cc;
  --text-3:    #8e8e96;
  --text-mute: #5a5a64;
  --text-faint:#3e3e46;

  /* ── Brand / Accent — Violet scale ──────────────────────────────────── */
  --violet-1:    #7c3aed;
  --violet-2:    #a78bfa;
  --violet-3:    #c4b5fd;
  --violet-deep: #4c1d95;
  --violet-wash: rgba(124, 58, 237, 0.10);
  --violet-glow: rgba(167, 139, 250, 0.35);

  /* ── Semantic status ─────────────────────────────────────────────────── */
  --ok:   #84cc16;
  --warn: #f59e0b;
  --err:  #ef4444;
  --info: #60a5fa;

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --grad-cta:       linear-gradient(135deg, #e91e63 0%, #7c5cff 100%);
  --grad-cta-hover: linear-gradient(135deg, #ff3d88 0%, #a28bfa 100%);
  --grad-accent:    linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  /* Proxima Nova is the licensed production font. Montserrat is the free fallback. */
  --font-body:    'Proxima Nova', 'Gotham', 'Avenir Next', 'Montserrat', sans-serif;
  --font-display: 'Poppins', 'Proxima Nova', 'Gotham', 'Montserrat', sans-serif;
  --font-mono:    'Proxima Nova', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Border radii ────────────────────────────────────────────────────── */
  --radius:      8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Layout dimensions ───────────────────────────────────────────────── */
  --rail-w:       68px;
  --side-w:       340px;
  --topbar-h:     60px;
  --statusbar-h:  42px;

  /* ── Interactive chip backgrounds ────────────────────────────────────── */
  --chip-bg:       #2a2a32;
  --chip-bg-hover: #34343c;

  /* ── Per-flow accent palette ─────────────────────────────────────────── */
  /* Each production flow gets a distinct hue + wash + soft glow triple.   */
  --c-presentation:       #7c3aed;
  --c-presentation-wash:  rgba(124, 58, 237, 0.14);
  --c-presentation-soft:  rgba(124, 58, 237, 0.04);

  --c-website:       #10b981;
  --c-website-wash:  rgba(16, 185, 129, 0.14);
  --c-website-soft:  rgba(16, 185, 129, 0.04);

  --c-video:       #3b82f6;
  --c-video-wash:  rgba(59, 130, 246, 0.14);
  --c-video-soft:  rgba(59, 130, 246, 0.04);

  --c-fashion:       #ec4899;
  --c-fashion-wash:  rgba(236, 72, 153, 0.14);
  --c-fashion-soft:  rgba(236, 72, 153, 0.04);

  --c-bulk:       #f59e0b;
  --c-bulk-wash:  rgba(245, 158, 11, 0.14);
  --c-bulk-soft:  rgba(245, 158, 11, 0.04);

  --c-imagegen:       #a855f7;
  --c-imagegen-wash:  rgba(168, 85, 247, 0.14);
  --c-imagegen-soft:  rgba(168, 85, 247, 0.04);

  --c-canvas:       #14b8a6;
  --c-canvas-wash:  rgba(20, 184, 166, 0.14);
  --c-canvas-soft:  rgba(20, 184, 166, 0.04);

  --c-character:       #fb7185;
  --c-character-wash:  rgba(251, 113, 133, 0.14);
  --c-character-soft:  rgba(251, 113, 133, 0.04);
}

/* ── Light theme overrides ───────────────────────────────────────────────── */
/* Applied via body.theme-light (os-home convention).                        */
/* Other pages use body.light-mode — both selectors provided for parity.     */
body.theme-light,
body.light-mode {
  --bg:           #fafafa;
  --bg-grain:     #ffffff;
  --surface-1:    #ffffff;
  --surface-2:    #f4f4f6;
  --surface-3:    #eeeef1;
  --surface-4:    #e6e6ea;
  --surface-hover:#f0f0f4;
  --border:        #e3e3e8;
  --border-bright: #d4d4dc;
  --text-1:    #0d0d10;
  --text-2:    #38383e;
  --text-3:    #6a6a72;
  --text-mute: #95959c;
  --text-faint:#c0c0c6;
  --chip-bg:       #ffffff;
  --chip-bg-hover: #f4f4f6;
  --violet-wash:   rgba(76, 29, 149, 0.10);
}