/* =============================================================
   Alaska IT Compliance — Design Tokens
   Drop-in CSS variables: colors, typography, spacing, radii, shadows.
   Import once at the root of any page that wears the AIC brand.
   ============================================================= */

/* Webfonts: Sora (display) + Inter (body) + JetBrains Mono.
   These are GOOGLE FONTS SUBSTITUTES until first-party fonts are
   dropped into /fonts/. See README "Typography" for the substitution flag. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- COLOR ----- */
  /* Brand navy (load-bearing) */
  --aic-navy-900: #0A2342;
  --aic-navy-700: #143A6B;
  --aic-navy-500: #2A5A99;
  --aic-navy-300: #6B8AB8;

  /* Surfaces */
  --aic-paper: #FFFFFF;
  --aic-ice-50: #F4F7FB;
  --aic-ice-100: #E6EDF5;
  --aic-ice-200: #D4DEEC;

  /* Ink (text on light) */
  --aic-ink-900: #0E1726;
  --aic-ink-700: #2C3A4F;
  --aic-ink-600: #475569;
  --aic-ink-400: #8A97A8;

  /* Status: green / yellow / red dashboard */
  --aic-go-700: #176B3A;
  --aic-go-600: #1F8A4C;
  --aic-go-500: #2BA45D;
  --aic-go-100: #E3F4EA;

  --aic-warn-600: #B57303;
  --aic-warn-500: #D98E04;
  --aic-warn-100: #FCEFD2;

  --aic-stop-700: #962C20;
  --aic-stop-600: #C0392B;
  --aic-stop-100: #FBE3DF;

  /* Editorial accent */
  --aic-tundra-200: #E8DCC4;
  --aic-tundra-300: #D6C39E;

  /* Semantic aliases */
  --bg-page: var(--aic-paper);
  --bg-section-alt: var(--aic-ice-50);
  --bg-inverse: var(--aic-navy-900);
  --fg-default: var(--aic-ink-900);
  --fg-muted: var(--aic-ink-600);
  --fg-subtle: var(--aic-ink-400);
  --fg-on-inverse: var(--aic-paper);
  --border-default: var(--aic-ice-100);
  --border-strong: var(--aic-ice-200);
  --link: var(--aic-navy-500);
  --link-hover: var(--aic-navy-700);
  --accent: var(--aic-go-600);
  --accent-hover: var(--aic-go-700);

  /* ----- TYPOGRAPHY ----- */
  --font-display: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --type-display: 56px;
  --type-h1: 40px;
  --type-h2: 30px;
  --type-h3: 22px;
  --type-h4: 18px;
  --type-body: 16px;
  --type-small: 14px;
  --type-micro: 12px;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-eyebrow: 0.08em;
  --tracking-tight: -0.01em;

  /* ----- SPACING (8pt) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ----- LAYOUT ----- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;
  --nav-height: 64px;

  /* ----- RADII ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ----- SHADOWS (navy-tinted) ----- */
  --shadow-sm: 0 1px 2px rgba(10, 35, 66, 0.06);
  --shadow-md: 0 4px 14px rgba(10, 35, 66, 0.08);
  --shadow-lg: 0 18px 40px rgba(10, 35, 66, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(10, 35, 66, 0.06);

  /* ----- MOTION ----- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
}

/* =============================================================
   Semantic element styles — opt in with .aic-prose, or apply
   site-wide by removing the .aic-prose scoping.
   ============================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-relaxed);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .aic-h1, h2, .aic-h2, h3, .aic-h3, h4, .aic-h4 {
  font-family: var(--font-display);
  color: var(--aic-navy-900);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h1, .aic-h1 { font-size: var(--type-h1); font-weight: 700; line-height: var(--leading-tight); }
.aic-display { font-family: var(--font-display); font-size: var(--type-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--aic-navy-900); }
h2, .aic-h2 { font-size: var(--type-h2); font-weight: 600; line-height: var(--leading-snug); }
h3, .aic-h3 { font-size: var(--type-h3); font-weight: 600; line-height: var(--leading-snug); }
h4, .aic-h4 { font-size: var(--type-h4); font-weight: 600; line-height: var(--leading-snug); }

p, .aic-p {
  font-size: var(--type-body);
  line-height: var(--leading-relaxed);
  color: var(--fg-default);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.aic-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aic-navy-500);
}

small, .aic-small { font-size: var(--type-small); color: var(--fg-muted); }
code, .aic-mono { font-family: var(--font-mono); font-size: 0.95em; }

a, .aic-link {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover, .aic-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Buttons --------------------------------------------------- */
.aic-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}
.aic-btn--primary { background: var(--aic-navy-900); color: var(--aic-paper); }
.aic-btn--primary:hover { background: var(--aic-navy-700); }
.aic-btn--primary:active { background: var(--aic-navy-900); transform: translateY(1px); }
.aic-btn--accent { background: var(--aic-go-600); color: var(--aic-paper); }
.aic-btn--accent:hover { background: var(--aic-go-700); }
.aic-btn--ghost { background: transparent; color: var(--aic-navy-900); border-color: var(--border-strong); }
.aic-btn--ghost:hover { background: var(--aic-ice-50); }
.aic-btn--inverse { background: var(--aic-paper); color: var(--aic-navy-900); }
.aic-btn--inverse:hover { background: var(--aic-ice-50); }

/* Card ------------------------------------------------------ */
.aic-card {
  background: var(--aic-paper);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.aic-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Status pills ---------------------------------------------- */
.aic-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-micro);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
.aic-pill--go { background: var(--aic-go-100); color: var(--aic-go-700); }
.aic-pill--warn { background: var(--aic-warn-100); color: var(--aic-warn-600); }
.aic-pill--stop { background: var(--aic-stop-100); color: var(--aic-stop-700); }
.aic-pill--neutral { background: var(--aic-ice-100); color: var(--aic-ink-700); }

/* Containers ------------------------------------------------ */
.aic-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.aic-section { padding: var(--space-9) 0; }
.aic-section--alt { background: var(--bg-section-alt); }
.aic-section--inverse { background: var(--bg-inverse); color: var(--fg-on-inverse); }
.aic-section--inverse h1, .aic-section--inverse h2, .aic-section--inverse h3 { color: var(--fg-on-inverse); }