/*
  Three6 theme tokens — from the official Three6 Brand Guide.
  Primary: Pantone 123C / #F4CC21 (yellow). Secondary: Pantone 333C / #33CCCC (teal).
  Ancillary: white, black, 10% grey, 60% grey. Flat design — no shadows.
*/
:root {
  --three6-yellow: #F4CC21;
  --three6-yellow-tint: #FDF6D9;
  --three6-teal: #33CCCC;
  --three6-teal-dark: #1F9E9E;
  --three6-teal-tint: #E6F9F9;
  --three6-ink: #000000;
  --three6-ink-soft: #333333;
  --three6-white: #FFFFFF;
  --three6-paper: #FFFFFF;
  --three6-grey-100: #F1F1F2;
  --three6-grey-300: #D8D8DA;
  --three6-grey-600: #808285;
  --three6-text: #000000;
  --three6-text-muted: #5C5D60;
  --three6-danger: #C0392B;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Flat brand — deliberately no shadow. Kept as a token so nothing
     hard-codes box-shadow directly; flip this if that ever changes. */
  --shadow-card: none;

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --content-max: 1160px;
  --questionnaire-max: 760px;

  --focus-ring: 0 0 0 3px rgba(51, 204, 204, 0.5);
}

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