/**
 * CardRelics Master Design Tokens
 * Clean, modern, high-converting light aesthetic with signature vibrant orange-red accents
 */

:root {
  /* Brand Core Palette */
  --cr-primary: #FF4722;
  --cr-primary-hover: #E63B17;
  --cr-primary-active: #D0300F;
  --cr-primary-subtle: #FFF1EE;

  --cr-dark: #0F172A;
  --cr-dark-surface: #0B0F19;
  --cr-slate-900: #0F172A;
  --cr-slate-800: #1E293B;
  --cr-slate-700: #334155;
  --cr-slate-600: #475569;
  --cr-slate-500: #64748B;
  --cr-slate-400: #94A3B8;
  --cr-slate-300: #CBD5E1;
  --cr-slate-200: #E2E8F0;
  --cr-slate-100: #F1F5F9;
  --cr-slate-50:  #F8FAFC;
  --cr-white:     #FFFFFF;

  /* Conversion & Feedback Accents */
  --cr-green: #10B981;
  --cr-green-subtle: #ECFDF5;
  --cr-amber: #F59E0B;
  --cr-red: #EF4444;
  --cr-red-subtle: #FEF2F2;

  /* Typography */
  --cr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Shadows */
  --cr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --cr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* Radii */
  --cr-radius-sm: 6px;
  --cr-radius-md: 8px;
  --cr-radius-lg: 12px;
  --cr-radius-full: 9999px;

  /* Layout */
  --cr-max-width: 1440px;
}