/* ==========================================================================
   LEVERAGE CONSUMER DESIGN SYSTEM — "Neighbor, Fast"
   Shared tokens + components for consumer-facing pages:
     index.html · intake-form.html · (adapted variant: for-attorneys.html)
   The attorney dashboard continues to use styles/design-system.css.

   Import order on each consumer page:
     <link rel="stylesheet" href="styles/consumer-system.css">
     then page-specific <style> block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS
   -------------------------------------------------------------------------- */
@import url('https://api.fontshare.com/v2/css?f[]=gambetta@500,600,700&f[]=switzer@400,500,600,700&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Core palette */
  --c-pine:        #1E3A30;
  --c-pine-deep:   #152B24;
  --c-ivory:       #F6F2EA;
  --c-ivory-warm:  #EFE9DD;
  --c-ivory-bright:#FDFBF6;
  --c-ink:         #22302B;
  --c-ink-soft:    #5C6B64;
  --c-amber:       #C97F3D;
  --c-amber-deep:  #B06A2C;

  /* Lines & borders */
  --c-line:        #DDD6C8;
  --c-line-dark:   #2E4A3F;

  /* On-pine text */
  --c-on-pine:       #F6F2EA;
  --c-on-pine-soft:  #C9D6CD;
  --c-on-pine-muted: #7E9488;
  --c-on-pine-faint: #5F7568;

  /* Functional */
  --c-danger:      #B23A3A;
  --c-danger-bg:   #FBF1F1;
  --c-success:     #1B6B4A;
  --c-success-bg:  #EDF7F1;

  /* Type */
  --font-display: 'Gambetta', Georgia, serif;
  --font-body:    'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape */
  --radius-card:  20px;
  --radius-ctrl:  12px;
  --radius-pill:  999px;

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Layout */
  --page-max: 1040px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--c-ivory);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
input, button, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

h1, h2, h3, .font-display { font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   3. COMPONENT — NAV (pine)
   -------------------------------------------------------------------------- */
.c-nav {
  background: var(--c-pine);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--c-line-dark);
}
.c-nav-in {
  max-width: var(--page-max); margin: 0 auto;
  padding: 15px 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.c-brand {
  font-family: var(--font-display);
  font-weight: 600; font-size: 23px; letter-spacing: .01em;
  color: var(--c-ivory); text-decoration: none;
}
.c-lang {
  font-size: 13px; font-weight: 500; color: var(--c-on-pine-soft);
  background: none; border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.c-lang:hover { color: var(--c-on-pine); border-color: var(--c-on-pine-muted); }

/* --------------------------------------------------------------------------
   4. COMPONENT — BUTTONS
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; text-decoration: none; cursor: pointer;
  border: none; white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
  -webkit-user-select: none; user-select: none;
}
.c-btn:active { transform: scale(.98); }

.c-btn-pine  { background: var(--c-pine);  color: var(--c-ivory); font-size: 16px; padding: 15px 30px; }
.c-btn-pine:hover  { background: var(--c-pine-deep); }
.c-btn-amber { background: var(--c-amber); color: #fff; font-size: 16.5px; padding: 15px 32px; }
.c-btn-amber:hover { background: var(--c-amber-deep); }
.c-btn-ivory { background: var(--c-ivory); color: var(--c-pine); font-size: 16px; padding: 15px 30px; }
.c-btn-ivory:hover { background: #fff; }
.c-btn-ghost {
  background: transparent; color: var(--c-pine);
  border: 1.5px solid var(--c-line); font-size: 16px; padding: 14px 28px;
}
.c-btn-ghost:hover { border-color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   5. COMPONENT — SECTION HEADINGS
   -------------------------------------------------------------------------- */
.c-kicker {
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-amber);
}
.c-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(29px, 4.8vw, 44px);
  letter-spacing: -.01em; line-height: 1.08;
  margin-top: 12px; max-width: 22ch;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   6. COMPONENT — STICKY MOBILE CTA
   Pages using this must also set body padding-bottom (see utility below).
   -------------------------------------------------------------------------- */
.c-sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  padding: 11px 15px calc(11px + env(safe-area-inset-bottom));
  background: rgba(246, 242, 234, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-line);
}
.c-sticky a {
  display: block; text-align: center;
  background: var(--c-pine); color: var(--c-ivory);
  font-weight: 600; font-size: 17px; padding: 16px;
  border-radius: var(--radius-pill); text-decoration: none;
}
body.has-sticky { padding-bottom: 88px; }
@media (min-width: 880px) {
  .c-sticky { display: none; }
  body.has-sticky { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   7. COMPONENT — LEGAL DISCLAIMER FOOTER
   Copy is compliance-reviewed. Do not alter text in markup.
   -------------------------------------------------------------------------- */
.c-legal { background: var(--c-pine-deep); padding: 34px 22px; }
.c-legal-in { max-width: 720px; margin: 0 auto; }
.c-legal h4 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--c-on-pine-muted); margin-bottom: 12px;
}
.c-legal p { font-size: 12px; line-height: 1.65; color: var(--c-on-pine-muted); }
.c-legal-links { margin-top: 16px; text-align: center; font-size: 12px; color: var(--c-on-pine-faint); }
.c-legal-links a { color: var(--c-on-pine-muted); }

/* --------------------------------------------------------------------------
   8. COMPONENT — TOAST (compatible with scripts/toast.js)
   -------------------------------------------------------------------------- */
#toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  max-width: 280px; border-radius: 10px; padding: 12px 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  line-height: 1.4; color: #fff; pointer-events: auto;
  transform: translateX(110%); transition: transform 250ms ease;
}
.toast-visible { transform: translateX(0); }
.toast-success { background-color: var(--c-pine); }
.toast-error   { background-color: var(--c-danger); }