/**
 * RealEngine Design System
 * Base semantic tokens; TIDE-inspired palette applied via tide-tokens.css
 */

:root {
  /* ============================================
     BACKGROUNDS - Near-black with subtle warmth
     ============================================ */
  --bg-base: #09090b;
  --bg-primary: #0c0c0c;
  --bg-secondary: #111113;
  --bg-tertiary: #18181b;
  --bg-elevated: #1c1c1f;
  --bg-hover: #27272a;
  --bg-active: #2e2e32;

  /* ============================================
     TEXT - High contrast hierarchy
     ============================================ */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-disabled: #52525b;

  /* ============================================
     ACCENT - Ember orange (single accent)
     ============================================ */
  --accent: #e8542f;
  --accent-hover: #d44a28;
  --accent-muted: rgba(232, 84, 47, 0.15);
  --accent-subtle: rgba(232, 84, 47, 0.08);

  /* Legacy alias - for components still using old name */
  --accent-color: var(--accent);

  /* ============================================
     BORDERS - Subtle, functional
     ============================================ */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(232, 84, 47, 0.4);

  /* Legacy aliases */
  --border-color: var(--border-default);
  --border-light: var(--border-strong);

  /* ============================================
     SHADOWS - Minimal, functional
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Glass (refined in tide-tokens when loaded) */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-elevated: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 18px;

  /* ============================================
     BORDER RADIUS - Consistent scale
     ============================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Primary CTA (TIDE-style white pill); tide-tokens may refine */
  --btn-primary-bg: #f2f4f3;
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-fg: #0a120e;

  /* ============================================
     TYPOGRAPHY - Geist
     ============================================ */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Consolas, monospace;

  /* ============================================
     TRANSITIONS - Fast, no bounce
     ============================================ */
  --transition-fast: 100ms ease;
  --transition: 150ms ease;
  --transition-slow: 250ms ease;

  /* Legacy alias */
  --transition-fast-legacy: all 0.15s ease;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ============================================
     SEMANTIC COLORS
     ============================================ */
  --success: #22c55e;
  --success-muted: rgba(34, 197, 94, 0.15);
  --warning: #eab308;
  --warning-muted: rgba(234, 179, 8, 0.15);
  --error: #ef4444;
  --error-muted: rgba(239, 68, 68, 0.15);
  
  /* ============================================
     LEGACY COMPATIBILITY
     Keep these for components not yet migrated
     ============================================ */
  --hover-bg: var(--bg-hover);
  --input-bg: var(--bg-tertiary);
  --input-border: var(--border-default);
  --input-focus-border: var(--border-strong);
  --button-bg: var(--bg-tertiary);
  --button-hover: var(--bg-hover);

  /* Remove these gradients - use solid colors */
  --bg-gradient-primary: var(--bg-primary);
  --bg-gradient-card: var(--bg-secondary);
  --bg-gradient-input: var(--bg-tertiary);
  --accent-gradient: var(--accent);
}