/* ============================================
   looksreal.ai — tokens.css
   Split from styles.css 2026-04-20 per css-restructure thread.
   ============================================ */
/* ============================================
   looksreal.ai — Brand Stylesheet v1
   Colors: Brand Profile v1
   Fonts: Space Grotesk + Geist Mono
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Geist+Mono:wght@300;400;500&display=swap');

:root {
  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Geist Mono', monospace;

  /* ===== BRAND ACCENTS (looksreal.ai, light-theme extras) ===== */
  --ember: #ff4d00;                   /* Primary brand — warm orange */
  --flame: #ff6b00;                   /* Brand hover */
  /* Legacy highlight brand #ffb800 removed 2026-04-20 (was dead, 0 uses) */

  /* Standard accent vocabulary aliases to brand */
  --accent:          var(--ember);
  --accent-hover:    var(--flame);
  --accent-backdrop: rgba(255, 77, 0, 0.16);

  /* ===== BACKGROUNDS (light theme) ===== */
  --bg-app:       #fafafa;            /* Page background */
  --bg-card:      #ffffff;            /* Topbar / panels / cards — pure white on light bg */
  --bg-item:      #f5f5f5;            /* Items within cards (pill tags, recessed elements) */
  --bg-elevated:  #f8f8f8;            /* Dropdowns, pill selectors, elevated surfaces */

  /* Dark overlays (light-theme inverse — for badges, lightbox, etc.) */
  --bg-overlay:        #1a1a1a;       /* Dark bg for shared badges, hover states */
  --bg-overlay-strong: #2a2a2a;       /* Stronger dark bg (lightbox prompt text bg) */
  --bg-overlay-deep:   #1a1a2e;       /* Deepest overlay — lightbox backdrop, 3D viewer bg */

  /* ===== TEXT ===== */
  --text-primary:    #0a0a0a;         /* Body / headings */
  --text-secondary:  #555;            /* Secondary body text */
  --text-helper:     #888;            /* Labels, hints, metadata */
  --text-disabled:   #999;            /* Placeholder, disabled */

  /* Legacy gray tiers — pending design consolidation (8 grays is a design smell).
     Used throughout for subtle-hierarchy accents; collapsing requires a design pass. */
  --text-strong:   #333;              /* Hover emphasis, between primary and secondary */
  --text-label:    #666;              /* Subtler label tier */
  --text-faint:    #aaa;              /* Faint gray */
  --text-ghost:    #bbb;              /* Ghost gray */
  --text-whisper:  #ccc;              /* Whisper gray */
  --text-dim:      #ddd;              /* Dim gray — barely visible */

  /* ===== SEMANTIC COLORS ===== */
  --color-success: #22c55e;
  --color-info:    #3b82f6;
  --color-error:   #ef4444;

  /* ===== BORDERS ===== */
  --border:         #e5e5e5;          /* Default border */
  --border-subtle:  #f0f0f0;          /* Subtle separator (less visible) */
  --border-light:   #d4d4d4;          /* More visible borders (scrollbars, etc.) */

  /* ===== LAYOUT ===== */
  --sidebar-width: 200px;
  --topbar-height: 50px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
}