/* ============================================
   VARIABLES.CSS — CSS Custom Properties
   Vaivox Design System
   ============================================ */

:root {
  --bg:      #fafbfc;      /* Soft Light White */
  --surface: rgba(255, 255, 255, 0.75); /* Glass surface */
  --surface2:#ffffff;
  --border:  rgba(0, 0, 0, 0.05);
  --border2: rgba(0, 0, 0, 0.08);
  --accent:  #c8a550;
  --accent2: #a07830;
  --orange:  #ff7a18;
  --green:   #10b981;
  --text:    #1e293b;      /* Elegant dark ink for light mode */
  --muted:   #64748b;
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'Inter', 'Plus Jakarta Sans', sans-serif;
  --r:       8px;
  --glow:    0 0 32px rgba(200,165,80,0.12);
}

@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}