/* ==========================================================================
   CORE ATLAS: how Climate Color looks
   ==========================================================================
   Every page loads this file. It is the only place the brand colors, their
   text shades, and the wheel shades are written down.
   ========================================================================== */

:root {
  /* The eight brand colors. Chosen so every pair looks clearly different,
     including for common types of color blindness. If one changes, also
     check the text shades and wheel shades below and the wheel label
     colors in core/climate-color.js; core/index.html flags anything that
     falls below 4.5:1. Blend swatches in core/blends.js follow on their
     own. */
  --red-color: #EB0333;
  --orange-color: #E98B21;
  --yellow-color: #FCCD01;
  --green-color: #46760F;
  --blue-color: #196BB7;
  --indigo-color: #231566;
  --purple-color: #89387A;
  --violet-color: #DA5EFB;

  /* Text shades: each color's darker version for words on white or on a
     light tint. Every one clears 4.5:1 against white. Red, Green, Blue,
     Indigo, and Purple already clear it at full strength, so their shade
     is the same as the color; Orange, Yellow, and Violet are darkened
     toward black until they do. */
  --red-text: #EB0333;
  --orange-text: #AA6518;
  --yellow-text: #8D7301;
  --green-text: #46760F;
  --blue-text: #196BB7;
  --indigo-text: #231566;
  --purple-text: #89387A;
  --violet-text: #AE4BC9;

  /* Wheel shades: the outer ring of the brand wheel. Each color's three
     verbs sit on three shades of it, lightest to darkest going clockwise.
     Hand-picked in the brand deck (CC_Branding_091926.pptx, slide 6), so
     they are not worked out from the colors above: if the palette changes,
     choose these again. core/index.html shows all 24 with their contrast. */
  --yellow-tint-1: #FFF2CC; --yellow-tint-2: #F9ED91; --yellow-tint-3: #F9DD67;
  --orange-tint-1: #FBE5D6; --orange-tint-2: #F8CBAD; --orange-tint-3: #F4B183;
  --red-tint-1: #F8C4C4; --red-tint-2: #F4A6A6; --red-tint-3: #EF8181;
  --violet-tint-1: #F7CEFE; --violet-tint-2: #F5BEFE; --violet-tint-3: #F2ADFD;
  --indigo-tint-1: #E6E0F8; --indigo-tint-2: #CFC5F1; --indigo-tint-3: #AA97E5;
  --purple-tint-1: #E4D3ED; --purple-tint-2: #D5BAE4; --purple-tint-3: #C19AD6;
  --green-tint-1: #E2F0D9; --green-tint-2: #C5E0B4; --green-tint-3: #A9D18E;
  --blue-tint-1: #DEEBF7; --blue-tint-2: #BDD7EE; --blue-tint-3: #71AADD;

  /* Verb text on the wheel shades. A little darker than the brand deck's
     gray, so it clears 4.5:1 on all 24. */
  --wheel-verb-text: #333333;

  /* Brand Accents */
  --brand-sky: #74C1DF;
  --brand-teal: #1494B9;
  --brand-lime: #90BB3E;

  /* Global Light UI Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;

  --text-primary: #212121;
  --text-secondary: #475569;
  --text-muted: #64748B;

  --border-color: #E2E8F0;
  --border-strong: #CBD5E1;

  /* Shadows */
  --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.04);
  --shadow-hover: 0 6px 12px rgba(0,0,0,0.06);
}

/* ==========================================================================
   Global Base Styles & Resets
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Varela Round', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
html,
body {
  -ms-overflow-style: none;  /* IE and Legacy Edge */
  scrollbar-width: none;     /* Firefox */
}

/* Keeps the page's first and last margins inside the page, so its measured
   height is its real height. The quiz's resize script relies on this, or
   the Squarespace box comes out too short and cuts off the top. Looks the
   same either way. */
body {
  display: flow-root;
}

/* Breathing room at the edges on phones, the same on every page. On wider
   screens, Squarespace's own page margins provide it. */
@media (max-width: 640px) {
  body {
    padding: 1.25rem 0.85rem;
  }
}

/* ==========================================================================
   Shared Header Component
   ========================================================================== */

.quiz-header {
  text-align: left;
  margin-bottom: 1.5rem;
}

.quiz-header h1 {
  font-family: 'ADLaM Display', 'Varela Round', sans-serif;
  font-size: 2.3rem;
  font-weight: 500;
  color: var(--brand-teal);
  margin: 0 0 1rem 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quiz-header p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   Global Soft Pill & Button Component Utilities
   ========================================================================== */

.pill-btn,
.btn-pill-soft {
  font-family: inherit;
  border-radius: 9999px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  text-decoration: none;
  display: inline-block;
}

.pill-btn:hover,
.btn-pill-soft:hover {
  transform: translateY(-1px);
  background: var(--bg-tertiary);
}

/* Color pills and buttons. One recipe for every pill on the site: an 8%
   tint of the color, a 25% tint border, and words in the text shade mixed
   88% with black, so they always clear 4.5:1. core/index.html shows each
   one with its contrast. */
.pill-red, .btn-red-soft { background-color: color-mix(in srgb, var(--red-color) 8%, white); border: 1px solid color-mix(in srgb, var(--red-color) 25%, white); color: color-mix(in srgb, var(--red-text) 88%, black); }
.pill-orange, .btn-orange-soft { background-color: color-mix(in srgb, var(--orange-color) 8%, white); border: 1px solid color-mix(in srgb, var(--orange-color) 25%, white); color: color-mix(in srgb, var(--orange-text) 88%, black); }
.pill-yellow, .btn-yellow-soft { background-color: color-mix(in srgb, var(--yellow-color) 8%, white); border: 1px solid color-mix(in srgb, var(--yellow-color) 25%, white); color: color-mix(in srgb, var(--yellow-text) 88%, black); }
.pill-green, .btn-green-soft { background-color: color-mix(in srgb, var(--green-color) 8%, white); border: 1px solid color-mix(in srgb, var(--green-color) 25%, white); color: color-mix(in srgb, var(--green-text) 88%, black); }
.pill-blue, .btn-blue-soft { background-color: color-mix(in srgb, var(--blue-color) 8%, white); border: 1px solid color-mix(in srgb, var(--blue-color) 25%, white); color: color-mix(in srgb, var(--blue-text) 88%, black); }
.pill-indigo, .btn-indigo-soft { background-color: color-mix(in srgb, var(--indigo-color) 8%, white); border: 1px solid color-mix(in srgb, var(--indigo-color) 25%, white); color: color-mix(in srgb, var(--indigo-text) 88%, black); }
.pill-purple, .btn-purple-soft { background-color: color-mix(in srgb, var(--purple-color) 8%, white); border: 1px solid color-mix(in srgb, var(--purple-color) 25%, white); color: color-mix(in srgb, var(--purple-text) 88%, black); }
.pill-violet, .btn-violet-soft { background-color: color-mix(in srgb, var(--violet-color) 8%, white); border: 1px solid color-mix(in srgb, var(--violet-color) 25%, white); color: color-mix(in srgb, var(--violet-text) 88%, black); }

/* Global Theme Text Helpers: words in a color use its text shade. */
.theme-red { color: var(--red-text); }
.theme-orange { color: var(--orange-text); }
.theme-yellow { color: var(--yellow-text); }
.theme-green { color: var(--green-text); }
.theme-blue { color: var(--blue-text); }
.theme-indigo { color: var(--indigo-text); }
.theme-purple { color: var(--purple-text); }
.theme-violet { color: var(--violet-text); }

/* ==========================================================================
   Global Print Defaults
   ========================================================================== */

@media print {
    body {
        padding: 0;
        background: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }
}