/* ==========================================================================
   GPU Landing — Design Tokens
   ========================================================================== */

/*
   Breakpoints (CSS does not support variables in @media):

   md:  768px   — Tablets
   lg:  1024px  — Laptops / small desktops

   Usage:
   @media (min-width: 768px)  { ... }  — tablet+
   @media (min-width: 1024px) { ... }  — desktop+
*/

:root {

  /* ========================================================================
     Colors
     ======================================================================== */

  /* White */
  --w-100: #FFFFFF;
  --w-90: rgba(255, 255, 255, 0.9);
  --w-40: rgba(255, 255, 255, 0.4);
  --w-10: rgba(255, 255, 255, 0.1);
  --w-5: rgba(255, 255, 255, 0.05);

  /* Gray — #DEE1E9 */
  --gr-100: #DEE1E9;
  --gr-90: rgba(222, 225, 233, 0.9);
  --gr-80: rgba(222, 225, 233, 0.8);
  --gr-60: rgba(222, 225, 233, 0.6);
  --gr-50: rgba(222, 225, 233, 0.5);
  --gr-40: rgba(222, 225, 233, 0.4);
  --gr-30: rgba(222, 225, 233, 0.3);

  /* Dark Gray — #30374A */
  --dark-gr-100: #30374A;
  --dark-gr-50: rgba(48, 55, 74, 0.5);

  /* Green — #00E676 */
  --green-100: #00E676;
  --green-30: rgba(0, 230, 118, 0.3);
  --green-10: rgba(0, 230, 118, 0.1);

  /* Dark Blue */
  --dark-blue: #17132F;

  /* Blue — #4463EE */
  --blue-100: #4463EE;
  --blue-30: rgba(68, 99, 238, 0.3);
  --blue-15: rgba(68, 99, 238, 0.15);
  --blue-5: rgba(68, 99, 238, 0.05);

  /* Pink */
  --pink: #F763A3;

  /* Light Blue */
  --light-blue: #879CF9;

  /* ========================================================================
     Spacing
     ======================================================================== */

  --s-0: 0px;
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-14: 14px;
  --s-16: 16px;
  --s-18: 18px;
  --s-20: 20px;
  --s-22: 22px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-36: 36px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-72: 72px;
  --s-80: 80px;
  --s-100: 100px;
  --s-120: 120px;
  --s-140: 140px;
  --s-160: 160px;
  --s-200: 200px;
  --s-250: 250px;
  --s-300: 300px;

  /* ========================================================================
     Letter Spacing
     ======================================================================== */

  --ls-n5: -5px;
  --ls-n4: -4px;
  --ls-n3: -3px;
  --ls-n2: -2px;
  --ls-n1: -1px;
  --ls-n075: -0.75px;
  --ls-n05: -0.5px;
  --ls-05: 0.5px;
  --ls-075: 0.75px;
  --ls-1: 1px;

  /* ========================================================================
     Typography
     ======================================================================== */

  --font-sans: 'Onest', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}