/* Sopris Rx — brand tokens and custom styles
   Palette derived from the SoprisRx logo mark. */

:root {
  --brand-50:  #F2F7F4;
  --brand-100: #E3EFE8;
  --brand-200: #C9DED3;
  --brand-300: #A8C8B8;
  --brand-400: #7FB397;
  --brand-500: #589878;
  --brand-600: #0A6B4C;
  --brand-700: #00513A;
  --brand-800: #00291D;
  --brand-900: #001810;

  --ink:    #0F1A16;
  --body:   #47554F;
  --muted:  #606E68;
  --line:   #DCE5E0;
  --canvas: #F7FAF8;
  --clay:   #A84B32;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; color: var(--body); }
h1, h2, h3, h4, .font-display { font-family: 'Lexend', system-ui, sans-serif; }

/* Keyboard focus — never removed, only restyled. */
:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--brand-300); }

/* Scroll reveal. Starts visible, JS adds .reveal only if motion is allowed,
   so the page is fully readable with JS disabled. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.link-underline {
  background-image: linear-gradient(var(--brand-400), var(--brand-400));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left 90%;
  transition: background-size 250ms ease;
}
.link-underline:hover { background-size: 100% 2px; }

/* Hero door panels: green duotone over photography so three different
   stock sources read as one brand system. */
.door-media::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.door-1 .door-media::after { background: var(--brand-700); }
.door-2 .door-media::after { background: var(--brand-600); }
.door-3 .door-media::after { background: var(--brand-800); }
.door-media img { filter: grayscale(100%) contrast(1.05); }
.door-scrim {
  background: linear-gradient(to top, rgba(0, 24, 16, 0.92) 0%, rgba(0, 24, 16, 0.45) 45%, rgba(0, 24, 16, 0.15) 100%);
}
.door { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 768px) {
  .door:hover { transform: translateY(-6px); }
  .door:hover .door-media img { transform: scale(1.04); }
}
.door-media img { transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }

.step-rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 32px;
  width: 66.666%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--brand-300) 0 8px, transparent 8px 16px);
  transform: translateX(-33.333%);
  display: none;
}
@media (min-width: 1024px) { .step-rail::before { display: block; } }

input[type='range'] { accent-color: var(--brand-700); }

@media print {
  .no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .door, .door-media img { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}