/*
 * tokens.css — SameDayPsych design tokens
 *
 * SOURCE (T-068): tokens are extracted from samedaypsych.com's live theme
 * on 2026-09-06. Kept identical to the WP site so the intake reads as one
 * brand, not two apps. Contrast has been checked at WCAG AA for small
 * text (see notes below on the deepened teal/amber ink variants — the
 * marketing teal `#29A882` is decorative-only at 2.99:1 against white
 * and is deliberately not used on body copy).
 *
 * If the WP theme is ever restyled, re-verify against
 * https://samedaypsych.com and update this file — do not diverge quietly.
 */

:root {
  /* brand — extracted from samedaypsych.com live CSS */
  --sdp-navy: #1B3A6B;
  --sdp-navy-mid: #2A4F8A;
  --sdp-navy-light: #EEF2F9;

  --sdp-teal: #3ECBA0;        /* decorative accent only — 2.99:1 on white */
  --sdp-teal-dark: #29A882;   /* decorative accent only */
  --sdp-teal-ink: #1B7A5E;    /* AA-safe teal for text/links */
  --sdp-teal-accent: #24997A; /* AA-safe teal for large text/icons */
  --sdp-teal-light: #E6F9F3;
  --sdp-teal-mid: #9FE1CB;

  --sdp-amber: #BA7517;
  --sdp-amber-ink: #8A5410;   /* AA-safe amber for warning copy */

  /* semantic — mapped onto the brand so components don't reach for raw hex */
  --sdp-primary: var(--sdp-navy);
  --sdp-primary-hover: var(--sdp-navy-mid);
  --sdp-primary-tint: var(--sdp-navy-light);
  --sdp-secondary: var(--sdp-teal-ink);
  --sdp-secondary-tint: var(--sdp-teal-light);

  --sdp-background: #FFFFFF;
  --sdp-surface: #FFFFFF;
  --sdp-border: #C8D2E4;
  --sdp-border-strong: #8896B0;

  --sdp-text-primary: #1B3A6B;   /* navy on body copy, matches WP site */
  --sdp-text-secondary: #4A5568;
  --sdp-text-muted: #5F6E8A;     /* deepened from #8896B0 for AA */
  --sdp-text-on-primary: #FFFFFF;

  --sdp-success: var(--sdp-teal-ink);
  --sdp-success-tint: var(--sdp-teal-light);
  --sdp-warning: var(--sdp-amber-ink);
  --sdp-warning-tint: #FFF4E4;
  --sdp-warning-border: #F1CE94;
  --sdp-error: #B4361A;
  --sdp-error-tint: #FDECE6;
  --sdp-info: var(--sdp-navy);
  --sdp-info-tint: var(--sdp-navy-light);

  /* A page tint so white cards read as cards. Lighter than --sdp-navy-light,
     which is a component fill and is too saturated for a full page. */
  --sdp-canvas: #F6F8FC;

  /* T-073 — the intake canvas.
   *
   * A soft vertical wash instead of flat white. The reference Jack gave
   * (Choose Your Horizon) uses one, and it does real work on a long
   * clinical form: the white option cards read as raised objects against
   * it rather than as outlined regions of the page, which is what lets
   * the radio dot go away without the rows dissolving.
   *
   * Both stops are light enough that --sdp-text-primary (#1B3A6B) clears
   * WCAG AA on either end, so body copy never sits on an unsafe field.
   * Verified by calculation, not by eye: 10.09:1 on the darker stop. */
  --sdp-canvas-top: #EDF3FB;
  --sdp-canvas-bottom: #F7F5FD;
  --sdp-canvas-gradient: linear-gradient(180deg, var(--sdp-canvas-top) 0%, var(--sdp-canvas-bottom) 100%);

  /* Card resting elevation on that wash. Deliberately softer and more
   * diffuse than --sdp-shadow-sm, which was tuned for cards on white. */
  --sdp-shadow-card: 0 1px 2px rgba(27, 58, 107, 0.04), 0 2px 8px rgba(27, 58, 107, 0.05);
  --sdp-shadow-card-hover: 0 2px 4px rgba(27, 58, 107, 0.06), 0 6px 16px rgba(27, 58, 107, 0.10);

  /* Disabled primary action. The reference greys the Next button until an
   * answer exists; this is that grey, dark enough that the label on it
   * still clears AA rather than becoming decorative. */
  --sdp-disabled-surface: #C3CBDA;
  /* #5A6478 measured 3.65:1 on the surface above. WCAG 1.4.3 exempts
   * inactive controls so that would have passed an audit, but the patient
   * still has to read what the button is going to do before they can tick
   * the box that enables it. #4A5468 measures 4.67:1. */
  --sdp-disabled-text: #4A5468;

  /* Two focus tokens on purpose, because they are not interchangeable:
     --sdp-focus-ring is a complete box-shadow value, --sdp-focus-ring-color is
     a colour. `outline: 2px solid var(--sdp-focus-ring)` is invalid CSS and
     silently drops the whole declaration — which is what main.css was doing,
     so keyboard focus had no visible ring on any control. */
  --sdp-focus-ring: 0 0 0 3px rgba(27, 58, 107, 0.35);
  --sdp-focus-ring-color: #2A4F8A;

  /* typography — system stack matches the WP site (double-story `a`); not Poppins */
  --sdp-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sdp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sdp-font-size-xs: 0.75rem;
  --sdp-font-size-sm: 0.875rem;
  --sdp-font-size-base: 1rem;
  --sdp-font-size-md: 1.125rem;
  --sdp-font-size-lg: 1.25rem;
  --sdp-font-size-xl: 1.5rem;
  --sdp-font-size-2xl: 1.875rem;
  --sdp-font-size-3xl: 2.25rem;

  --sdp-line-height-tight: 1.25;
  --sdp-line-height-snug: 1.375;
  --sdp-line-height-normal: 1.55;
  --sdp-line-height-relaxed: 1.7;

  /* Motion. main.css referenced --sdp-duration-* / --sdp-ease-* before these
     existed, so every transition it declared was invalid and dropped. */
  --sdp-duration-fast: 120ms;
  --sdp-duration-base: 200ms;
  --sdp-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

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

  /* spacing — unchanged from the pre-brand palette */
  --sdp-space-1: 0.25rem;
  --sdp-space-2: 0.5rem;
  --sdp-space-3: 0.75rem;
  --sdp-space-4: 1rem;
  --sdp-space-5: 1.25rem;
  --sdp-space-6: 1.5rem;
  --sdp-space-8: 2rem;
  --sdp-space-10: 2.5rem;
  --sdp-space-12: 3rem;
  --sdp-space-16: 4rem;

  --sdp-radius-sm: 4px;
  --sdp-radius-md: 8px;
  --sdp-radius-lg: 12px;
  --sdp-radius-pill: 999px;

  --sdp-shadow-sm: 0 1px 2px rgba(27, 58, 107, 0.06);
  --sdp-shadow-md: 0 4px 12px rgba(27, 58, 107, 0.10);
  --sdp-shadow-lg: 0 10px 25px rgba(27, 58, 107, 0.12);

  --sdp-container-narrow: 40rem;
  --sdp-container-reading: 48rem;
  --sdp-container-wide: 72rem;
}