/* Design tokens for IIL public-facing pages.
   Change --iil-accent (or any brand color) here to update site-wide.
   Existing app pages (theme.css) continue to work unaffected; migration
   to unified tokens is deferred cleanup. */

/* ===== SELF-HOSTED FONTS (latin subsets, Fontsource/OFL — see static/fonts/) ===== */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-500.ab4861869c91.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-600.49f2dd2d2132.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-700.f9e147a59a93.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400.da03732a27e1.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500.51205681a1ba.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600.2ede57db1a3a.woff2") format("woff2");
}

:root {
  /* ===== BRAND PALETTE ===== */
  --iil-purple-900: #1e1a4a;
  --iil-purple-800: #26215C;
  --iil-purple-700: #3C3489;
  --iil-purple-600: #534AB7;   /* Primary — brand purple */
  --iil-purple-500: #7F77DD;
  --iil-purple-300: #AFA9EC;
  --iil-purple-200: #CECBF6;
  --iil-purple-100: #EEEDFE;

  /* Accent — tennis green. Change this ONE VALUE to reskin the accent site-wide. */
  --iil-accent: #C8D93E;
  --iil-accent-hover: #B8C935;
  --iil-accent-soft: #EEF1CC;
  --iil-accent-ink: #2A3505;   /* Dark text color for use ON --iil-accent backgrounds */
  /* Theme-aware accent pair: a tinted surface and the text that reads on it.
     Use these (not -soft/-ink directly) wherever a component highlights in the
     accent, so light and dark both work from one place. */
  --iil-accent-wash: var(--iil-accent-soft);
  --iil-accent-strong: var(--iil-accent-ink);

  /* ===== SEMANTIC — LIGHT MODE ===== */
  --iil-bg: #FAFAF7;
  --iil-bg-2: #FFFFFF;
  --iil-bg-3: #F2F1EC;
  --iil-hero-start: var(--iil-purple-800);
  --iil-hero-end: var(--iil-purple-900);
  --iil-hero-text: #FFFFFF;
  --iil-hero-text-mute: var(--iil-purple-200);
  --iil-hero-text-dim: var(--iil-purple-300);
  --iil-text: #14121e;
  --iil-text-2: #3a3745;
  --iil-text-mute: #706c7a;
  --iil-text-dim: #a09ba8;
  --iil-hairline: rgba(20,18,30,0.09);
  --iil-hairline-2: rgba(20,18,30,0.15);
  --iil-card-hover: rgba(83,74,183,0.04);

  /* ===== TYPOGRAPHY ===== */
  --iil-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --iil-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ===== ANIMATION ===== */
  --iil-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --iil-duration-scroll: 0.9s;
}

html[data-theme="dark"] {
  --iil-bg: #0e0d1a;
  --iil-bg-2: #16142a;
  --iil-bg-3: #1e1a35;
  --iil-hero-start: #16142a;
  --iil-hero-end: #0e0d1a;
  --iil-text: #F4F3FA;
  --iil-text-2: #d0cddb;
  --iil-text-mute: #9E9BB8;
  --iil-text-dim: #6a6580;
  --iil-hairline: rgba(255,255,255,0.08);
  --iil-hairline-2: rgba(255,255,255,0.15);
  --iil-card-hover: rgba(127,119,221,0.06);
  /* On dark, the accent itself is the readable colour and the wash is a low
     tint of it — derived from --iil-accent so a reskin still needs one edit. */
  --iil-accent-wash: color-mix(in srgb, var(--iil-accent) 14%, transparent);
  --iil-accent-strong: var(--iil-accent);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}