/* Lock Raven - site.css
   Semantic color tokens consumed by the Tailwind config (rgb(var(--c-x) / <alpha-value>)).
   One token set, two themes, switched by prefers-color-scheme. Every existing utility
   class (bg-ink, text-bone, border-steel-light...) keeps working in both modes. */

/* Theme: "Urgent Local Service". Dark-locked by brand direction (explicit user instruction).
   Surfaces are Deep Charcoal #1A1D20. Amber #F59E0B is reserved strictly for primary CTAs
   and phone buttons (bg-safety / text-on-safety). Brand blue remains for icons and text links. */
:root {
  --c-ink: 19 21 24;             /* page background #131518 (off-black, never pure #000) */
  --c-steel: 26 29 32;           /* surfaces: Deep Charcoal #1A1D20 */
  --c-steel-light: 48 53 59;     /* hairlines #30353B */
  --c-bone: 242 244 246;         /* primary text */
  --c-bone-dim: 172 179 187;     /* secondary text, 9:1 on ink */
  --c-slate: 134 143 153;        /* tertiary text, 5.6:1 on ink */
  --c-brand: 56 170 240;         /* brand blue for icons / links */
  --c-brand-bright: 110 196 245;
  --c-brand-deep: 11 95 165;
  --c-safety: 245 158 11;        /* High-Visibility Amber #F59E0B: CTAs + phone only */
  --c-on-safety: 17 19 21;       /* text on amber, 9.4:1 */
  --c-alert: 248 113 113;
  color-scheme: dark;
}

body {
  background-color: rgb(var(--c-ink));   /* flat: no decorative gradients */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mobile sticky call bar: reserve space so it never covers the last content or the footer */
@media (max-width: 767px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Scroll reveal: IntersectionObserver in site.js adds .is-visible.
   Motivation: sequences the page top to bottom so the eye lands on each section's headline first. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Tactile press feedback on every CTA */
.btn-press { transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease; }
.btn-press:active { transform: translateY(1px) scale(0.99); }

/* Visible, consistent focus for keyboard users in both themes */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgb(var(--c-brand));
  outline-offset: 2px;
}

/* Native <details> accordion: hide default marker, rotate our icon */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .acc-icon { transform: rotate(45deg); }
.acc-icon { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }