/* ============================================================
   AH Consultations Design System — Colors & Type
   Blue-dominant professional palette inspired by NABH.in
   ============================================================ */

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

:root {
  /* ---------- Brand Blue (primary) ---------- */
  --brand-blue: #1565C0;
  --brand-blue-hover: #1255A8;
  --brand-blue-light: #1976D2;
  --brand-blue-xlight: #42A5F5;
  --brand-blue-soft: #EBF4FF;
  --brand-blue-nav: #0E3F8A;

  /* ---------- Legacy green — assessment CTA only ---------- */
  --brand-green: #00d4a4;
  --brand-green-deep: #00b48a;

  /* ---------- Surfaces ---------- */
  --canvas: #ffffff;
  --surface: #f7f9fc;
  --surface-soft: #fafbfe;
  --hairline: #e0e7f0;
  --hairline-soft: #edf2f9;

  /* ---------- Text ---------- */
  --ink: #0a1628;
  --charcoal: #1c2a3a;
  --slate: #344a60;
  --steel: #5a6e82;
  --stone: #8898aa;
  --muted: #a8b8c8;
  --on-dark: #ffffff;
  --on-dark-muted: #b8cce0;

  /* ---------- Semantic ---------- */
  --primary: var(--brand-blue);
  --on-primary: #ffffff;
  --brand-error: #d45656;
  --brand-warn: #c37d0d;
  --brand-success: #1ba673;

  /* ---------- Type families ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --t-hero-display-size: 64px;
  --t-display-lg-size: 48px;
  --t-h1-size: 44px;   --t-h1-weight: 700; --t-h1-leading: 1.10; --t-h1-tracking: -1.5px;
  --t-h2-size: 34px;   --t-h2-weight: 700; --t-h2-leading: 1.15; --t-h2-tracking: -0.5px;
  --t-h3-size: 26px;   --t-h3-weight: 600; --t-h3-leading: 1.25;
  --t-h4-size: 20px;   --t-h4-weight: 600; --t-h4-leading: 1.30;
  --t-h5-size: 17px;   --t-h5-weight: 600; --t-h5-leading: 1.40;

  --t-subtitle-size: 18px;    --t-subtitle-weight: 400; --t-subtitle-leading: 1.55;
  --t-body-md-size: 16px;     --t-body-md-weight: 400; --t-body-md-leading: 1.60;
  --t-body-sm-size: 14px;     --t-body-sm-weight: 400; --t-body-sm-leading: 1.55;
  --t-caption-size: 13px;     --t-caption-weight: 400; --t-caption-leading: 1.45;
  --t-micro-size: 12px;       --t-micro-weight: 500;   --t-micro-leading: 1.40;
  --t-micro-up-size: 11px;    --t-micro-up-weight: 600; --t-micro-up-tracking: 0.8px;
  --t-button-size: 14px;      --t-button-weight: 600;

  /* ---------- Radii ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-xxl: 24px; --r-full: 9999px;

  /* ---------- Spacing ---------- */
  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px;
  --s-lg: 20px; --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 48px;
  --s-section: 80px; --s-section-lg: 112px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 3px rgba(21,101,192,0.06);
  --shadow-2: 0 4px 16px rgba(21,101,192,0.10);
  --shadow-3: 0 24px 48px rgba(21,101,192,0.14);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-gutter: 32px;
}

/* ============================================================
   Resets
   ============================================================ */
html { font-family: var(--font-sans); color: var(--ink); background: var(--canvas); scroll-behavior: smooth; }
body { font-size: var(--t-body-md-size); line-height: var(--t-body-md-leading); margin: 0; }

h1, h2, h3, h4, h5 { font-family: var(--font-sans); color: var(--ink); margin: 0; font-weight: 700; }
h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-leading); letter-spacing: var(--t-h1-tracking); }
h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-leading); letter-spacing: var(--t-h2-tracking); }
h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); }
h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-leading); }
h5 { font-size: var(--t-h5-size); line-height: var(--t-h5-leading); }

p { font-size: var(--t-body-md-size); line-height: var(--t-body-md-leading); color: var(--charcoal); margin: 0; }
small { font-size: var(--t-caption-size); line-height: var(--t-caption-leading); color: var(--steel); }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 24px 0; }

code, kbd, samp, pre { font-family: var(--font-mono); }
code {
  font-size: 13px; font-weight: 500;
  background: var(--surface); color: var(--charcoal);
  border: 1px solid var(--hairline); border-radius: var(--r-xs);
  padding: 2px 6px;
}

/* ============================================================
   Utility classes
   ============================================================ */
.t-hero    { font-size: var(--t-hero-display-size); font-weight: 700; line-height: 1.06; letter-spacing: -2px; }
.t-display { font-size: var(--t-display-lg-size);   font-weight: 700; line-height: 1.10; letter-spacing: -1.5px; }
.t-subtitle { font-size: var(--t-subtitle-size); font-weight: 400; line-height: var(--t-subtitle-leading); color: var(--steel); }
.t-body    { font-size: var(--t-body-md-size); font-weight: 400; line-height: var(--t-body-md-leading); }
.t-body-sm { font-size: var(--t-body-sm-size); font-weight: 400; line-height: var(--t-body-sm-leading); }
.t-caption { font-size: var(--t-caption-size); font-weight: 400; line-height: var(--t-caption-leading); color: var(--steel); }
.t-micro-up { font-size: var(--t-micro-up-size); font-weight: 600; letter-spacing: var(--t-micro-up-tracking); text-transform: uppercase; color: var(--brand-blue); }
.t-mono    { font-family: var(--font-mono); }

/* ============================================================
   Scrollbar
   ============================================================ */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c8d8ec; border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: #a8c0e0; }

/* ============================================================
   Input focus
   ============================================================ */
input:focus, select:focus, textarea:focus {
  border-color: #1565C0 !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
}

/* ============================================================
   Modal animations
   ============================================================ */
@keyframes ai-fade-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ai-bar-wave {
  0%   { height: 4px; }
  100% { height: 38px; }
}
@keyframes ai-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.65; }
}
@keyframes ai-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1); }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}