/* =============================================================================
   tokens.css — StudentWellbeing v0.1 design tokens
   Calm, non-clinical palette. Avoids sterile "medical" blue/white and avoids
   anything that reads as a chat/social product. High contrast throughout.
   ============================================================================= */

:root {
  /* Colour — warm, grounded, a women's-college-appropriate palette */
  --sw-color-bg:            #FBF9F6;
  --sw-color-surface:       #FFFFFF;
  --sw-color-surface-alt:   #F3EEE6;
  --sw-color-text:          #2B2620;
  --sw-color-text-muted:    #5B5347;
  --sw-color-border:        #E3DACB;

  --sw-color-primary:       #3F6E5E;   /* deep sage — calm, not clinical */
  --sw-color-primary-dark:  #2E5347;
  --sw-color-primary-light: #E7F0EC;

  --sw-color-accent:        #B4763E;   /* warm terracotta — for "seek support" CTA */
  --sw-color-accent-dark:   #8F5C2E;

  --sw-color-safety:        #A23B2E;   /* reserved ONLY for immediate-help / safety notices */
  --sw-color-safety-bg:     #FBECE9;

  --sw-color-focus:         #1A5FB4;   /* visible focus ring, independent of theme colour */

  /* Filled-button colours — chosen and contrast-checked independently from the
     general primary/accent tokens above, because a token tuned to read well
     as body text does not automatically pass 4.5:1 as white-on-fill or
     fill-on-dark-bg. Verified with WCAG relative-luminance contrast math
     (see accessibility audit notes). */
  --sw-btn-primary-bg: #3F6E5E; --sw-btn-primary-bg-hover: #2E5347; --sw-btn-primary-fg: #FFFFFF; /* 5.83:1 */
  --sw-btn-accent-bg:  #8F5C2E; --sw-btn-accent-bg-hover:  #7A4E27; --sw-btn-accent-fg:  #FFFFFF; /* 5.62:1 */

  /* Link colours — separate from --sw-btn-* above and from the general
     primary/accent tokens, verified to stay ≥4.5:1 against every background
     a link actually appears on in this palette (surface, page bg,
     primary-light, safety-bg, surface-alt). */
  --sw-color-link: #2E5347; --sw-color-link-hover: #8F5C2E; /* 8.17:1 / 5.35:1 vs page bg */

  /* Type */
  --sw-font-body: -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --sw-font-scale-base: 1rem;
  --sw-line-height: 1.6;

  /* Space (4px scale) */
  --sw-space-1: 0.25rem;
  --sw-space-2: 0.5rem;
  --sw-space-3: 0.75rem;
  --sw-space-4: 1rem;
  --sw-space-6: 1.5rem;
  --sw-space-8: 2rem;
  --sw-space-12: 3rem;
  --sw-space-16: 4rem;

  /* Layout */
  --sw-radius: 10px;
  --sw-radius-lg: 16px;
  --sw-container: 1120px;
  --sw-container-narrow: 760px;

  /* Motion */
  --sw-transition: 160ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sw-color-bg:            #1C1B18;
    --sw-color-surface:       #24221F;
    --sw-color-surface-alt:   #2C2A25;
    --sw-color-text:          #EFEAE1;
    --sw-color-text-muted:    #C3BAA9;
    --sw-color-border:        #3A362F;

    --sw-color-primary:       #7FB39F;
    --sw-color-primary-dark:  #5D8F7C;
    --sw-color-primary-light: #223530;

    --sw-color-accent:        #D99A5E;
    --sw-color-accent-dark:   #C07F3F;

    --sw-color-safety:        #E37E6F;
    --sw-color-safety-bg:     #3A2320;

    --sw-color-focus:         #7FB3E8;

    /* Dark mode needs its OWN button contrast pairing, not just the light
       one reused — the same primary/accent hues that pass as text-on-dark
       fail badly as fill-with-white-text (verified: 2.37:1 and 2.40:1). */
    --sw-btn-primary-bg: #7FB39F; --sw-btn-primary-bg-hover: #9AC4B3; --sw-btn-primary-fg: #16241F; /* 7.26:1 */
    --sw-btn-accent-bg:  #D99A5E; --sw-btn-accent-bg-hover:  #E5AF7C; --sw-btn-accent-fg:  #16241F; /* 7.16:1 */

    /* Dark mode's own link colours — the light-mode pairing (#2E5347 /
       #8F5C2E) drops to ~3.5:1 on dark surfaces and fails AA; these were
       verified ≥5.3:1 against every dark-mode surface in use. */
    --sw-color-link: #7FB39F; --sw-color-link-hover: #D99A5E; /* ≥5.39:1 on every surface used */
  }
}

:root[data-theme="dark"] {
  --sw-color-bg:            #1C1B18;
  --sw-color-surface:       #24221F;
  --sw-color-surface-alt:   #2C2A25;
  --sw-color-text:          #EFEAE1;
  --sw-color-text-muted:    #C3BAA9;
  --sw-color-border:        #3A362F;
  --sw-color-primary:       #7FB39F;
  --sw-color-primary-dark:  #5D8F7C;
  --sw-color-primary-light: #223530;
  --sw-color-accent:        #D99A5E;
  --sw-color-accent-dark:   #C07F3F;
  --sw-color-safety:        #E37E6F;
  --sw-color-safety-bg:     #3A2320;
  --sw-color-focus:         #7FB3E8;
  --sw-btn-primary-bg: #7FB39F; --sw-btn-primary-bg-hover: #9AC4B3; --sw-btn-primary-fg: #16241F;
  --sw-btn-accent-bg:  #D99A5E; --sw-btn-accent-bg-hover:  #E5AF7C; --sw-btn-accent-fg:  #16241F;
  --sw-color-link: #7FB39F; --sw-color-link-hover: #D99A5E;
}

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