/* ═══════════════════════════════════════════════
   MORPHE — Base Styles
   Reset, custom properties, typography, font-face
   ═══════════════════════════════════════════════ */

/* ─── FONT FACE ─────────────────────────────── */

/* Atkinson Hyperlegible Next — Variable (SIL OFL 1.1)
   Self-hosted. No CDN tracking. Designed for low-vision readability. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/AtkinsonHyperlegibleNext[wght].woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/AtkinsonHyperlegibleNext-Italic[wght].woff2') format('woff2');
}

/* Cormorant Garamond — Display headlines (OFL)
   Self-hosted Latin subset. Weights 300/400/600 + italic. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 300 600;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 300 400;
  src: url('../fonts/cormorant-garamond-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─── RESET ─────────────────────────────────── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: max(16px, 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* Reduce motion for vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}


/* ─── CUSTOM PROPERTIES ─────────────────────── */

:root {
  /* ═══ LIGHT THEME (Default) ═══ */

  /* Backgrounds — warm cream family */
  --bg-primary: #FDFAF6;
  --bg-secondary: #F5F0EA;
  --bg-tertiary: #EDE7DF;
  --bg-inverse: #2C2420;

  /* Text — warm grays, never pure black */
  --text-primary: #2C2C2C;
  --text-secondary: #5A5A5A;
  --text-tertiary: #737373;   /* darkened from #8A8A8A for AA compliance (4.56:1) */
  --text-inverse: #F5F0EA;

  /* Accents — trimester progression (decorative: borders, icons, bg tints) */
  --accent-t1: #C45B6E;       /* T1: muted rose */
  --accent-t2: #C49A5C;       /* T2: warm amber */
  --accent-t3: #6B9B7A;       /* T3: sage green */

  /* Accents — AA-compliant text variants (darkened for 4.5:1 on #FDFAF6) */
  --accent-t1-text: #B65566;
  --accent-t2-text: #8D6E42;
  --accent-t3-text: #567C62;
  --accent-trust-text: #407B91;
  --accent-science-text: #8368A3;

  /* Functional accents */
  --accent-trust: #4A8FA8;    /* medical/reference */
  --accent-science: #8B6FAD;  /* bioelectricity/consciousness */
  --accent-warning: #C45B6E;
  --accent-success: #6B9B7A;
  --accent-info: #4A8FA8;

  /* Borders and dividers */
  --border-subtle: rgba(44, 36, 32, 0.06);
  --border-medium: rgba(44, 36, 32, 0.12);
  --border-strong: rgba(44, 36, 32, 0.2);

  /* Shadows — warm-tinted */
  --shadow-sm: 0 1px 3px rgba(44, 36, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(44, 36, 32, 0.06);
  --shadow-lg: 0 8px 30px rgba(44, 36, 32, 0.08);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* Spacing scale (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}


/* ═══ DARK THEME ═══ */
[data-theme="dark"] {
  --bg-primary: #0C0E12;
  --bg-secondary: #12151B;
  --bg-tertiary: #1A1E26;
  --bg-inverse: #F5F0EA;

  --text-primary: #E0DCD8;
  --text-secondary: #9A9490;
  --text-tertiary: #7E7A76;   /* lightened from #605A56 for AA compliance (4.54:1) */
  --text-inverse: #2C2420;

  /* Dark mode accent text variants match decorative in dark (already pass) */
  --accent-t1-text: #D4707F;
  --accent-t2-text: #D4A96C;
  --accent-t3-text: #7DAE8C;
  --accent-trust-text: #5CA0B8;
  --accent-science-text: #9D82BE;

  --accent-t1: #D4707F;
  --accent-t2: #D4A96C;
  --accent-t3: #7DAE8C;
  --accent-trust: #5CA0B8;
  --accent-science: #9D82BE;

  --border-subtle: rgba(224, 220, 216, 0.06);
  --border-medium: rgba(224, 220, 216, 0.1);
  --border-strong: rgba(224, 220, 216, 0.16);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
}


/* ═══ SYSTEM PREFERENCE (auto dark when no explicit theme) ═══ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0C0E12;
    --bg-secondary: #12151B;
    --bg-tertiary: #1A1E26;
    --bg-inverse: #F5F0EA;

    --text-primary: #E0DCD8;
    --text-secondary: #9A9490;
    --text-tertiary: #7E7A76;
    --text-inverse: #2C2420;

    --accent-t1-text: #D4707F;
    --accent-t2-text: #D4A96C;
    --accent-t3-text: #7DAE8C;
    --accent-trust-text: #5CA0B8;
    --accent-science-text: #9D82BE;

    --accent-t1: #D4707F;
    --accent-t2: #D4A96C;
    --accent-t3: #7DAE8C;
    --accent-trust: #5CA0B8;
    --accent-science: #9D82BE;

    --border-subtle: rgba(224, 220, 216, 0.06);
    --border-medium: rgba(224, 220, 216, 0.1);
    --border-strong: rgba(224, 220, 216, 0.16);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
  }
}


/* ─── TYPOGRAPHY ────────────────────────────── */

/* Display — Cormorant Garamond */
h1, .text-display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
}

h2, .text-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

h2 em {
  font-style: italic;
  font-weight: 300;
}

h3, .text-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

/* Body — Atkinson Hyperlegible Next */
p {
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.lead {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-primary);
}

.sub {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.7;
}

small, .text-small {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-tertiary);
}

/* Mono — tags, labels, code */
.text-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

code, .text-caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

/* Line length for readability: 60-80 chars */
.content-width {
  max-width: 70ch;
}


/* ─── LINKS ─────────────────────────────────── */

a:not(.card):not(.phase-card):not(.btn):not(.wc-phase-link):not(.phase-nav__link):not(.site-nav__logo) {
  color: var(--accent-trust);
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 143, 168, 0.25);
  transition: border-color 0.2s;
}

a:not(.card):not(.phase-card):not(.btn):not(.wc-phase-link):not(.phase-nav__link):not(.site-nav__logo):hover {
  border-color: var(--accent-trust);
}

a:focus-visible {
  outline: 2px solid var(--accent-trust);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ─── SELECTION ─────────────────────────────── */

::selection {
  background: rgba(196, 91, 110, 0.15);
  color: var(--text-primary);
}


/* ─── SCROLLBAR ─────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}


/* ─── SKIP LINK (Accessibility) ─────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 10000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: var(--space-md);
}


/* ─── READING PROGRESS BAR ──────────────────── */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  /* Subtle track behind the progress fill */
  box-shadow: inset 0 0 0 4px var(--border-subtle);
  pointer-events: none;
}