/* ============================================================
   Mind To Soul — design tokens
   Ported from the Claude Design "mind-to-soul-design-system"
   (colors.css, typography.css, spacing.css). Fonts are loaded
   via <link> to Google Fonts in index.html.
   ============================================================ */

:root {
  /* ---- Base palette ---- */
  --color-sage: #9daf92;        /* primary — soft sage green */
  --color-sage-dark: #4b5842;   /* accent — deep olive/moss */
  --color-clay: #b99778;        /* secondary — warm clay/tan */
  --color-clay-light: #d3b596;

  --color-ink: #3c3f39;         /* body text — warm near-black */
  --color-cream: #f2efe2;       /* main background */
  --color-sage-mist: #c6d3bd;   /* secondary background — muted sage */
  --color-paper: #fbf9f7;       /* lightest background — cards, panels */

  --color-white: #ffffff;
  --color-black: #232420;

  /* ---- Semantic aliases ---- */
  --bg-page: var(--color-cream);
  --bg-section-alt: var(--color-sage-mist);
  --bg-surface: var(--color-paper);
  --bg-surface-raised: var(--color-white);
  --bg-inverse: var(--color-sage-dark);

  --text-primary: var(--color-ink);
  --text-secondary: color-mix(in srgb, var(--color-ink) 68%, transparent);
  --text-muted: color-mix(in srgb, var(--color-ink) 46%, transparent);
  --text-on-inverse: var(--color-paper);
  --text-on-accent: var(--color-paper);

  --brand-primary: var(--color-sage);
  --brand-primary-hover: color-mix(in oklch, var(--color-sage) 84%, black);
  --brand-primary-active: color-mix(in oklch, var(--color-sage) 72%, black);
  --brand-secondary: var(--color-clay);
  --brand-accent: var(--color-sage-dark);
  --brand-accent-hover: color-mix(in oklch, var(--color-sage-dark) 88%, white);

  --border-subtle: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --border-default: color-mix(in srgb, var(--color-ink) 20%, transparent);
  --border-strong: color-mix(in srgb, var(--color-ink) 34%, transparent);

  --focus-ring: color-mix(in srgb, var(--color-sage-dark) 55%, transparent);
  --shadow-color: 90 60 20; /* warm rgb triplet */

  /* ---- Typography ---- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2rem;
  --text-3xl: 2.6rem;
  --text-4xl: 3.4rem;
  --text-5xl: 4.5rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

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

  /* ---- Spacing / radius / shadow / motion ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-md: 0 8px 24px -8px rgb(var(--shadow-color) / 0.14);
  --shadow-lg: 0 20px 48px -16px rgb(var(--shadow-color) / 0.18);

  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  --container-max: 1180px;
  --container-narrow: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
}

body, p {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
}

a {
  color: var(--brand-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--brand-accent) 40%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--brand-accent-hover); text-decoration-color: currentColor; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-secondary);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}