/* 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. */

:root {
  /* Light mode: cool off-white base, deep navy text, brand blue darkened for AA contrast */
  --c-ink: 246 247 249;          /* page background */
  --c-steel: 236 240 244;        /* raised surface */
  --c-steel-light: 214 221 230;  /* hairlines */
  --c-bone: 14 22 33;            /* primary text */
  --c-bone-dim: 64 78 97;        /* secondary text */
  --c-slate: 92 108 130;         /* tertiary text */
  --c-brand: 11 111 185;         /* single accent */
  --c-brand-bright: 11 111 185;
  --c-brand-deep: 11 95 165;
  --c-safety: 255 213 0;         /* reserved for the phone CTA only */
  --c-on-safety: 10 14 20;
  --c-alert: 196 70 20;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-ink: 8 13 20;
    --c-steel: 15 25 38;
    --c-steel-light: 30 45 62;
    --c-bone: 234 240 246;
    --c-bone-dim: 160 177 194;
    --c-slate: 120 138 158;
    --c-brand: 30 160 240;
    --c-brand-bright: 92 198 255;
    --c-brand-deep: 11 95 165;
    --c-alert: 255 122 61;
    color-scheme: dark;
  }
}

body {
  background-color: rgb(var(--c-ink));
  background-image: radial-gradient(ellipse 60% 40% at 12% 0%, rgb(var(--c-brand) / 0.08), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 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); }