/**
 * Design tokens, extracted from the alevita.ro WordPress theme.
 *
 * Imported by web/ (verification page) and survey/ (SurveyJS) so a participant
 * moving between the two never sees two different sites. The email templates
 * hardcode the same values: mail clients support neither custom properties nor
 * webfonts.
 *
 * Two values deliberately differ from the live site, both for contrast. A
 * marketing page can afford decorative low-contrast text; a 92-question
 * clinical questionnaire filled in on a phone cannot.
 *
 *   --accent  #E0A067 measures 2.24:1 against white — unreadable as text and
 *             unusable as a button. Kept for borders, rules and icons only.
 *             --accent-text (#8A5A21, 5.89:1) is its readable counterpart.
 *   --fg      the theme's body grey #7F7D7E measures 4.09:1, below the 4.5:1
 *             floor for normal text. Darkened to #4A4849 (9.07:1).
 */

:root {
  /* Brand */
  --accent: #e0a067; /* decorative only — see note above */
  --accent-text: #8a5a21; /* accent, readable on white */
  --accent-soft: #faf2e9;

  /* Neutrals, from the theme */
  --ink: #222222; /* headings */
  --fg: #4a4849; /* body copy — darkened from the theme's #7F7D7E */
  --fg-muted: #6e6c6d;
  --dark: #393738;
  --dark-deep: #312f30;

  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f6f6f6;
  --border: #e2e0de;

  /* State */
  --error: #a8322a;
  --success: #2f6b35;

  /* Primary action. The dark tone rather than the accent: 11.81:1 against
     white text, versus 2.24:1 for the accent. */
  --btn-bg: var(--dark);
  --btn-fg: #ffffff;
  --btn-bg-hover: var(--dark-deep);

  /* Type — self-hosted, not loaded from Google's CDN. Sending participant IP
     addresses to a third party would undo the point of dropping external
     processors in the first place. */
  --font-head: 'Domine', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem; /* slightly above the theme's 16px: long form, small screens */
  --text-lg: 1.25rem;
  --text-h2: 1.875rem;
  --text-h1: 2.25rem;

  --leading-body: 1.65;

  /* Geometry */
  --radius: 6px;
  --radius-lg: 10px;
  --space: 1rem;
  --measure: 34rem; /* reading width */

  --shadow: 0 1px 3px rgba(49, 47, 48, 0.08), 0 4px 16px rgba(49, 47, 48, 0.06);
}

/* Touch targets: a form filled on a phone, sometimes by someone in pain. */
:root {
  --control-height: 48px;
  --control-gap: 0.75rem;
}