/* 1up.gifts design tokens — primitive → semantic → component */

:root {
  /* ── Primitive ─────────────────────────────── */
  /* Green (growth, go, the playfield) */
  --green-300: #7ADE8F;
  --green-500: #3DBE5B;
  --green-600: #2FA84F;
  --green-700: #1F7A38;
  /* Coral (warmth, love, the giver) */
  --coral-400: #FF8A73;
  --coral-500: #FF6B57;
  --coral-600: #E8503C;
  /* Sunny yellow (coins, celebration) */
  --yellow-300: #FFE07A;
  --yellow-400: #FFD23F;
  --yellow-500: #F5B914;
  /* Sky blue (play, lightness) */
  --blue-300: #8FDCF5;
  --blue-400: #4CC9F0;
  /* Neutrals */
  --cream-50: #FFFBF2;
  --cream-100: #FFF5E1;
  --cream-200: #F9EACB;
  --ink-900: #1E2430;
  --ink-700: #3A4354;
  --ink-500: #6B7386;
  --white: #FFFFFF;

  --font-pixel: "Press Start 2P", monospace;
  --font-body: "Baloo 2", "Nunito", system-ui, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-pop: 0 4px 0 var(--ink-900);
  --shadow-card: 0 8px 24px rgba(30, 36, 48, 0.10);

  /* ── Semantic ──────────────────────────────── */
  --color-primary: var(--green-500);
  --color-primary-dark: var(--green-600);
  --color-primary-darker: var(--green-700);
  --color-accent: var(--coral-500);
  --color-accent-dark: var(--coral-600);
  --color-highlight: var(--yellow-400);
  --color-info: var(--blue-400);
  --color-bg: var(--cream-50);
  --color-bg-alt: var(--cream-100);
  --color-bg-band: var(--cream-200);
  --color-surface: var(--white);
  --color-text: var(--ink-900);
  --color-text-soft: var(--ink-700);
  --color-text-muted: var(--ink-500);

  /* ── Component ─────────────────────────────── */
  --button-bg: var(--color-accent);
  --button-bg-hover: var(--color-accent-dark);
  --button-fg: var(--white);
  --button-shadow: var(--shadow-pop);

  --button-secondary-bg: var(--color-surface);
  --button-secondary-fg: var(--color-text);

  --card-bg: var(--color-surface);
  --card-border: var(--ink-900);
  --card-shadow: var(--shadow-card);

  --badge-bg: var(--color-highlight);
  --badge-fg: var(--ink-900);

  --nav-bg: rgba(255, 251, 242, 0.92);

  --footer-bg: var(--ink-900);
  --footer-fg: var(--cream-100);
}