/**
 * Design System Variables
 * =======================
 * Central design tokens for the Painting App v2
 * All values defined as CSS custom properties for consistency
 */

:root {
  /* ─────────────────────────────────────────────────────────────
   * COLOR PALETTE - Primary Colors
   * ───────────────────────────────────────────────────────────── */

  /* Primary - Green (actions, success, positive states) */
  --color-primary: #4CAF50;
  --color-primary-light: #81C784;
  --color-primary-dark: #388E3C;

  /* Secondary - Blue (info, links, interactive elements) */
  --color-secondary: #2196F3;
  --color-secondary-light: #64B5F6;
  --color-secondary-dark: #1976D2;

  /* Accent - Purple (draft mode, special states) */
  --color-accent: #673AB7;
  --color-accent-light: #9575CD;
  --color-accent-dark: #512DA8;

  /* Warning - Orange (contested, paused, attention needed) */
  --color-warning: #FF9800;
  --color-warning-light: #FFB74D;
  --color-warning-dark: #F57C00;

  /* Error - Red (urgent, done, destructive actions) */
  --color-error: #F44336;
  --color-error-light: #E57373;
  --color-error-dark: #D32F2F;

  /* ─────────────────────────────────────────────────────────────
   * NEUTRAL SCALE - Grays
   * ───────────────────────────────────────────────────────────── */
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* ─────────────────────────────────────────────────────────────
   * FAMILY COLORS - For Rating Bars
   * ───────────────────────────────────────────────────────────── */
  --color-annie: #FF6B6B;  /* Coral red */
  --color-rob:   #4ECDC4;  /* Teal */
  --color-trip:  #45B7D1;  /* Sky blue */
  --color-ed:    #96CEB4;  /* Sage green */

  /* ─────────────────────────────────────────────────────────────
   * SEMANTIC COLORS - UI States
   * ───────────────────────────────────────────────────────────── */
  --color-success: var(--color-primary);
  --color-info: var(--color-secondary);
  --color-draft: var(--color-accent);
  --color-contested: var(--color-warning);
  --color-urgent: var(--color-error);

  /* Background colors */
  --color-bg: #FFFFFF;
  --color-bg-alt: var(--gray-50);
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;

  /* Text colors */
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: #FFFFFF;

  /* Border colors */
  --color-border: var(--gray-300);
  --color-border-light: var(--gray-200);

  /* ─────────────────────────────────────────────────────────────
   * TYPOGRAPHY
   * ───────────────────────────────────────────────────────────── */

  /* Font family */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono',
                      'Droid Sans Mono', 'Source Code Pro', monospace;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  48px;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ─────────────────────────────────────────────────────────────
   * SPACING - 4px Base Unit
   * ───────────────────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─────────────────────────────────────────────────────────────
   * SHADOWS
   * ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-none: none;

  /* ─────────────────────────────────────────────────────────────
   * BORDER RADIUS
   * ───────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────────
   * TRANSITIONS
   * ───────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Specific transition properties */
  --transition-colors: color var(--transition-fast),
                       background-color var(--transition-fast),
                       border-color var(--transition-fast);
  --transition-transform: transform var(--transition-base);
  --transition-opacity: opacity var(--transition-base);
  --transition-shadow: box-shadow var(--transition-base);

  /* ─────────────────────────────────────────────────────────────
   * Z-INDEX SCALE
   * ───────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ─────────────────────────────────────────────────────────────
   * BREAKPOINTS (for reference - use in media queries)
   * ───────────────────────────────────────────────────────────── */
  /*
   * --breakpoint-sm:  640px
   * --breakpoint-md:  768px
   * --breakpoint-lg:  1024px
   * --breakpoint-xl:  1280px
   * --breakpoint-2xl: 1536px
   */

  /* ─────────────────────────────────────────────────────────────
   * CONTAINER WIDTHS
   * ───────────────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}