/* ==========================================================================
   Empovio — Design Tokens
   The single source of truth for colour, typography, spacing, radius,
   elevation and motion. Every other stylesheet reads from these variables.
   Defined in 02_Design_System.md.
   ========================================================================== */

:root {
  /* ---------- Neutrals (the UI is 90% neutral) ---------- */
  --n-0: #ffffff;
  --n-25: #fcfcfd;
  --n-50: #f7f8fa;
  --n-100: #f1f2f5;
  --n-150: #eaecf0;
  --n-200: #e3e6eb;
  --n-300: #d2d7de;
  --n-400: #a5adbb;
  --n-500: #78818f;
  --n-600: #59616f;
  --n-700: #3e4552;
  --n-800: #262b34;
  --n-900: #13161c;

  /* ---------- Primary: deep blue ---------- */
  --primary-25: #f6f8ff;
  --primary-50: #eef3ff;
  --primary-100: #dde6ff;
  --primary-200: #c2d1ff;
  --primary-500: #3866ee;
  --primary-600: #1f4fd8;
  --primary-700: #1a41b4;
  --primary-800: #17368f;

  /* ---------- Semantic: meaning only, never decoration ---------- */
  --success-50: #ecfdf3;
  --success-100: #d1fadf;
  --success-200: #a6f4c5;
  --success-500: #12b76a;
  --success-600: #039855;
  --success-700: #027a48;

  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;

  --danger-50: #fef3f2;
  --danger-100: #fee4e2;
  --danger-200: #fecdca;
  --danger-500: #f04438;
  --danger-600: #d92d20;
  --danger-700: #b42318;

  --info-50: #eff8ff;
  --info-100: #d1e9ff;
  --info-200: #b2ddff;
  --info-500: #2e90fa;
  --info-600: #1570ef;
  --info-700: #175cd3;

  /* AI features only */
  --ai-25: #fbfaff;
  --ai-50: #f4f3ff;
  --ai-100: #ebe9fe;
  --ai-200: #d9d6fe;
  --ai-500: #7a5af8;
  --ai-600: #6938ef;
  --ai-700: #5925dc;

  /* ---------- Surface hierarchy ---------- */
  --surface-page: var(--n-50);
  --surface-alt: var(--n-100);
  --surface-card: var(--n-0);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-disabled: var(--n-400);

  /* ---------- Typography ---------- */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero: 56px;
  --fs-display: 48px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-wide: 0.06em;

  /* ---------- Layout ---------- */
  --container: 1440px;
  --content: 1280px;
  --gutter: 24px;
  --page-padding: 80px;

  /* ---------- Spacing: 8px scale only ---------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;

  /* Vertical rhythm between homepage sections */
  --section-y: 96px;

  /* ---------- Radius ---------- */
  --r-button: 12px;
  --r-input: 12px;
  --r-card: 16px;
  --r-dropdown: 16px;
  --r-modal: 20px;
  --r-pill: 999px;
  --r-sm: 8px;
  --r-xs: 6px;

  /* ---------- Elevation: depth, never glow ---------- */
  --shadow-1: 0 1px 2px rgba(19, 22, 28, 0.04),
    0 1px 3px rgba(19, 22, 28, 0.06);
  --shadow-1-hover: 0 2px 4px rgba(19, 22, 28, 0.05),
    0 8px 16px -6px rgba(19, 22, 28, 0.1);
  --shadow-2: 0 4px 8px -2px rgba(19, 22, 28, 0.06),
    0 12px 24px -8px rgba(19, 22, 28, 0.1);
  --shadow-3: 0 8px 16px -4px rgba(19, 22, 28, 0.08),
    0 24px 48px -12px rgba(19, 22, 28, 0.16);

  /* ---------- Motion: never above 300ms ---------- */
  --t-micro: 140ms;
  --t-hover: 180ms;
  --t-reveal: 220ms;
  --t-modal: 220ms;
  --t-drawer: 240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 2px var(--n-0), 0 0 0 4px var(--primary-600);
}

/* Tablet: reduce page padding and section rhythm (02 + Part N). */
@media (max-width: 1023px) {
  :root {
    --page-padding: 40px;
    --section-y: 80px;
  }
}

/* Mobile: single column, spacing increases relative to content density. */
@media (max-width: 767px) {
  :root {
    --page-padding: 24px;
    --section-y: 64px;
  }
}