/* MindfulTime V2 design tokens (design C). Use only these values. */
:root {
  /* Brand colors: the only colors allowed */
  --mt-teal: #0ea2bd;        /* primary: logo, buttons, accents, large text on dark */
  --mt-teal-2: #0b8fa6;      /* secondary accent */
  --mt-teal-deep: #0a6f82;   /* links and small teal text on white, switches "on" */
  --mt-ink: #1a1f24;         /* body text, text on teal buttons */
  --mt-slate: #485664;       /* secondary text, headings in quiet places, switches "off" */
  --mt-mist: #eef0f2;        /* light sections, cards, hairlines; text on dark */
  --mt-night: #3a4753;       /* dark sections, hero, footer */
  --mt-white: #ffffff;       /* surfaces */

  /* Derived (transparency of brand colors only) */
  --mt-line: rgba(72, 86, 100, 0.20);
  --mt-line-strong: rgba(72, 86, 100, 0.35);
  --mt-line-on-dark: rgba(255, 255, 255, 0.12);
  --mt-teal-soft: rgba(14, 162, 189, 0.28);
  --mt-shadow-sm: 0 1px 3px rgba(26, 31, 36, 0.12);
  --mt-shadow-md: 0 16px 40px rgba(26, 31, 36, 0.08);
  --mt-shadow-lg: 0 40px 90px rgba(26, 31, 36, 0.45);

  /* Contrast rules
     - Button: background var(--mt-teal), text var(--mt-ink) (about 5.5:1)
     - White text on --mt-teal fails AA at button sizes; do not use
     - On --mt-night, use --mt-white or --mt-mist for text; --mt-teal only for large text (24px+) and icons */

  /* Typography */
  --mt-font-heading: "Poppins", system-ui, sans-serif;   /* weights 500, 600 */
  --mt-font-body: "Inter", system-ui, sans-serif;        /* weights 400, 500, 600 */
  --mt-font-accent: "Fraunces", Georgia, serif;          /* italic 500, one accent word only */

  --mt-text-xs: 12px;
  --mt-text-sm: 14px;
  --mt-text-md: 16px;
  --mt-text-lg: 18px;
  --mt-text-xl: 19px;
  --mt-h3: 19px;
  --mt-h2: clamp(30px, 3.6vw, 44px);
  --mt-h1: clamp(40px, 5.8vw, 70px);
  --mt-leading-tight: 1.08;
  --mt-leading-body: 1.65;
  --mt-tracking-heading: -0.02em;
  --mt-eyebrow: 600 13px/1.4 var(--mt-font-body); /* uppercase, letter-spacing 0.14em */

  /* Spacing scale */
  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-5: 24px;
  --mt-space-6: 32px;
  --mt-space-7: 48px;
  --mt-space-8: 64px;
  --mt-section-y: 104px;     /* vertical padding for every section */
  --mt-container: 1160px;
  --mt-reading: 760px;       /* blog body, legal pages, footer description */
  --mt-gutter: 24px;

  /* Radius */
  --mt-radius-sm: 12px;      /* inputs, small tiles */
  --mt-radius-md: 16px;      /* inner cards */
  --mt-radius-lg: 24px;      /* cards */
  --mt-radius-xl: 28px;      /* large panels */
  --mt-radius-pill: 999px;   /* buttons, chips, tabs */

  /* Motion */
  --mt-ease: cubic-bezier(.2, .8, .2, 1);
  --mt-dur: 300ms;
  --mt-touch: 44px;          /* minimum touch target */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}