/* ============================================
   ICAN Brand Tokens — shared across all variants
   Source: apps/ican-mx/specs/content.md §1
   Do not override per-variant; extend instead.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand palette — sampled from ICAN_Logo_Horizontal_DarkGreen.png */
  --ican-green: #163029;
  --ican-green-dark: #0F1F1B;
  --ican-green-light: #1F4339;

  /* Derived supporting palette */
  --ican-sage: #4A7C6A;
  --ican-sage-pale: #8FB5A4;
  --ican-sage-mist: #E8F0EC;
  --ican-cream: #F5F2EC;
  --ican-cream-warm: #EDE7DA;
  --ican-ink: #1A1A1A;
  --ican-text: #2C2C2C;
  --ican-muted: #6B6B6B;
  --ican-white: #FFFFFF;

  /* Semantic aliases (variants may rebind these) */
  --brand: var(--ican-green);
  --brand-dark: var(--ican-green-dark);
  --brand-light: var(--ican-green-light);
  --bg: var(--ican-white);
  --bg-alt: var(--ican-sage-mist);
  --surface: var(--ican-white);
  --text: var(--ican-text);
  --text-heading: var(--ican-ink);
  --text-muted: var(--ican-muted);
  --accent: var(--ican-sage);

  /* Fonts */
  --font-montserrat: 'Montserrat', system-ui, sans-serif;
  --font-poppins: 'Poppins', system-ui, sans-serif;
  --font-roboto: 'Roboto', system-ui, sans-serif;
  --font-roboto-slab: 'Roboto Slab', Georgia, serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Container */
  --container-max: 1200px;
  --container-narrow: 800px;
}

/* Minimal reset shared by all variants */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* JS-gated reveal: content visible by default, only hidden when JS can animate */
/* Without .js class (JS failed), all [data-reveal] and [data-split] stay visible */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
.js [data-split] .word { transform: translateY(110%); opacity: 0; }
body {
  margin: 0;
  font-family: var(--font-roboto);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }