/* ==========================================================================
   giv.care Utah — theme
   Warm, grounded and established: bone paper, sandstone and juniper tints,
   canyon-clay accent, Wasatch-blue cool tint and an evergreen ink. Inspired
   by Wasatch evening light, valley neighborhoods, cottonwoods and sandstone —
   never by park, arch, pioneer, religious or ski imagery.

   Every text pairing below was checked against WCAG 2.2 AA (4.5:1 body text,
   3:1 large text and UI). Ratios are noted where they matter.
   ========================================================================== */

:root {
  --paper: #FAF5EC;       --paper-rgb: 250 245 236;   /* bone */
  --text: #3B3934;        --text-rgb: 59 57 52;       /* 10.6:1 on bone */
  --ink: #1C2521;         --ink-rgb: 28 37 33;        /* evergreen ink */
  --ink-2: #26302B;       --ink-2-rgb: 38 48 43;
  --muted: #65605A;                                   /* 5.7:1 on bone, 4.7:1 on sandstone */

  --tint-warm: #F1DEC6;   /* sandstone */
  --tint-cool: #DCE5E8;   /* Wasatch blue, softened */
  --tint-sun: #E2E6D3;    /* juniper sage */
  --support: #3E604F;     /* juniper — 5.5:1 on Wasatch tint */
  --support-soft: #9DB6C2;/* Wasatch blue */

  --accent: #AF4F2C;      --accent-rgb: 175 79 44;    /* canyon clay — white text 5.3:1 */
  --accent-ink: #A24826;  /* clay for text on light — 5.5:1 on bone */
  --accent-soft: #EBA785; /* clay for text on ink — 7.8:1 */
  --accent-on-ink: #EBA785;
  --accent-fg: #FFFFFF;   /* text on a clay fill */
  --accent-hover: #963F21;
  --accent-2: #D38A5F;
  --accent-wash: #F7E8DF;

  --ok-bg: #DCEBDD;
  --ok-fg: #235C36;       /* 6.4:1 on ok-bg */
  --ok-fg-2: #235C36;
  --ok-dot: #3E8E5A;
  --cta-glow-2: #6F8FA3;  /* Wasatch blue */
  --cta-glow-3: #D6A56F;  /* sandstone light */
}

/* Icons drawn as data URIs can't read custom properties: restate them in Utah colors. */
.checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E604F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.on-ink .checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBA785' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.faq summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2521' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
}
.faq details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B3934' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.glossary-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B3934' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Utah art direction
   Softer, lower-contrast light than Colorado's night-sky aurora: an evening
   glow over layered Wasatch valley bands. Motion is slower and quieter.
   -------------------------------------------------------------------------- */
.aurora span { opacity: .6; animation-duration: 34s; }
.aurora .a3 { background: rgb(var(--accent-rgb) / .22); }
.cta-band .aurora span { opacity: .28; }
.grain { opacity: .28; }

/* Layered valley: three quiet bands (foothills, bench, valley floor) */
.valley { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; }
.valley svg { width: 100%; height: clamp(90px, 12vw, 170px); }
.valley .v1 { fill: var(--support-soft); opacity: .26; }
.valley .v2 { fill: var(--tint-warm); opacity: .55; }
.valley .v3 { fill: var(--paper); }
.valley .line { fill: none; stroke: var(--support); stroke-opacity: .28; stroke-width: 1.4; }
.on-ink .valley .v1, .cta-band .valley .v1 { fill: var(--support-soft); opacity: .12; }
.on-ink .valley .v2, .cta-band .valley .v2 { fill: var(--paper); opacity: .05; }
.on-ink .valley .v3, .cta-band .valley .v3 { fill: var(--paper); opacity: .04; }
.on-ink .valley .line, .cta-band .valley .line { stroke: var(--paper); stroke-opacity: .2; }

/* Home hero: a still photograph (no autoplay video), warm light at the edges */
.hero .arch { background: var(--tint-warm); }
.hero .arch::after { background: linear-gradient(180deg, transparent 60%, rgb(var(--ink-rgb) / .28)); }
.hero-visual .light {
  position: absolute; inset: -8% -12% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .22), rgb(var(--accent-rgb) / 0) 68%);
}

/* The region pill in the Utah lockup is warm sandstone on evergreen */
.state-switch .region, .wordmark .region { background: var(--ink-2); color: var(--tint-warm); }

/* Home hero video panel: poster shows while the stream loads */
.hero-frame { background-image: url("/assets/video/home-kitchen/poster.jpg"); }