/* LOCAL TEST COPY ONLY — the project already has this file; it is NOT part of the upload plan.
   Subset of Crafting Chaos Gaming colors_and_type.css covering the tokens the Salvo cards use. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --purple-700: #553C9A;
    --purple-600: #6B46C1;
    --purple-500: #8B5CF6;
    --purple-300: #C4B5FD;
    --purple-100: #EDE9FE;
    --purple-50:  #F5F3FF;
    --pink-600: #DB2777;
    --pink-500: #EC4899;
    --pink-300: #F9A8D4;
    --pink-100: #FCE7F3;
    --ember-600: #E0452F;
    --ember-500: #F4633A;
    --ember-400: #FF7A5C;
    --ember-300: #FFA98E;
    --ember-100: #FFE7DF;
    --slate-900: #0F172A;
    --slate-800: #1E293B;
    --slate-500: #64748B;
    --slate-400: #94A3B8;
    --slate-200: #E2E8F0;
    --slate-100: #F1F5F9;
    --slate-50:  #F8FAFC;
    --white:     #FFFFFF;
    --green:  #10B981;
    --blue:   #3B82F6;
    --amber:  #F59E0B;
    --red:    #EF4444;
    --cyan:   #06B6D4;
    --gradient-brand:  linear-gradient(135deg, #6B46C1, #EC4899);
    --gradient-deep:   linear-gradient(135deg, #553C9A, #6B46C1);
    --gradient-chaos:  linear-gradient(135deg, #8B5CF6, #EC4899, #F4633A);
    --gradient-bar:    linear-gradient(90deg, #6B46C1, #EC4899);
    --bg:            var(--slate-50);
    --bg-secondary:  var(--slate-100);
    --surface:       var(--white);
    --surface-tint:  var(--purple-50);
    --fg-1:  var(--slate-800);
    --fg-2:  var(--slate-500);
    --fg-3:  var(--slate-400);
    --fg-on-brand: var(--white);
    --brand:        var(--purple-600);
    --brand-strong: var(--purple-700);
    --brand-soft:   var(--purple-500);
    --accent:       var(--pink-500);
    --spark:        var(--ember-500);
    --border:        var(--slate-200);
    --border-strong: var(--slate-400);
    --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
    --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.5rem;
    --text-5xl:  3.5rem;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    800;
    --leading-tight: 1.1;
    --leading-snug:  1.4;
    --leading-body:  1.6;
    --leading-loose: 1.8;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --radius-sm:   6px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-pill: 999px;
    --shadow-light:  0 1px 3px 0 rgba(15,23,42,.10), 0 1px 2px 0 rgba(15,23,42,.06);
    --shadow-medium: 0 4px 6px -1px rgba(15,23,42,.10), 0 2px 4px -1px rgba(15,23,42,.06);
    --shadow-large:  0 10px 15px -3px rgba(15,23,42,.10), 0 4px 6px -2px rgba(15,23,42,.05);
    --shadow-brand:  0 8px 24px -6px rgba(107,70,193,.45);
    --transition: all 0.2s ease-in-out;
    --lift: translateY(-4px);
}