/* ============================================================================
   RED FEATHER PROPERTY MANAGEMENT — Glacier theme
   Second skin for the same pages: white paper, fairly monochromatic with
   quiet light blue-gray hints. Elegant, technology-forward, smooth, light.
   Display serif is replaced with Space Grotesk; the single accent is a
   restrained slate-blue ("glacier") instead of the brand red — the red
   monogram in the logo stays the only red on the page.
   Same selectors and structure as redfeather.css; only the paint changes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---- White, faintly cool surfaces ---- */
  --paper:   oklch(99.4% 0.0015 250);
  --paper-2: oklch(97.7% 0.004 248);
  --paper-3: oklch(95.5% 0.007 247);

  /* ---- Cool blue-gray neutral ramp (hue ~250, whisper chroma) ---- */
  --n-50:  oklch(98.3% 0.003 250);
  --n-100: oklch(96.2% 0.005 249);
  --n-200: oklch(92.2% 0.007 249);
  --n-300: oklch(86.4% 0.010 250);
  --n-400: oklch(73.0% 0.014 251);
  --n-500: oklch(60.0% 0.018 252);
  --n-600: oklch(49.0% 0.020 253);
  --n-700: oklch(39.5% 0.020 254);
  --n-800: oklch(30.0% 0.018 255);
  --n-900: oklch(23.0% 0.016 256);
  --n-950: oklch(17.0% 0.014 256);
  --ink:   oklch(20.5% 0.015 256);

  /* ---- Glacier slate-blue — the single quiet accent (mapped onto "signal") ---- */
  --brand-red:        oklch(62.5% 0.245 26); /* accent text + the logo's red, a notch brighter */
  --brand-red-bright: oklch(70% 0.205 24);   /* for dark ink bands — keeps the red luminous */
  --brand-red-hover:  oklch(56.5% 0.235 26);
  --brand-red-press:  oklch(51% 0.22 26);
  --signal:        oklch(45% 0.075 252);
  --signal-hover:  oklch(40% 0.072 252);
  --signal-press:  oklch(35.5% 0.066 252);
  --signal-weak:   oklch(96% 0.013 248);
  --signal-border: oklch(87% 0.032 248);

  /* ---- Status (rationed, functional only) ---- */
  --positive:      oklch(58% 0.10 165);
  --positive-weak: oklch(95.5% 0.03 165);
  --warning:       oklch(74% 0.11 80);

  /* ---- Semantic roles ---- */
  --bg:        var(--paper);
  --bg-raised: var(--paper-2);
  --bg-inset:  var(--paper-3);
  --bg-invert: var(--ink);

  --fg:           var(--ink);
  --fg-muted:     var(--n-600);
  --fg-subtle:    var(--n-500);
  --fg-faint:     var(--n-400);
  --fg-on-invert: var(--paper);
  --fg-link:      var(--brand-red);

  --border:        oklch(91% 0.006 250);
  --border-strong: oklch(85% 0.010 250);
  --border-faint:  oklch(94% 0.004 250);
  --ring:          var(--signal);

  /* ---- Radii ---- */
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 18px; --radius-2xl: 26px; --radius-pill: 999px;

  /* ---- Elevation — soft, cool-neutral, low ---- */
  --shadow-xs: 0 1px 0 0 oklch(30% 0.02 252 / 0.04);
  --shadow-sm: 0 1px 2px -1px oklch(30% 0.02 252 / 0.09), 0 1px 1px oklch(30% 0.02 252 / 0.04);
  --shadow-md: 0 6px 18px -6px oklch(30% 0.03 252 / 0.12), 0 2px 5px -2px oklch(30% 0.02 252 / 0.06);
  --shadow-lg: 0 16px 38px -10px oklch(28% 0.03 252 / 0.16), 0 6px 14px -6px oklch(28% 0.02 252 / 0.07);

  /* ---- Type families ---- */
  --font-display: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Fluid type scale (grotesk runs wider than the serif — a notch smaller) ---- */
  --text-eyebrow: 0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.4375rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.5rem;
  --text-4xl:  clamp(2.6rem, 5vw, 3.9rem);
  --text-5xl:  clamp(3rem, 6.4vw, 5.1rem);

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.6;
  --leading-relaxed: 1.72;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 224px;

  --container: 1200px;
  --container-prose: 720px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal);
  font-optical-sizing: auto;
}
::selection { background: var(--signal-weak); color: var(--signal-press); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--signal-weak), 0 0 0 1px var(--signal); border-radius: var(--radius-sm); }

/* ============================ LAYOUT ============================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 150px); }
.section-sm { padding-block: clamp(48px, 7vw, 96px); }
.hairline { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ============================ TYPE HELPERS ============================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-red);
}
.eyebrow .tick { width: 16px; height: 1px; background: var(--brand-red); display: inline-block; }
.eyebrow--red { color: var(--brand-red); }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.display em, .accent { font-style: normal; color: var(--brand-red); font-weight: 500; }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.measure { max-width: 62ch; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); margin: 0; color: var(--fg); }
.h-display { font-size: var(--text-5xl); line-height: 1.02; letter-spacing: -0.026em; }
.h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
.h2 { font-size: var(--text-3xl); line-height: 1.08; }
.h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-lg); line-height: var(--leading-normal); letter-spacing: var(--tracking-snug); color: var(--fg-muted); }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm);
  border-radius: var(--radius-md); padding: 11px 18px; border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .08s ease; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { background: var(--brand-red-hover); }
.btn-primary:active { background: var(--brand-red-press); }
.btn-secondary { background: var(--bg); color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--paper-2); border-color: var(--n-400); }
.btn-ghost { background: transparent; color: var(--fg-muted); padding-inline: 6px; }
.btn-ghost:hover { color: var(--fg); }
.btn-lg { padding: 14px 24px; font-size: var(--text-base); }
.btn-invert { background: var(--paper); color: var(--ink); }
.btn-invert:hover { background: var(--n-200); }
.btn .ic { width: 16px; height: 16px; }

/* ============================ TAG / DOT ============================ */
.tag {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--text-eyebrow); border-radius: var(--radius-pill); padding: 5px 12px;
  border: 1px solid var(--border); background: var(--paper-2); color: var(--fg-muted); letter-spacing: .02em;
}
.tag-signal { background: var(--signal-weak); color: var(--signal); border-color: var(--signal-border); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); display: inline-block; }
.dot-red { background: var(--brand-red); }

/* ============================ CARD ============================ */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.card-int { cursor: pointer; }
.card-int:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ============================ ARROW LINK ============================ */
.arrow-link { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-red); font-weight: 600; font-size: var(--text-sm); font-family: var(--font-sans); }
.arrow-link .ic { width: 15px; height: 15px; transition: transform .16s ease; }
.arrow-link:hover .ic { transform: translateX(4px); }

/* ============================ INVERT BAND ============================ */
.invert { background: var(--ink); color: var(--fg-on-invert); }
.invert .subtle { color: var(--n-400); }
.invert .eyebrow { color: var(--brand-red); }
.invert .muted { color: var(--n-300); }
.invert .lead { color: var(--n-300); }
.invert .hairline { border-color: oklch(100% 0 0 / 0.1); }
.invert h1, .invert h2, .invert h3 { color: var(--paper); }

/* ============================ ICONS ============================ */
.ic { display: inline-block; vertical-align: middle; }
svg.lucide { width: 1em; height: 1em; stroke-width: 1.75; }

/* ============================ MOTION ============================ */
.reveal { opacity: 1; transform: translateY(14px); transition: transform .6s cubic-bezier(.2,0,0,1), opacity .6s ease; }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================ INPUTS ============================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
.input, select.input {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--fg); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 14px;
  transition: box-shadow .15s ease, border-color .15s ease; width: 100%;
}
.input::placeholder { color: var(--fg-faint); }
select.input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 34px; cursor: pointer;
}
.input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-weak); }
textarea.input { resize: vertical; min-height: 104px; line-height: 1.5; }
.field-error .input { border-color: var(--signal); }
.err-msg { font-family: var(--font-mono); font-size: 11px; color: var(--signal); letter-spacing: .02em; display: none; }
.field-error .err-msg { display: block; }