/* ============================================
   CSS Custom Properties — Venue OS Design System
   ============================================ */

:root {
  /* ---- Backgrounds ---- */
  --color-bg:        #000000;
  --color-surface:   #1A1A1A;
  --color-border:    #333333;
  --color-muted:     #424242;

  /* ---- Text ---- */
  --color-text:      #FFFFFF;
  --color-text-dim:  #B0B0B0;

  /* ---- Accent — Cyberpunk / Neon ---- */
  --color-primary:   #00E5FF;
  --color-success:   #00E676;
  --color-danger:    #FF1744;
  --color-warning:   #FFD600;

  /* ---- Fonts ---- */
  --font-ui:     -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Type Scale ---- */
  --text-xs:     14px;
  --text-sm:     16px;
  --text-md:     18px;
  --text-lg:     24px;
  --text-xl:     32px;
  --text-2xl:    48px;

  /* ---- Spacing (multiples of 4px) ---- */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-6:     24px;
  --space-8:     32px;
  --space-12:    48px;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 50%;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  /* ---- Z-Index Layers ---- */
  --z-base:      1;
  --z-sidebar:   100;
  --z-modal:     200;
  --z-toast:     300;
  --z-overlay:   400;

  /* ---- Tap Target Sizes ---- */
  --tap-min:     48px;
  --tap-preferred: 60px;

  /* ---- Category Colors (for POS grid) ---- */
  --cat-speed-rail:  #6A1B9A;
  --cat-beer:        #F57F17;
  --cat-wine:        #880E4F;
  --cat-cocktails:   #00695C;
  --cat-food:        #BF360C;
  --cat-other:       #37474F;
}