/* =============================================
   GForce — Design Tokens (variables.css)
   Mobile-first: base = mobile, overrides for tablet/desktop
   ============================================= */

:root {
  /* ── Primary Colors ── */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #ff0000;

  /* ── Secondary Colors ── */
  --color-dark-orange: #b50500;
  --color-orange: #ff6e38;
  --color-soft-orange: #ffd9ba;
  --color-dark-green: #005151;
  --color-green: #54d9ab;
  --color-soft-green: #bdf5d4;
  --color-dark-pink: #93003e;
  --color-pink: #ff6e87;
  --color-soft-pink: #ffd4d9;
  --color-dark-purple: #5c21d6;
  --color-purple: #995efc;
  --color-soft-purple: #f0bdff;
  --color-dark-blue: #004fbd;
  --color-blue: #739eff;
  --color-soft-blue: #d8defb;
  --color-dark-yellow: #cc6b00;
  --color-yellow: #ffb047;
  --color-soft-yellow: #fff2b0;

  /* ── Neutral Tints ── */
  --color-gray-100: #e6e6e6;
  --color-gray-200: #cccccc;
  --color-gray-300: #b3b3b3;
  --color-gray-400: #999999;
  --color-gray-500: #808080;
  --color-gray-600: #666666;
  --color-gray-700: #4d4d4d;
  --color-gray-800: #333333;
  --color-gray-900: #1a1a1a;

  /* ── Red Tints ── */
  --color-red-100: #f4f1f1;

  /* ── Typography ── */
  --font-display: 'Funnel Display', serif;
  --font-sans: 'Funnel Sans', sans-serif;

  /* ── Spacing ── */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 40px;
  --space-2xl: 60px;

  /* ── Layout ── */
  --container-width: 1280px;
  --padding-mobile: 20px;
  --padding-tablet: 40px;
  --padding-desktop: 40px;
  --gap-mobile: 8px;
  --gap-tablet: 10px;
  --gap-desktop: 10px;

  /* ── Grid ── */
  --gutter: var(--padding-mobile);
  --col-gap: var(--gap-mobile);
}

/* Tablet+ */
@media (min-width: 768px) {
  :root {
    --gutter: var(--padding-tablet);
    --col-gap: var(--gap-tablet);
  }
}

/* Desktop */
@media (min-width: 1280px) {
  :root {
    --gutter: var(--padding-desktop);
    --col-gap: var(--gap-desktop);
  }
}