/* =====================================================================
   MT-Themes v2 — design tokens (DESIGN.md §3). Source of truth.
   White ground, cool light surfaces + one blue accent + one navy proof band per page.
   Logical properties only; physical left/right never appear here.
   ===================================================================== */

:root {
  /* ---- Ground ---- */
  --paper: #ffffff;
  --paper-2: #f4f7fc;
  --card: #ffffff;
  --line: #e3e8f0;
  --line-strong: #c3ccda;

  /* ---- Ink ---- */
  --ink: #0b1220;
  --ink-2: #475569;
  --ink-3: #5b6678; /* captions ≥14px only (5.3:1 on paper, 4.8:1 on paper-2) */

  /* ---- Blue = structure ---- */
  --blue: #3b82f6;
  --blue-deep: #1d4ed8; /* filled buttons, rules, focus: white text on it ≥ 4.5:1 in both themes */
  --blue-ink: #1e3a8a;
  --blue-tint: #e3ecfc;
  --link: #1d4ed8; /* blue TEXT on paper / paper-2 (links, arrow links, current nav) */

  /* ---- Navy proof band (one per page) ---- */
  --navy: #0a1633;
  --navy-2: #132550;
  --on-navy: #f4f1ea;
  --on-navy-2: #b9c3da;

  /* ---- AutoBlog product line only ---- */
  --autoblog: #6d5df2;
  --autoblog-ink: #4c3fcf;
  --autoblog-tint: #ece9ff;

  /* ---- Semantic only ---- */
  --ok: #15803d;
  --danger: #b91c1c;

  /* ---- Brand fixed points (DESIGN.md §2) ---- */
  --dot: #0d6efd; /* the wordmark dot; never restyled */
  --star: #f5c451;

  /* ---- Type ---- */
  --font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-lat: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-wordmark: 'Pacifico', cursive;

  --fs-0: 0.875rem; /* 14 captions, chips, labels */
  --fs-1: 1rem; /* 16 body */
  --fs-2: 1.125rem; /* 18 lead */
  --fs-3: 1.375rem; /* 22 h3 */
  --fs-4: 1.75rem; /* 28 h2 mobile */
  --fs-5: 2.25rem; /* 36 h2 desktop */
  --fs-6: 3rem; /* 48 h1 */
  --fs-7: 3.5rem; /* 56 h1 desktop */

  --lh-body: 1.75;
  --lh-tight: 1.2;
  --measure: 62ch;

  /* ---- Spacing (8px rhythm) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5rem;
  --s-10: 7rem;
  --section-y: clamp(2.5rem, 4.5vw, 4rem);
  --gutter: clamp(1rem, 3vw, 2rem);
  --container: 1200px;

  /* ---- Radius ---- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 18px;
  --r-pill: 999px;

  /* ---- Shadows: offset + soft blur, never a zero-offset glow ---- */
  --shadow-1: 0 1px 0 rgba(22, 24, 29, 0.06), 0 6px 16px -8px rgba(22, 24, 29, 0.18);
  --shadow-2: 0 12px 28px -14px rgba(15, 31, 61, 0.35), 0 2px 4px -2px rgba(15, 31, 61, 0.12);
  --shadow-3: 0 30px 60px -30px rgba(15, 31, 61, 0.45), 0 4px 10px -6px rgba(15, 31, 61, 0.15);

  /* ---- Motion: one authored moment per page ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 320ms;

  /* ---- Header ---- */
  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0b1120;
    --paper-2: #111a2e;
    --card: #16213a;
    --line: #24314d;
    --line-strong: #37466a;
    --ink: #eef2f8;
    --ink-2: #c1cad8;
    --ink-3: #9aa6b8;
    --blue: #7fb0ff;
    --blue-deep: #2563eb; /* white on it 5.2:1 */
    --blue-ink: #a9c6ff;
    --blue-tint: #1c2b4d;
    --link: #7fb0ff; /* 7.3:1 on paper-2; #3b82f6 was 4.4:1 */
    --navy: #0b1630;
    --navy-2: #142445;
    --on-navy: #f4f1ea;
    --on-navy-2: #b9c3da;
    --autoblog-ink: #a99cff;
    --autoblog-tint: #2a2650;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 4px 10px -6px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='dark'] {
  --paper: #0b1120;
  --paper-2: #111a2e;
  --card: #16213a;
  --line: #24314d;
  --line-strong: #37466a;
  --ink: #eef2f8;
  --ink-2: #c1cad8;
  --ink-3: #9aa6b8;
  --blue: #7fb0ff;
  --blue-deep: #2563eb;
  --blue-ink: #a9c6ff;
  --blue-tint: #1c2b4d;
  --link: #7fb0ff;
  --navy: #0b1630;
  --navy-2: #142445;
  --on-navy: #f4f1ea;
  --on-navy-2: #b9c3da;
  --autoblog-ink: #a99cff;
  --autoblog-tint: #2a2650;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 4px 10px -6px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
  }
}