/* ============================================================================
   PAVELIO DESIGN SYSTEM — Foundations
   colors_and_type.css

   The single source of truth for color + type tokens. Import this first.
   Two layers:
     1. PRIMITIVES  — raw scales (green, gray, lime, semantic ramps)
     2. SEMANTIC    — role-based tokens (bg, fg, border, primary, etc.)
                      defined for LIGHT (:root) and DARK ([data-theme="dark"])
     3. TYPE        — font families + a semantic type scale

   Brand: Pavelio — a CRM for door-to-door sales teams.
   Voice: sleek & premium (Vercel/Apple) with an energetic sales-floor spark.
   ========================================================================== */

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

/* ============================================================================
   1. PRIMITIVES
   ========================================================================== */
:root {
  /* --- Pavelio Green (signature) ------------------------------------------ */
  --green-50:  #EAFBF1;
  --green-100: #CCF6DF;
  --green-200: #99EDC0;
  --green-300: #5FDD9C;
  --green-400: #25C97D;
  --green-500: #10B069;   /* brand identity color — logo, brand moments      */
  --green-600: #0A9457;   /* primary action fills (white text)               */
  --green-700: #0B7647;
  --green-800: #0C5D3A;
  --green-900: #0A4B30;
  --green-950: #04291A;

  /* --- Lime Spark (energetic accent — use sparingly) ---------------------- */
  --lime-300: #C6F76A;
  --lime-400: #A6EE39;
  --lime-500: #84CC16;    /* "win", streaks, hot leads, celebratory moments   */

  /* --- Neutral / Gray (faint cool-green undertone) ------------------------ */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F8F7;
  --gray-100: #EEF1F0;
  --gray-200: #E2E7E5;
  --gray-300: #CFD6D3;
  --gray-400: #9BA5A1;
  --gray-500: #6B7672;
  --gray-600: #4C5651;
  --gray-700: #38413D;
  --gray-800: #232A27;
  --gray-900: #141917;
  --gray-950: #0A0D0C;

  /* --- Semantic ramps (status / feedback) --------------------------------- */
  --blue-100:   #DBEAFE;  --blue-500:   #3B82F6;  --blue-600:   #2563EB;
  --violet-100: #EDE9FE;  --violet-500: #8B5CF6;  --violet-600: #7C3AED;
  --amber-100:  #FEF3C7;  --amber-500:  #F59E0B;  --amber-600:  #D97706;
  --red-100:    #FEE2E2;  --red-500:    #EF4444;  --red-600:    #DC2626;
  --slate-100:  #F1F5F9;  --slate-500:  #64748B;  --slate-600:  #475569;
}

/* ============================================================================
   2. SEMANTIC TOKENS — LIGHT (default)
   ========================================================================== */
:root {
  /* Surfaces */
  --bg:            var(--gray-50);   /* app canvas                            */
  --surface:       var(--gray-0);    /* cards, panels, sheets                 */
  --surface-2:     var(--gray-50);   /* nested / subtle wells                 */
  --surface-3:     var(--gray-100);  /* hover wells, track backgrounds        */
  --overlay:       rgba(10, 13, 12, 0.45); /* modal scrim                     */

  /* Foreground / text */
  --fg:            var(--gray-900);  /* primary text                          */
  --fg-muted:      var(--gray-600);  /* secondary text                        */
  --fg-subtle:     var(--gray-500);  /* tertiary / meta                       */
  --fg-faint:      var(--gray-400);  /* placeholder, disabled                 */
  --fg-on-brand:   #FFFFFF;          /* text on green fills                    */

  /* Borders / lines */
  --border:        var(--gray-200);  /* default hairline                      */
  --border-strong: var(--gray-300);  /* inputs, emphasized dividers           */
  --border-faint:  var(--gray-100);  /* internal table rules                  */

  /* Brand + primary action */
  --brand:         var(--green-500);
  --primary:       var(--green-600);
  --primary-hover: var(--green-700);
  --primary-press: var(--green-800);
  --primary-soft:  var(--green-50);  /* tinted backgrounds, selected rows     */
  --primary-soft-fg: var(--green-700);
  --ring:          color-mix(in oklch, var(--green-500) 45%, transparent);

  /* Accent */
  --accent:        var(--lime-500);
  --accent-soft:   #F2FBDD;

  /* Status — feedback */
  --success:     var(--green-600);  --success-soft:  var(--green-50);   --success-fg:  var(--green-700);
  --warning:     var(--amber-600);  --warning-soft:  var(--amber-100);  --warning-fg:  #92600B;
  --danger:      var(--red-600);    --danger-soft:   var(--red-100);    --danger-fg:   #B42318;
  --info:        var(--blue-600);   --info-soft:     var(--blue-100);   --info-fg:     #1D4ED8;

  /* Pipeline / knock-outcome statuses (product-specific) */
  --status-new:        var(--blue-500);     --status-new-soft:        var(--blue-100);
  --status-appt:       var(--violet-500);   --status-appt-soft:       var(--violet-100);
  --status-followup:   var(--amber-500);    --status-followup-soft:   var(--amber-100);
  --status-sold:       var(--green-500);    --status-sold-soft:       var(--green-50);
  --status-nothome:    var(--slate-500);    --status-nothome-soft:    var(--slate-100);
  --status-lost:       var(--red-500);      --status-lost-soft:       var(--red-100);

  /* Elevation — soft, sleek shadows (cool-tinted) */
  --shadow-xs:  0 1px 2px rgba(10, 13, 12, 0.05);
  --shadow-sm:  0 1px 2px rgba(10, 13, 12, 0.06), 0 1px 3px rgba(10, 13, 12, 0.05);
  --shadow-md:  0 2px 4px rgba(10, 13, 12, 0.05), 0 6px 16px rgba(10, 13, 12, 0.08);
  --shadow-lg:  0 8px 24px rgba(10, 13, 12, 0.10), 0 2px 6px rgba(10, 13, 12, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(10, 13, 12, 0.18);
  --shadow-brand: 0 6px 20px -4px color-mix(in oklch, var(--green-600) 40%, transparent);

  color-scheme: light;
}

/* ============================================================================
   2b. SEMANTIC TOKENS — DARK  (Vercel-style near-black)
   ========================================================================== */
[data-theme="dark"] {
  --bg:            #0A0D0C;
  --surface:       #121614;
  --surface-2:     #171C1A;
  --surface-3:     #1F2522;
  --overlay:       rgba(0, 0, 0, 0.6);

  --fg:            #F1F4F3;
  --fg-muted:      #A4AEAA;
  --fg-subtle:     #79847F;
  --fg-faint:      #555E5A;
  --fg-on-brand:   #04291A;

  --border:        #262C29;
  --border-strong: #333A36;
  --border-faint:  #1C211F;

  --brand:         var(--green-400);
  --primary:       var(--green-500);
  --primary-hover: var(--green-400);
  --primary-press: var(--green-300);
  --primary-soft:  rgba(16, 176, 105, 0.12);
  --primary-soft-fg: var(--green-300);
  --ring:          color-mix(in oklch, var(--green-400) 55%, transparent);

  --accent:        var(--lime-400);
  --accent-soft:   rgba(132, 204, 22, 0.14);

  --success: var(--green-400); --success-soft: rgba(16,176,105,0.14);  --success-fg: var(--green-300);
  --warning: var(--amber-500); --warning-soft: rgba(245,158,11,0.15);  --warning-fg: #FBBF24;
  --danger:  var(--red-500);   --danger-soft:  rgba(239,68,68,0.15);   --danger-fg:  #FCA5A5;
  --info:    var(--blue-500);  --info-soft:    rgba(59,130,246,0.15);  --info-fg:    #93C5FD;

  --status-new:      var(--blue-500);    --status-new-soft:      rgba(59,130,246,0.16);
  --status-appt:     var(--violet-500);  --status-appt-soft:     rgba(139,92,246,0.16);
  --status-followup: var(--amber-500);   --status-followup-soft: rgba(245,158,11,0.16);
  --status-sold:     var(--green-400);   --status-sold-soft:     rgba(16,176,105,0.16);
  --status-nothome:  var(--slate-500);   --status-nothome-soft:  rgba(100,116,139,0.18);
  --status-lost:     var(--red-500);     --status-lost-soft:     rgba(239,68,68,0.16);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 28px 56px -12px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 6px 22px -4px rgba(16, 176, 105, 0.45);

  color-scheme: dark;
}

/* ============================================================================
   3. TYPOGRAPHY
   ========================================================================== */
:root {
  /* Families */
  --font-display: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px). Display = Space Grotesk; everything else = Geist.       */
  --text-display: 4.25rem;  /* 68px — hero marketing                         */
  --text-h1:      2.5rem;   /* 40px                                          */
  --text-h2:      2rem;     /* 32px                                          */
  --text-h3:      1.5rem;   /* 24px                                          */
  --text-h4:      1.25rem;  /* 20px                                          */
  --text-lg:      1.125rem; /* 18px — lead paragraphs                        */
  --text-base:    0.9375rem;/* 15px — default UI/body                        */
  --text-sm:      0.8125rem;/* 13px — secondary, table cells                 */
  --text-xs:      0.75rem;  /* 12px — captions, labels, badges               */

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --tracking-tight:  -0.02em;   /* display + large headings                  */
  --tracking-snug:   -0.01em;   /* h3/h4                                     */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;    /* eyebrows, all-caps labels                 */

  /* Radii — Apple-ish soft, pills for tags */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* default — inputs, small cards                     */
  --radius-lg:  14px;   /* cards, panels                                     */
  --radius-xl:  20px;   /* large surfaces, modals                           */
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Spacing — 4px base */
  --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; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ----------------------------------------------------------------------------
   Semantic element helpers — apply with utility classes or copy into components
   ---------------------------------------------------------------------------- */
.pv-display {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: var(--fw-bold); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--fg);
}
.pv-h1 {
  font-family: var(--font-display); font-size: var(--text-h1);
  font-weight: var(--fw-bold); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--fg);
}
.pv-h2 {
  font-family: var(--font-display); font-size: var(--text-h2);
  font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--fg);
}
.pv-h3 {
  font-family: var(--font-sans); font-size: var(--text-h3);
  font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); color: var(--fg);
}
.pv-h4 {
  font-family: var(--font-sans); font-size: var(--text-h4);
  font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); color: var(--fg);
}
.pv-lead {
  font-family: var(--font-sans); font-size: var(--text-lg);
  font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-muted);
}
.pv-body {
  font-family: var(--font-sans); font-size: var(--text-base);
  font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg);
}
.pv-small {
  font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-muted);
}
.pv-eyebrow {
  font-family: var(--font-sans); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--fg-subtle);
}
.pv-mono {
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: var(--fw-regular); letter-spacing: 0;
  font-feature-settings: "tnum" 1, "zero" 1; color: var(--fg);
}
/* Tabular numerals for dense data tables / metrics */
.pv-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }