:root {
  --pique-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pique-font-serif: "Georgia", Cambria, "Times New Roman", Times, serif;
  --pique-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e2e8f0;
  --color-border-subtle: #edf2f7;
  
  --color-text-main: #0f172a;
  --color-text-muted: #475569;
  --color-text-faint: #64748b;
  
  --color-primary: #0284c7;
  --color-primary-dark: #0369a1;
  --color-primary-light: #e0f2fe;
  
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  
  --color-sidewalk: #e0e7ff;
  --color-sidewalk-stroke: #6366f1;
  --color-path: #ecfdf5;
  --color-path-stroke: #059669;
  --color-road: #f1f5f9;
  --color-road-stroke: #64748b;
  --color-trail: #fef3c7;
  --color-trail-stroke: #b45309;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b1120;
    --color-surface: #131d31;
    --color-surface-raised: #1e293b;
    --color-border: #334155;
    --color-border-subtle: #1e293b;
    
    --color-text-main: #f8fafc;
    --color-text-muted: #cbd5e1;
    --color-text-faint: #94a3b8;
    
    --color-primary: #38bdf8;
    --color-primary-dark: #0284c7;
    --color-primary-light: #082f49;
    
    --color-warning: #fbbf24;
    --color-warning-light: #451a03;
    --color-danger: #f87171;
    --color-danger-light: #450a0a;
    --color-success: #4ade80;
    --color-success-light: #052e16;
    
    --color-sidewalk: #1e1e38;
    --color-sidewalk-stroke: #818cf8;
    --color-path: #064e3b;
    --color-path-stroke: #34d399;
    --color-road: #1e293b;
    --color-road-stroke: #94a3b8;
    --color-trail: #3b280c;
    --color-trail-stroke: #d97706;
  }
}