/* ==========================================================================
   LEVERAGE DESIGN SYSTEM — Option C: Navy & Maroon (Law-Forward)
   Single source of truth for all design tokens and reusable components.
   Phase 1 of 4 — Design System Setup
   Import this file first in every page:
     <link rel="stylesheet" href="styles/design-system.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS
   -------------------------------------------------------------------------- */

/* Sentient — headlines and display */
@import url('https://api.fontshare.com/v2/css?f[]=sentient@400,500,700&display=swap');

/* Geist — UI and body */
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');


/* --------------------------------------------------------------------------
   1. COLOR TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* Core brand */
  --c-navy:             #0F1A2E;
  --c-navy-mid:         #162240;
  --c-maroon:           #7B2D3B;
  --c-gold:             #D4AA6B;

  /* Page backgrounds */
  --c-bg-page:          #F8F6F3;
  --c-bg-surface:       #F4F2EE;
  --c-bg-card:          #FFFFFF;

  /* Text hierarchy */
  --c-text-primary:     #0F1A2E;
  --c-text-secondary:   #5A6577;
  --c-text-muted:       #606C7A;   /* darkened from #7E8696 — now 4.87:1 on white (WCAG AA) */
  --c-text-faint:       #94A3B8;   /* decorative/large text only — fails 4.5:1 on white */
  --c-text-hero-sub:    #8B9AB5;
  --c-text-hero-pill:   #A0B0C8;

  /* Borders */
  --c-border:           #E0DCD5;
  --c-border-subtle:    #D0CBC2;
  --c-border-input:     #C8C3BA;
  --c-border-dark:      #1D2D4A;
  --c-border-hero:      #2A3B58;

  /* Tier & status colors */
  --c-success:          #1B6B4A;
  --c-success-bg:       #ECFDF5;
  --c-success-text:     #166534;
  --c-indigo:           #3730A3;
  --c-indigo-bg:        #EEF2FF;
  --c-indigo-text:      #3730A3;
  --c-warning-bg:       #FEF9EC;
  --c-warning-text:     #92400E;
  --c-danger:           #C24B4B;
}


/* --------------------------------------------------------------------------
   2. TYPOGRAPHY TOKENS
   -------------------------------------------------------------------------- */
:root {
  --font-display:          'Sentient', Georgia, serif;
  --font-ui:               'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
}


/* --------------------------------------------------------------------------
   3. SHAPE & SPACING TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* Border radius — client-facing (slightly softer) */
  --radius-card-client:    10px;
  --radius-btn-client:     4px;
  --radius-input-client:   6px;
  --radius-badge:          4px;
  --radius-question:       8px;

  /* Border radius — attorney-facing (tighter, more professional) */
  --radius-card-attorney:  6px;
  --radius-btn-attorney:   4px;
  --radius-input-attorney: 4px;

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


/* --------------------------------------------------------------------------
   4. BASE STYLES
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global focus ring — keyboard/AT users (WCAG AA) */
:focus-visible {
  outline:        2px solid var(--c-maroon);
  outline-offset: 2px;
}

body {
  font-family:              var(--font-ui);
  font-weight:              var(--font-weight-regular);
  color:                    var(--c-text-primary);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

/* Display & headline type — Sentient */
h1, h2, h3,
.hero-headline,
.form-title,
.question-text,
.section-title,
.card-title,
.confirmation-headline {
  font-family: var(--font-display);
}

/* Page-level background contexts */
body.client-page   { background: var(--c-bg-page); }
body.attorney-page { background: var(--c-bg-surface); }

/* Remove default list styles where used for UI */
ul, ol { list-style: none; }

/* Sensible image defaults */
img, video {
  display: block;
  max-width: 100%;
}

/* Inherit font for form elements */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}


/* --------------------------------------------------------------------------
   5. COMPONENT — BADGES
   Badge tiers communicate lead quality at a glance.
   -------------------------------------------------------------------------- */

.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  font-size:       13px;
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  border-radius:   var(--radius-badge);
  padding:         5px 10px;
  white-space:     nowrap;
  letter-spacing:  0.02em;
  text-transform:  uppercase;
}

/* Premium tier — green; high-confidence leads */
.badge-premium {
  background-color: var(--c-success-bg);
  color:            var(--c-success-text);
}

/* Standard tier — indigo */
.badge-standard {
  background-color: var(--c-indigo-bg);
  color:            var(--c-indigo-text);
}

/* Basic tier — neutral warm */
.badge-basic {
  background-color: #F4F2EE;
  color:            var(--c-text-secondary);
}

/* Warning state — amber */
.badge-warning {
  background-color: var(--c-warning-bg);
  color:            var(--c-warning-text);
}

/* Unlocked state — neutral, mirrors basic */
.badge-unlocked {
  background-color: #F4F2EE;
  color:            var(--c-text-secondary);
}


/* --------------------------------------------------------------------------
   6. COMPONENT — BUTTONS
   Two contexts: attorney dark-nav actions, and client-facing CTAs.
   -------------------------------------------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              6px;
  font-family:      inherit;
  cursor:           pointer;
  border:           none;
  background:       none;
  text-decoration:  none;
  white-space:      nowrap;
  transition:       all 0.2s ease;
  -webkit-user-select: none;
  user-select:      none;
}

/* Maroon — primary action on dark (hero/nav) backgrounds */
.btn-maroon {
  background-color: var(--c-maroon);
  color:            #F0E0D0;
  border-radius:    4px;
  padding:          8px 18px;
  font-size:        12px;
  font-weight:      var(--font-weight-medium);
  letter-spacing:   0.01em;
}

.btn-maroon:hover {
  background-color: #6A2533;  /* ~10% darker maroon */
  color:            #F5E8DC;
}

.btn-maroon:active {
  background-color: #5E2030;
  transform:        scale(0.98);
}

/* Outline — ghost button on hero / nav-dark context */
.btn-outline {
  background:     transparent;
  border:         1px solid var(--c-border-hero);
  color:          var(--c-text-hero-pill);
  border-radius:  4px;
  padding:        7px 16px;
  font-size:      12px;
  font-weight:    var(--font-weight-medium);
}

.btn-outline:hover {
  border-color: var(--c-text-hero-sub);
  color:        var(--c-text-hero-sub);
}

/* Primary CTA — client-facing forms (larger touch target) */
.btn-primary-client {
  background-color: var(--c-maroon);
  color:            #F0E0D0;
  border-radius:    6px;
  padding:          14px 28px;
  font-size:        14px;
  font-weight:      var(--font-weight-medium);
  letter-spacing:   0.01em;
  width:            100%;
}

.btn-primary-client:hover {
  background-color: #6A2533;
  color:            #F5E8DC;
}

.btn-primary-client:active {
  transform: scale(0.98);
}

.btn-primary-client:disabled {
  opacity:  0.5;
  cursor:   not-allowed;
  transform: none;
}


/* --------------------------------------------------------------------------
   7. COMPONENT — CARDS
   -------------------------------------------------------------------------- */

/* Attorney dashboard card — tighter radius, professional */
.card {
  background-color: var(--c-bg-card);
  border:           0.5px solid var(--c-border);
  border-radius:    var(--radius-card-attorney);
}

/* Client intake card — slightly softer radius */
.card-client {
  background-color: var(--c-bg-card);
  border:           0.5px solid var(--c-border);
  border-radius:    var(--radius-card-client);
}


/* --------------------------------------------------------------------------
   8. COMPONENT — INPUTS (client-facing)
   -------------------------------------------------------------------------- */

.input-client {
  width:            100%;
  padding:          11px 14px;
  border:           0.5px solid var(--c-border-input);
  border-radius:    6px;
  background-color: #FFFFFF;
  font-size:        15px;
  font-weight:      var(--font-weight-regular);
  color:            var(--c-text-primary);
  line-height:      1.4;
  transition:       border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance:       none;
}

.input-client::placeholder {
  color: var(--c-text-faint);
}

.input-client:focus {
  border-color:   var(--c-maroon);
  box-shadow:     0 0 0 3px rgba(123, 45, 59, 0.10);
  outline:        2px solid var(--c-maroon);
  outline-offset: 2px;
}

.input-client:disabled {
  background-color: var(--c-bg-surface);
  color:            var(--c-text-muted);
  cursor:           not-allowed;
}


/* --------------------------------------------------------------------------
   9. COMPONENT — NAVIGATION (dark / attorney)
   -------------------------------------------------------------------------- */

.nav-dark {
  background-color: var(--c-navy);
  border-bottom:    1px solid var(--c-border-dark);
}

.nav-dark a {
  color:       var(--c-text-hero-sub);
  font-size:   13px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition:  color 0.15s ease;
}

.nav-dark a:hover {
  color: #C8D4E8;
}

.nav-dark a.active {
  color: #E8E4DD;
}

.nav-dark a.btn-maroon {
  color: #F0E0D0;
}

.nav-dark .brand {
  color:       #E8E4DD;
  font-size:   17px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   10. COMPONENT — DETAIL CHIPS (attorney dashboard)
   Used inside lead cards to display structured metadata fields.
   -------------------------------------------------------------------------- */

.chip {
  background-color: var(--c-bg-page);
  border-radius:    4px;
  padding:          7px 10px;
}

.chip-label {
  display:      block;
  font-size:    10px;
  font-weight:  var(--font-weight-medium);
  color:        var(--c-text-faint);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chip-value {
  font-size:   12px;
  font-weight: var(--font-weight-medium);
  color:       var(--c-text-primary);
  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   11. COMPONENT — SCORE BAR
   Horizontal progress bar visualizing lead quality score.
   -------------------------------------------------------------------------- */

/* .score-bar-track, .score-bar-fill — removed; progress bar replaced by score number display */

.score-value-display {
  font-size:      18px;
  font-weight:    500;
  letter-spacing: -0.5px;
  line-height:    1;
}

.score-value-display.premium  { color: var(--c-success); }
.score-value-display.standard { color: var(--c-indigo); }
.score-value-display.basic    { color: var(--c-text-faint); }


/* --------------------------------------------------------------------------
   12. COMPONENT — FILTER PILLS
   Used in the attorney dashboard to filter leads by tier/status.
   -------------------------------------------------------------------------- */

.filter-pill {
  display:          inline-flex;
  align-items:      center;
  gap:              5px;
  font-size:        12px;
  font-weight:      var(--font-weight-medium);
  padding:          6px 14px;
  border-radius:    4px;
  border:           0.5px solid var(--c-border-subtle);
  color:            var(--c-text-secondary);
  background:       transparent;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-user-select: none;
  user-select:      none;
}

.filter-pill:hover {
  background-color: var(--c-bg-surface);
  border-color:     var(--c-border);
}

.filter-pill.active {
  background-color: var(--c-navy);
  color:            #FFFFFF;
  border-color:     var(--c-navy);
}


/* --------------------------------------------------------------------------
   13. SVG ICON SET
   Ready-to-use inline SVG strings for use directly in HTML files.
   All icons are 16×16 unless noted. Stroke-based, currentColor.

   Usage:
     Copy the SVG block into your HTML where the icon is needed.
     Size and color are controlled via width/height attributes and CSS color.

   ICONS INCLUDED:
     - lock        — blurred/locked contact info
     - check       — unlocked state, confirmation screen
     - clock       — time-sensitive / urgency flag
     - shield      — trust signals / verified badge
     - arrow-left  — back navigation (form wizard)
     - star        — Premium tier indicator

   ========================================================================== */

/*
  ── LOCK ICON ──────────────────────────────────────────────────────────────
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect x="3" y="7.5" width="10" height="7" rx="1.5"
          stroke="currentColor" stroke-width="1.25"/>
    <path d="M5.5 7.5V5a2.5 2.5 0 0 1 5 0v2.5"
          stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
    <circle cx="8" cy="11" r="1" fill="currentColor"/>
  </svg>

  ── CHECK / CHECKMARK ICON ─────────────────────────────────────────────────
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M3 8.5l3.5 3.5 6.5-7"
          stroke="currentColor" stroke-width="1.5"
          stroke-linecap="round" stroke-linejoin="round"/>
  </svg>

  ── CLOCK ICON ─────────────────────────────────────────────────────────────
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="8" cy="8" r="5.5"
            stroke="currentColor" stroke-width="1.25"/>
    <path d="M8 5v3.25l2 1.25"
          stroke="currentColor" stroke-width="1.25"
          stroke-linecap="round" stroke-linejoin="round"/>
  </svg>

  ── SHIELD ICON ────────────────────────────────────────────────────────────
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M8 2L3 4v4c0 2.761 2.239 5 5 5s5-2.239 5-5V4L8 2Z"
          stroke="currentColor" stroke-width="1.25"
          stroke-linejoin="round"/>
    <path d="M5.5 8l1.75 1.75L10.5 6.5"
          stroke="currentColor" stroke-width="1.25"
          stroke-linecap="round" stroke-linejoin="round"/>
  </svg>

  ── BACK ARROW (arrow-left) ────────────────────────────────────────────────
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M10 3L5 8l5 5"
          stroke="currentColor" stroke-width="1.5"
          stroke-linecap="round" stroke-linejoin="round"/>
  </svg>

  ── STAR / PREMIUM ICON ────────────────────────────────────────────────────
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M8 2l1.545 3.13 3.455.502-2.5 2.436.59 3.44L8 9.885l-3.09 1.623.59-3.44L3 5.632l3.455-.502L8 2Z"
          stroke="currentColor" stroke-width="1.25"
          stroke-linejoin="round"/>
  </svg>

  ========================================================================== */


/* --------------------------------------------------------------------------
   14. COMPONENT — TOAST NOTIFICATIONS
   Global toast system. Requires scripts/toast.js on each page.
   showToast(message, type)  — type: 'success' | 'error'
   -------------------------------------------------------------------------- */

#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:   4px;
  padding:         12px 16px;
  font-family:     var(--font-ui);
  font-size:       13px;
  font-weight:     var(--font-weight-medium);
  line-height:     1.4;
  color:           #FFFFFF;
  pointer-events:  auto;
  transform:       translateX(110%);
  transition:      transform 250ms ease;
}

.toast-visible {
  transform: translateX(0);
}

.toast-success { background-color: var(--c-navy); }
.toast-error   { background-color: var(--c-maroon); }