/* ============================================================
   INFINITY CARD GAME — Design Tokens
   Fonte da verdade: HANDOFF.md
   Para trocar nome: altere --brand-name em config.js
   ============================================================ */

:root {
  /* Background */
  --bg:            #07080D;
  --surface:       #0D1018;
  --card:          #121622;
  --graphite:      #1C2230;

  /* Text */
  --text:          #F4F6FA;
  --text-2:        #A8B0C0;
  --text-3:        #6E7689;

  /* Border */
  --border:        rgba(255, 255, 255, 0.08);
  --border-hover:  rgba(61, 123, 255, 0.4);

  /* Accent */
  --accent:        #3D7BFF;
  --accent-hover:  #5A8EFF;
  --violet:        #7B4DFF;
  --silver:        #D8DEE9;
  --success:       #1FA855;
  --danger:        #FF4D4D;
  --warning:       #F5A623;

  /* Gradients */
  --gradient-holo: linear-gradient(
    135deg,
    rgba(61, 123, 255, 0.12) 0%,
    rgba(123, 77, 255, 0.10) 40%,
    rgba(216, 222, 233, 0.06) 70%,
    rgba(61, 123, 255, 0.08) 100%
  );
  --gradient-accent: linear-gradient(135deg, #3D7BFF 0%, #7B4DFF 100%);
  --gradient-card:   linear-gradient(180deg, #121622 0%, #0D1018 100%);

  /* Shadows */
  --shadow-cta:       0 14px 34px -14px rgba(61, 123, 255, 0.8);
  --shadow-card-hover: 0 20px 44px -22px rgba(61, 123, 255, 0.55);
  --shadow-card:      0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-modal:     0 32px 80px rgba(0, 0, 0, 0.7);

  /* Typography */
  --font-title:  'Space Grotesk', sans-serif;
  --font-body:   'Manrope', sans-serif;
  --font-label:  'Chakra Petch', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  /* Font sizes */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Border radius */
  --radius-sm:  6px;
  --radius-md:  10px;  /* buttons, inputs */
  --radius-lg:  14px;  /* cards */
  --radius-xl:  18px;  /* big blocks */
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* Spacing */
  --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;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(16px, 4vw, 40px);
  --header-h:      68px;

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-drawer:  400;
  --z-modal:   600;
  --z-toast:   800;
  --z-top:     1000;

  /* Transitions */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1);
  --t-fast:    150ms;
  --t-normal:  220ms;
  --t-slow:    350ms;

  /* Breakpoints (reference — used in JS) */
  --bp-mobile:  940px;
  --bp-tablet:  768px;
}