:root {
  /* Typography families */
  --font-family-body: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Typography sizes */
  --font-size-chat: 1.15rem; /* chatbot messages and action buttons */
  --font-size-paragraph: 1.05rem; /* default paragraph text across reports, profiles, and history */
  --font-size-button: 0.8rem; /* default button text size outside the chatbot */
  --font-size-dashboard-heading: 0.9rem; /* dashboard table headers */
  --font-size-dashboard-text: 0.95rem; /* dashboard table body */
  --font-size-h1: clamp(2rem, 3vw, 2.6rem);
  --font-size-h2: clamp(1.6rem, 2.7vw, 2.2rem);
  --font-size-h3: clamp(1.35rem, 2.3vw, 1.8rem);
  --font-size-h4: 1.35rem;
  --font-size-h5: 1.1rem;

  --color-ink: #102a43;
  --color-accent: #2a8f79;
  --color-accent-strong: #1f6c5b;
  --color-white: #ffffff;
  --color-light: #f4f7f7;
  --color-light-2: #e7ecee;
  --color-border: #cfd8dd;


  --transparent: transparent;
  --color-light-2: color-mix(in srgb, var(--color-light), black 10%);

  /* Opacity buckets (shared) */
  --ink-soft: color-mix(in srgb, var(--color-ink), transparent 88%); /* 12% */
  --ink-mid: color-mix(in srgb, var(--color-ink), transparent 65%); /* 35% */
  --ink-strong: color-mix(in srgb, var(--color-ink), transparent 35%); /* 65% */

  --accent-soft: color-mix(in srgb, var(--color-accent), transparent 95%); /* 15% */
  --accent-mid: color-mix(in srgb, var(--color-accent), transparent 90%); /* 30% */

  --white-soft: color-mix(in srgb, var(--color-white), transparent 65%); /* 35% */
  --white-strong: color-mix(in srgb, var(--color-white), transparent 5%); /* 95% */

  /* Color tokens */
  --color-text: var(--color-ink);
  --color-text-weak: var(--ink-strong);
  --color-muted: var(--ink-strong);
  --color-heading: var(--color-accent-strong);
  --color-paragraph: var(--color-ink);
  --color-chat-text: var(--color-accent-strong);
  --color-button-text: var(--color-white);
  --color-dashboard-heading: var(--color-accent-strong);
  --color-dashboard-text: var(--color-ink);

  /* Shared palette */
  --bg-surface: var(--color-light);
  --bg-card: var(--color-light);
  --bg-page: var(--color-light);
  --bg-app: var(--color-light);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --border: var(--color-border);
  --border-strong: #cfd8ddcc;
  --border-subtle: #cfd8dd99;
  --line: var(--color-border);
  --line-soft: var(--border-subtle);
  --choice-bg: var(--accent-soft);
  --choice-active-bg: var(--accent);
  --primary: var(--accent-strong);
  --on-primary: var(--color-white);
  --card: var(--color-white);

  /* Demo / phone tokens */
  --teal-100: var(--accent-soft);
  --teal-300: var(--accent-mid);
  --step-track: var(--accent-soft);
  --step-fill: var(--color-ink);

  /* Gradients */
  --gradient-page: radial-gradient(circle at top right, var(--color-light), var(--color-light-2));
  --gradient-panel: linear-gradient(165deg, var(--white-strong), var(--color-light));
  --gradient-soft-accent: linear-gradient(135deg, var(--accent-soft), var(--accent-mid));
  --gradient-report: linear-gradient(145deg, var(--white-strong), var(--color-light));
  --gradient-report-summary: linear-gradient(180deg, var(--color-white) 0%, var(--color-light) 100%);

  /* Shadows */
  --shadow: 0 12px 28px var(--ink-soft);
  --shadow-inset: inset 0 1px 2px var(--ink-soft);
  --focus-ring: 0 0 0 3px var(--accent-soft);

  /* Design helpers */
  --radius: 18px;
  --transition: 0.2s ease;

  /* Legacy-friendly aliases */
  --ink: var(--color-text);
  --ink-weak: var(--color-text-weak);
  --muted: var(--color-muted);
  --font-title: var(--font-family-heading);
  --font-body: var(--font-family-body);
}