/* ============================================================
   Interaction Works — Design Tokens
   Foundations: color + type, as CSS custom properties.
   ============================================================ */

/* Aktiv Grotesk is a licensed face (Dalton Maag). For preview we
   fall back to Hanken Grotesk on Google Fonts, which is the
   closest open metrics match. Replace with the licensed face on
   production. Anton is the display face (Google Fonts). */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Color · Brand ---------- */
  --iw-green:        #16EB87; /* primary brand green */
  --iw-green-deep:   #18BA6E; /* darker shadow / pressed */
  --iw-green-mint:   #A5FBD3; /* light highlight / tint */

  /* ---------- Color · Neutrals ---------- */
  --iw-white:        #FFFFFF;
  --iw-black:        #000000;
  --iw-gray-900:     #18191B; /* near-black surface */
  --iw-gray-800:     #292D30; /* surface raised */
  --iw-gray-700:     #3C4147; /* surface raised 2 / borders */
  --iw-gray-600:     #55585F; /* dividers / muted text */
  --iw-gray-400:     #8A8E95; /* placeholder / disabled */
  --iw-gray-200:     #C9CCD1; /* subtle UI line on light bg */
  --iw-gray-100:     #EDEEF0; /* light surface */

  /* ---------- Color · Semantic (dark UI default) ---------- */
  --iw-bg:           var(--iw-black);
  --iw-bg-raised:    var(--iw-gray-800);
  --iw-bg-raised-2:  var(--iw-gray-700);
  --iw-fg:           var(--iw-white);
  --iw-fg-muted:     var(--iw-white);
  --iw-fg-subtle:    var(--iw-gray-600);
  --iw-border:       var(--iw-gray-700);
  --iw-border-soft:  var(--iw-gray-800);
  --iw-accent:       var(--iw-green);
  --iw-accent-press: var(--iw-green-deep);
  --iw-accent-tint:  var(--iw-green-mint);

  /* ---------- Type · Families ---------- */
  --iw-font-display: "Anton", "Aktiv Grotesk Extended", "Impact", sans-serif;
  --iw-font-sans:    "Aktiv Grotesk", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --iw-font-mono:    ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* ---------- Type · Scale (1.25 minor third) ---------- */
  --iw-text-xs:   12px;
  --iw-text-sm:   14px;
  --iw-text-base: 16px;
  --iw-text-md:   18px;
  --iw-text-lg:   22px;
  --iw-text-xl:   28px;
  --iw-text-2xl:  36px;
  --iw-text-3xl:  48px;
  --iw-text-4xl:  64px;
  --iw-text-5xl:  88px;

  /* ---------- Type · Weights ---------- */
  --iw-weight-light:  300;
  --iw-weight-reg:    400;
  --iw-weight-med:    500;
  --iw-weight-semi:   600;
  --iw-weight-bold:   700;

  /* ---------- Spacing (4px base) ---------- */
  --iw-space-1: 4px;
  --iw-space-2: 8px;
  --iw-space-3: 12px;
  --iw-space-4: 16px;
  --iw-space-5: 24px;
  --iw-space-6: 32px;
  --iw-space-7: 48px;
  --iw-space-8: 64px;
  --iw-space-9: 96px;

  /* ---------- Radii ---------- */
  --iw-radius-sm:   6px;
  --iw-radius-md:   10px;
  --iw-radius-lg:   16px;
  --iw-radius-xl:   24px;
  --iw-radius-pill: 999px;

  /* ---------- Shadows / Elevation ---------- */
  --iw-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --iw-shadow-md:  0 6px 16px rgba(0,0,0,.45);
  --iw-shadow-lg:  0 24px 48px rgba(0,0,0,.55);
  --iw-glow:       0 0 0 1px rgba(22,235,135,.35), 0 8px 32px rgba(22,235,135,.25);

  /* ---------- Motion ---------- */
  --iw-ease:       cubic-bezier(.2, .8, .2, 1);
  --iw-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --iw-dur-fast:   120ms;
  --iw-dur-med:    220ms;
  --iw-dur-slow:   400ms;
}

/* ---------- Semantic text styles ---------- */
.iw-display {
  font-family: var(--iw-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
}
.iw-h1 { font-family: var(--iw-font-sans); font-weight: 700; font-size: var(--iw-text-3xl); line-height: 1.05; letter-spacing: -0.02em; }
.iw-h2 { font-family: var(--iw-font-sans); font-weight: 700; font-size: var(--iw-text-2xl); line-height: 1.1;  letter-spacing: -0.015em; }
.iw-h3 { font-family: var(--iw-font-sans); font-weight: 600; font-size: var(--iw-text-xl);  line-height: 1.2;  letter-spacing: -0.01em; }
.iw-h4 { font-family: var(--iw-font-sans); font-weight: 600; font-size: var(--iw-text-lg);  line-height: 1.25; }
.iw-body    { font-family: var(--iw-font-sans); font-weight: 400; font-size: var(--iw-text-base); line-height: 1.5; }
.iw-body-sm { font-family: var(--iw-font-sans); font-weight: 400; font-size: var(--iw-text-sm);   line-height: 1.5; }
.iw-eyebrow {
  font-family: var(--iw-font-sans);
  font-weight: 600;
  font-size: var(--iw-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.iw-mono { font-family: var(--iw-font-mono); font-size: var(--iw-text-sm); letter-spacing: 0.02em; }

/* Material Icons Outlined — load via CDN where used */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}