@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* AICSOL brand system. Shared by the React site and standalone legal pages.
   Forest/green come from the logo; lime is an accent, never body text on white. */
:root {
  color-scheme: light;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --background: 80 27% 97%;
  --foreground: 153 38% 16%;
  --card: 0 0% 100%;
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: 154 100% 24%;
  --primary-foreground: 0 0% 100%;
  --secondary: 95 32% 92%;
  --secondary-foreground: var(--foreground);
  --muted: var(--secondary);
  --muted-foreground: 144 11% 34%;
  --accent: 95 70% 73%;
  --accent-foreground: var(--foreground);
  --destructive: 0 72% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 110 17% 85%;
  --input: 115 14% 65%;
  --ring: var(--primary);
  --radius: 1rem;
  --radius-control: .625rem;
  --brand-deep: 164 54% 15%;
  --brand-navy: var(--brand-deep);
  --brand-primary: var(--primary);
  --brand-emerald: var(--primary);
  --brand-teal: var(--primary);
  --brand-light: var(--background);
  --brand-mint: var(--secondary);
  --brand-lime: var(--accent);
  --brand-on-dark: 95 25% 86%;
  --brand-hover: 154 100% 18%;
  --gradient-hero: linear-gradient(135deg, hsl(var(--brand-deep)), hsl(var(--primary)));
  --gradient-subtle: linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary)));
  --gradient-card: linear-gradient(135deg, hsl(var(--card)), hsl(var(--background)));
  --gradient-video: var(--gradient-hero);
  --shadow-card: 0 12px 32px hsl(var(--brand-deep) / .07);
  --sidebar-background: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--secondary);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; font-family: var(--font-body); color: hsl(var(--foreground)); background: hsl(var(--background)); line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.035em; }
button, input, select, textarea { font: inherit; }
::selection { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 4px; }
.site-header { background: hsl(var(--card) / .98); color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border)); }
.site-header-inner { max-width: 1280px; margin: auto; min-height: 96px; padding: 8px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer { background: hsl(var(--brand-deep)); color: hsl(var(--brand-on-dark)); }
.site-footer :is(a,button):focus-visible { outline-color: hsl(var(--accent)); }
.brand-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; border-radius: var(--radius-control); padding: .8rem 1.35rem; background: hsl(var(--primary)); color: white; font-family: var(--font-body); font-size: .875rem; font-weight: 600; text-decoration: none; line-height: 1.5; transition: background .2s, box-shadow .2s; }
.brand-button:hover { background: hsl(var(--brand-hover)); color: white; box-shadow: var(--shadow-card); }
@media (max-width: 640px) { .site-header-inner { padding-inline: 20px; gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}