/* =========================================================================
   MindyCore — Design Tokens
   Calm-by-design. Real-time adaptive. WCAG AA minimum.
   ========================================================================= */

:root {
  /* --- Type families ----------------------------------------------------- */
  --font-display: "Instrument Serif", "Newsreader", Georgia, serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ui:      "Newsreader", Georgia, serif;

  /* --- Type scale (user-adjustable via --text-scale) --------------------- */
  --text-scale: 1;            /* 0.9 small / 1.0 medium / 1.15 large */
  --base-size: calc(17px * var(--text-scale));

  --fs-eyebrow: calc(12px * var(--text-scale));
  --fs-small:   calc(14px * var(--text-scale));
  --fs-body:    calc(18px * var(--text-scale));
  --fs-lead:    calc(22px * var(--text-scale));
  --fs-h3:      calc(28px * var(--text-scale));
  --fs-h2:      calc(44px * var(--text-scale));
  --fs-h1:      calc(72px * var(--text-scale));
  --fs-display: calc(96px * var(--text-scale));

  /* --- Line heights ----------------------------------------------------- */
  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  /* --- Letter spacing --------------------------------------------------- */
  --ls-tight:    -0.02em;
  --ls-display:  -0.025em;
  --ls-body:      0;
  --ls-eyebrow:   0.16em;
  --ls-caps:      0.08em;

  /* --- Spacing (4-divisible) -------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  /* --- Layout ----------------------------------------------------------- */
  --measure: 64ch;
  --measure-narrow: 48ch;
  --gutter: clamp(24px, 5vw, 80px);
  --content-w: 1240px;

  /* --- Motion timing ---------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 560ms;
  --t-tide: 30s;       /* hero grain breath cycle */
  --t-header: 24s;     /* header ambient cycle */
}

/* =========================================================================
   THEME: DARK (default — calmer for many neurodivergent visitors)
   Deep navy + soft off-white. AA contrast minimum, AAA where possible.
   ========================================================================= */
:root,
html[data-theme="dark"] {
  --bg:            #0c1322;   /* deep navy */
  --bg-elev:       #131c2f;   /* card / elevated */
  --bg-inset:      #0a101c;   /* recessed */
  --ink:           #f1ece1;   /* soft warm off-white */
  --ink-2:         #d6cfc1;   /* secondary text */
  --ink-3:         #9aa1b3;   /* tertiary / labels */
  --ink-4:         #5f6a82;   /* deep tertiary / dividers */
  --line:          #1f2a44;   /* hairline borders */
  --line-strong:   #2c3a5c;
  --accent:        #f1ece1;   /* same warm cream — type-led, no color accent shouting */
  --accent-deep:   #c4b896;   /* muted gold for state, links on hover */
  --signal:        #6fb6c4;   /* live-status; soft teal (AA on bg) */
  --signal-soft:   #2d4651;
  --warn:          #c89f7a;   /* coming-soon; muted clay */
  --warn-soft:     #3a2e26;
  --focus:         #b4d2dd;
  --grain-opacity: 0.06;
  --grain-blend:   screen;
}

/* =========================================================================
   THEME: LIGHT
   ========================================================================= */
html[data-theme="light"] {
  --bg:            #f6f3ec;
  --bg-elev:       #ffffff;
  --bg-inset:      #ece8de;
  --ink:           #0c1322;
  --ink-2:         #2a3450;
  --ink-3:         #5a657f;
  --ink-4:         #8c95a8;
  --line:          #ddd6c5;
  --line-strong:   #c1b89e;
  --accent:        #0c1322;
  --accent-deep:   #4a3f1f;
  --signal:        #2e7a8a;
  --signal-soft:   #d4e8ed;
  --warn:          #8a5a30;
  --warn-soft:     #f0e2d2;
  --focus:         #2e7a8a;
  --grain-opacity: 0.045;
  --grain-blend:   multiply;
}

/* =========================================================================
   CALM MODE — softens palette further, still meets AA.
   ========================================================================= */
html[data-calm="on"][data-theme="dark"] {
  --bg:            #131a2a;        /* slightly lifted black, less contrast jolt */
  --bg-elev:       #1a2236;
  --bg-inset:      #10182a;
  --ink:           #e6dfd1;        /* slightly cooler off-white, less burn */
  --ink-2:         #c0b9aa;
  --ink-3:         #8a91a3;
  --line:          #232e48;
  --line-strong:   #2e3a58;
  --signal:        #7faab1;
  --warn:          #b89884;
  --grain-opacity: 0.04;
}
html[data-calm="on"][data-theme="light"] {
  --bg:            #efece4;
  --bg-elev:       #f8f5ed;
  --bg-inset:      #e6e2d6;
  --ink:           #232a3e;
  --ink-2:         #4b556d;
  --ink-3:         #6e788c;
  --line:          #d8d1c0;
  --line-strong:   #b5ad95;
  --signal:        #4a8593;
  --warn:          #8d6a4a;
  --grain-opacity: 0.03;
}

/* =========================================================================
   DYSLEXIA FONT swap — applies to ALL text. Atkinson Hyperlegible.
   ========================================================================= */
html[data-dyslexia="on"] {
  --font-display: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body:    "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-ui:      "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono:    "Atkinson Hyperlegible", ui-monospace, monospace;
  --ls-display:   0;
  --ls-tight:     0;
  --lh-tight:     1.18;
  --lh-snug:      1.35;
  --lh-body:      1.65;
}

/* =========================================================================
   REDUCE MOTION — kills all transitions/animations.
   Toggle via class on <html>, NOT via prefers-reduced-motion alone, so
   the user override always wins. We respect system pref as default.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}