/* ==========================================================================
   GMM — Good Message Media — Redesign: Hybrid Grid Editorial
   Design Tokens & Base
   ========================================================================== */

/* — Fonts: Cabinet Grotesk + General Sans + Satoshi (Fontshare) + Instrument Serif (Google, fallback) — */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=general-sans@400,500,600,700&f[]=cabinet-grotesk@400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* — Reset — */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  font-family: 'General Sans', 'Satoshi', sans-serif;
  font-weight: 400;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* — Design Tokens — */
:root {
  /* Typography Scale */
  --text-xs:   clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.3vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
  --text-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
  --text-xl:   clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
  --text-hero: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);

  /* Font families */
  --font-display: 'Cabinet Grotesk', sans-serif;
  --font-body:    'General Sans', sans-serif;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #8B5CF6 0%, #D946EF 50%, #EC4899 100%);
  --gradient-brand-90: linear-gradient(90deg, #8B5CF6, #D946EF, #EC4899);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Border radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.10);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Brand / Category Colors */
  --color-kindness:    #EC4899;
  --color-community:   #10B981;
  --color-innovation:  #6366F1;
  --color-resilience:  #F59E0B;

  /* Category Gradients */
  --kindness-gradient: linear-gradient(90deg, #EC4899, #FB7185);
  --innovation-gradient: linear-gradient(90deg, #3B82F6, #6366F1);
  --community-gradient: linear-gradient(90deg, #10B981, #34D399);
  --resilience-gradient: linear-gradient(90deg, #F59E0B, #F97316);

  /* Highlighter Colors */
  --hl-yellow:  rgba(253, 224, 71, 0.45);
  --hl-green:   rgba(134, 239, 172, 0.40);
  --hl-peach:   rgba(253, 186, 116, 0.40);
  --hl-pink:    rgba(251, 146, 180, 0.35);
  --hl-blue:    rgba(147, 197, 253, 0.35);

  /* Container */
  --container-max: 1200px;
  --container-padding: clamp(var(--space-4), 4vw, var(--space-8));
}

/* — Light mode (default) — */
:root,
[data-theme="light"] {
  --color-bg:         #F5F5F7;
  --color-surface:    #FFFFFF;
  --color-text:       #1a1a2e;
  --color-text-muted: #4a4542;
  --color-text-light: #9CA3AF;
  --color-border:     #E5E5EA;
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-card-bg:    #FFFFFF;
  --color-number:     rgba(0, 0, 0, 0.06);
  color-scheme: light;
}

/* — Dark mode — */
[data-theme="dark"] {
  --color-bg:         #141413;
  --color-surface:    #1e1e1c;
  --color-text:       #F5F5F4;
  --color-text-muted: #a8a29e;
  --color-text-light: #78716c;
  --color-border:     rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-card-bg:    #1e1e1c;
  --color-number:     rgba(255, 255, 255, 0.04);

  --hl-yellow:  rgba(253, 224, 71, 0.25);
  --hl-green:   rgba(134, 239, 172, 0.20);
  --hl-peach:   rgba(253, 186, 116, 0.22);
  --hl-pink:    rgba(251, 146, 180, 0.20);
  --hl-blue:    rgba(147, 197, 253, 0.20);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.3);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.35);
  color-scheme: dark;
}

/* — Base styles — */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* — Selection — */
::selection {
  background: var(--hl-yellow);
  color: var(--color-text);
}