/* =============================================================
   MC Quick — Colors & Type
   Design tokens for the Marvel Champions deckbuilder.
   Sourced from tailwind.config in source_repo/index.html
   and styles.css. Comic-book display type added on top.
   ============================================================= */

/* --- Fonts --------------------------------------------------- */
/* The live app uses the default Tailwind font-sans stack (no web
   fonts). For the "comic book" expression of the system we layer
   on Bangers + Bebas Neue for display. If those aren't available
   we fall back to system sans. SUBSTITUTION: No brand fonts were
   shipped — Bangers/Bebas Neue are nearest-match comic picks. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ========== COLORS ========================================== */

  /* Brand */
  --color-marvel:        #ec1d24;  /* Marvel red, primary accent */
  --color-marvel-ink:    #b81319;  /* deeper red for press states */

  /* Surfaces (dark mode is the ONLY mode) */
  --color-darker:        #0a0a0a;  /* app background */
  --color-dark:          #121212;  /* header / footer chrome */
  --color-card:          #1e1e1e;  /* card surface */
  --color-accent:        #2d2d2d;  /* bottom-sheet / elevated */
  --color-elevated:      #252525;  /* inline text panel */

  /* Borders / hairlines */
  --color-border:        #1f2937;  /* gray-800 */
  --color-border-strong: #374151;  /* gray-700 */
  --color-border-soft:   #333333;

  /* Foreground */
  --fg-1: #ffffff;            /* primary text */
  --fg-2: #e5e7eb;            /* gray-200 — body */
  --fg-3: #9ca3af;            /* gray-400 — secondary */
  --fg-4: #6b7280;            /* gray-500 — tertiary / labels */
  --fg-5: #4b5563;            /* gray-600 — very muted */
  --fg-disabled: #374151;

  /* ---- Aspects (the four Marvel Champions play-style colors) -- */
  --aspect-aggression:   #dc2626;  /* red-600 */
  --aspect-justice:      #eab308;  /* yellow-500 */
  --aspect-leadership:   #3b82f6;  /* blue-500 */
  --aspect-protection:   #16a34a;  /* green-600 */
  --aspect-basic:        #9ca3af;  /* gray-400 */
  --aspect-pool:         #ec4899;  /* pink-500 — Deadpool */
  --aspect-hero:         #ec1d24;  /* hero deck = marvel red */

  /* ---- Resources (card icons on card faces) ------------------ */
  --res-physical:        #DC2626;
  --res-energy:          #F3CE3D;
  --res-mental:          #2E69B3;
  --res-wild:            #4BB247;

  /* ---- Card stats (thwart / attack / defense / health) ------- */
  --stat-thw: #93c5fd;   /* blue-300 */
  --stat-atk: #fca5a5;   /* red-300 */
  --stat-def: #86efac;   /* green-300 */
  --stat-hp:  #d1d5db;   /* gray-300 */

  /* ---- Semantic states --------------------------------------- */
  --state-good:    #4ade80;   /* green-400 — deck legal */
  --state-warn:    #eab308;   /* yellow-500 — deck issues */
  --state-info:    #60a5fa;   /* blue-400 — collection warning */
  --state-bad:     #ef4444;   /* red-500 — destructive */
  --state-premium: #FFDD00;   /* BMC yellow */

  /* Tinted panels (used for inline callouts) */
  --panel-warn-bg:     rgba(234, 179, 8, 0.12);
  --panel-warn-border: rgba(202, 138, 4, 0.5);
  --panel-info-bg:     rgba(59, 130, 246, 0.12);
  --panel-info-border: rgba(29, 78, 216, 0.5);
  --panel-good-bg:     rgba(22, 163, 74, 0.10);
  --panel-good-border: rgba(22, 163, 74, 0.30);

  /* ========== TYPE ============================================ */

  /* Families */
  --font-display: 'Bangers', 'Impact', 'Haettenschweiler', sans-serif;     /* Kapow titles, hero banners */
  --font-impact:  'Bebas Neue', 'Impact', 'Arial Narrow Bold', sans-serif; /* condensed UI shouts */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Scale (mobile-first, matches live app) */
  --text-2xs: 9px;    /* nav labels, deck counts, tiny meta */
  --text-xs:  10px;   /* "x/50", pack names */
  --text-sm:  11px;   /* compact metadata */
  --text-base:12px;   /* card body copy */
  --text-md:  14px;   /* list rows */
  --text-lg:  16px;   /* body */
  --text-xl:  20px;   /* section titles */
  --text-2xl: 24px;   /* "SELECT IDENTITY" H1 in app */
  --text-3xl: 32px;
  --text-4xl: 48px;
  --text-display: 72px;   /* KAPOW / cover treatments */

  /* Weights — the app lives on bold/black */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Line-heights */
  --lh-tight: 1;
  --lh-snug:  1.2;
  --lh-body:  1.4;
  --lh-loose: 1.6;

  /* Tracking */
  --tracking-widest:  0.1em;     /* uppercase eyebrows */
  --tracking-wide:    0.05em;
  --tracking-tight:  -0.02em;    /* headings */
  --tracking-tighter: -0.04em;   /* H1 hero titles */

  /* ========== RADIUS ========================================= */
  --radius-xs: 4px;       /* rounded       (tailwind default) */
  --radius-sm: 6px;
  --radius-md: 8px;       /* rounded-lg    (buttons, inputs) */
  --radius-lg: 12px;      /* rounded-xl    (hero cards) */
  --radius-xl: 16px;      /* rounded-2xl   (bottom sheet)   */
  --radius-full: 9999px;  /* rounded-full  (pills, avatars) */

  /* ========== SPACING ======================================== */
  --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-12: 48px;

  /* ========== ELEVATION ====================================== */
  --shadow-inner:  inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-sm:     0 1px 2px 0 rgba(0,0,0,0.5);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.6), 0 2px 4px -2px rgba(0,0,0,0.5);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.7), 0 4px 6px -4px rgba(0,0,0,0.5);
  --shadow-marvel: 0 10px 40px -10px rgba(236, 29, 36, 0.45);
  --shadow-stat:   2px 2px 4px rgba(0,0,0,0.5);   /* bright stat chips on card art */

  /* ========== MOTION ========================================= */
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:  cubic-bezier(0.2, 0.8, 0.2, 1);

  /* active:scale-95 is used everywhere */
  --press-scale: 0.95;
}

/* =============================================================
   Semantic type classes — reach for these instead of vars.
   ============================================================= */
.mc-display   { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-wide);    text-transform: uppercase; line-height: var(--lh-snug);   font-size: var(--text-display); }
.mc-impact    { font-family: var(--font-impact);  font-weight: var(--weight-regular); letter-spacing: var(--tracking-wide);    text-transform: uppercase; line-height: var(--lh-tight);  font-size: var(--text-4xl); }
.mc-h1        { font-family: var(--font-sans);    font-weight: var(--weight-black);   letter-spacing: var(--tracking-tighter); text-transform: uppercase; line-height: var(--lh-tight);  font-size: var(--text-2xl); color: var(--fg-1); }
.mc-h2        { font-family: var(--font-sans);    font-weight: var(--weight-bold);    letter-spacing: var(--tracking-tight);   line-height: var(--lh-snug);   font-size: var(--text-xl);   color: var(--fg-1); }
.mc-h3        { font-family: var(--font-sans);    font-weight: var(--weight-bold);    letter-spacing: normal;                  line-height: var(--lh-snug);   font-size: var(--text-lg);   color: var(--fg-1); }
.mc-eyebrow   { font-family: var(--font-sans);    font-weight: var(--weight-bold);    letter-spacing: var(--tracking-widest);  text-transform: uppercase; line-height: var(--lh-tight);  font-size: var(--text-sm);   color: var(--fg-4); }
.mc-label     { font-family: var(--font-sans);    font-weight: var(--weight-bold);    letter-spacing: var(--tracking-widest);  text-transform: uppercase; line-height: var(--lh-tight);  font-size: var(--text-2xs);  color: var(--fg-4); }
.mc-body      { font-family: var(--font-sans);    font-weight: var(--weight-regular); line-height: var(--lh-body);   font-size: var(--text-md);   color: var(--fg-2); }
.mc-body-sm   { font-family: var(--font-sans);    font-weight: var(--weight-regular); line-height: var(--lh-body);   font-size: var(--text-base); color: var(--fg-3); }
.mc-meta      { font-family: var(--font-sans);    font-weight: var(--weight-medium);  line-height: var(--lh-tight);  font-size: var(--text-xs);   color: var(--fg-4); }
.mc-count     { font-family: var(--font-mono);    font-weight: var(--weight-bold);    font-size: var(--text-xs);   color: var(--fg-3); }

/* Tag-level defaults intentionally omitted — the live app uses Tailwind
   utility classes on every heading/body element, and blanket h1/h2/h3
   rules would collide with them. Reach for .mc-display, .mc-h1, etc.,
   or use Tailwind classes as before. */