/* ══════════════════════════════════════════════════════════════════
   TherapyCoach — shared site stylesheet

   Loaded by every marketing page BEFORE that page's own <style>, so
   page-specific rules still win. This file owns three things and
   nothing else:

     1. tokens   — one palette, one type scale, two page measures
     2. a11y     — focus, reduced motion, skip link
     3. shared   — the standing disclaimer

   Before this existed the site had eight inline stylesheets, three
   different palettes, between four and fifteen font sizes per page,
   and thirteen distinct max-widths. Page CSS is being migrated onto
   these tokens; the palette values below are the same ones the pages
   already used, so nothing changes visually except the two contrast
   fixes noted inline.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground ── */
  --bg:            #faf3e3;
  --surface:       #fff8ee;
  --card:          #fff8ee;
  --text:          #2d2a26;
  /* 0.6 alpha gave 3.85:1 on --bg, under the 4.5:1 floor. 0.72 gives
     5.48:1. Same fix already applied in the app. */
  --text-muted:    rgba(45, 42, 38, 0.72);
  --text-light:    rgba(45, 42, 38, 0.55);
  --border:        #e8dcc8;

  /* ── Accent ── */
  --primary:        #c8633c;
  --primary-hover:  #b5532e;
  /* Contrast-safe pair. --primary (#c8633c) is 3.58:1 on --bg — large text,
     borders and decoration only. --primary-strong is the one for body text and
     filled buttons: 4.87:1 on --bg, white on it 5.38:1. The previous #b5532e
     measured 4.48:1, marginally under the 4.5 floor. */
  --primary-strong: #ad4e2a;
  --primary-light:  #f2c9a8;
  --primary-50:     #fdf3eb;

  /* ── Modality ── */
  /* The -text variants carry any label or copy set in a modality colour.
     #2a9d8f as text on --mi-bg is only 3.09:1; --mi-text is 5.87:1. */
  --mi:   #2a9d8f;  --mi-hover:  #21867a;  --mi-light:  #c5f0ea;  --mi-bg:  #edf9f7;  --mi-text:  #1b6b61;
  --cbt:  #5b4fc7;  --cbt-hover: #4c3fb3;  --cbt-light: #ddd8f7;  --cbt-bg: #f0eefb;  --cbt-text: #4c3fb3;
  /* #8b5cf6 failed a colourblind-separation check against --cbt
     (ΔE 11.1, below the 15 floor). #b5379b passes in both themes. */
  --dbt:  #b5379b;  --dbt-hover: #9c2c85;  --dbt-light: #f2d3e9;  --dbt-bg: #fbeef7;  --dbt-text: #9c2c85;

  /* ── Semantic ── */
  --success: #157f3d;
  --warning: #8a5300;
  --danger:  #b3261e;

  /* ── Type scale — the same eight steps as the app ── */
  --fs-label:   0.6875rem;   /* 11px */
  --fs-micro:   0.75rem;     /* 12px */
  --fs-small:   0.875rem;    /* 14px */
  --fs-body:    1rem;        /* 16px */
  --fs-subhead: 1.125rem;    /* 18px */
  --fs-section: 1.375rem;    /* 22px */
  --fs-page:    1.875rem;    /* 30px */
  --fs-display: 2.5rem;      /* 40px */

  /* ── Measures — two, not thirteen ── */
  --page-max:  1140px;   /* full-width pages */
  --prose-max: 720px;    /* reading measure: legal, long copy */
  --page-pad:  2rem 1.5rem;

  /* ── Form ── */
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(45,42,38,0.06);
  --shadow:    0 1px 3px rgba(45,42,38,0.1), 0 1px 2px rgba(45,42,38,0.06);
  --shadow-lg: 0 4px 12px rgba(45,42,38,0.1);

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg:         #2d2a26;
  --surface:    #3d3832;
  --card:       #3d3832;
  --text:       #faf3e3;
  --text-muted: rgba(250, 243, 227, 0.72);
  --text-light: rgba(250, 243, 227, 0.55);
  --border:     #4a443c;

  --primary:        #d4784e;
  --primary-hover:  #c8633c;
  --primary-strong: #e89670;  /* #d4784e was 4.48 on --bg, 3.64 on --surface */
  --primary-light:  #6b4230;
  --primary-50:     #3a322b;

  --mi-bg:  #1f3d39;  --mi-light:  #2a5c55;
  --cbt-bg: #2a2740;  --cbt-light: #3b3660;
  --dbt-bg: #3d2036;  --dbt-light: #5c3050;
  --mi-text: #4cbfb0;  --cbt-text: #a89cf0;  --dbt-text: #e89ad4;
  --mi-text: #4cbfb0;  --cbt-text: #a89cf0;  --dbt-text: #e89ad4;

  --success: #5fc296;
  --warning: #e0b05f;
  --danger:  #e08a80;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #2d2a26;
    --surface:    #3d3832;
    --card:       #3d3832;
    --text:       #faf3e3;
    --text-muted: rgba(250, 243, 227, 0.72);
    --text-light: rgba(250, 243, 227, 0.55);
    --border:     #4a443c;

    --primary:        #d4784e;
    --primary-hover:  #c8633c;
    --primary-strong: #e89670;  /* #d4784e was 4.48 on --bg, 3.64 on --surface */
    --primary-light:  #6b4230;
    --primary-50:     #3a322b;

    --mi-bg:  #1f3d39;  --mi-light:  #2a5c55;
    --cbt-bg: #2a2740;  --cbt-light: #3b3660;
    --dbt-bg: #3d2036;  --dbt-light: #5c3050;

    --success: #5fc296;
    --warning: #e0b05f;
    --danger:  #e08a80;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow:    0 1px 3px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.45);
  }
}

/* ══ Accessibility ══
   None of this existed on any page. */

*:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.65rem 1rem;
  background: var(--primary-strong);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* Wide content must scroll inside itself, never push the page sideways. */
html, body { overflow-x: hidden; }
table, pre { max-width: 100%; overflow-x: auto; display: block; }

/* ══ The standing disclaimer ══ */

.site-disclaimer {
  max-width: var(--page-max);
  margin: 0 auto 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.site-disclaimer strong { font-weight: 700; color: var(--text); }