/* ============================================================
   LUCIA Design Tokens
   Lending Underwriting & Credit Intelligence Agent

   Design: Clean white + Teal accent
   Reference: Mercury, Linear light mode
   ============================================================ */

:root {

  /* ========================================
     COLORS
     ======================================== */

  /* Surfaces — warm white system (Wenli Palette B + C sage tints) */
  --lc-bg-1: #FFFFFF;
  --lc-bg-2: #FAFAF7;
  --lc-bg-3: #F2F1ED;
  --lc-bg-4: #E8E8E6;

  /* Dark surfaces (hero, sidebar, CTA) */
  --lc-dark-1: #0A0A0A;
  --lc-dark-2: #1A1A1A;
  --lc-dark-3: #2A2A2A;
  --lc-dark-4: #050505;

  /* Text */
  --lc-text: #0A0A0A;
  --lc-text-light: #FAFAF7;
  --lc-text-secondary: #5C5C5C;
  --lc-text-muted: #8A8A87;

  /* Accent — desaturated sage/teal (Wenli Palette C) */
  --lc-accent: #5A8A88;
  --lc-accent-hover: #4A7674;
  --lc-accent-light: #EDF2F2;

  /* Borders */
  --lc-border: #E8E8E6;
  --lc-border-dashed: #F0EFEB;
  --lc-border-solid: #E5E3DD;
  --lc-border-dark: #D6D4CE;

  /* Status — monochromatic with accent */
  --lc-green: var(--lc-accent);
  --lc-green-bg: var(--lc-accent-light);
  --lc-green-light: var(--lc-accent-light);

  --lc-amber: #5C5C5C;
  --lc-amber-bg: #F2F1ED;
  --lc-amber-light: #FAFAF7;

  --lc-red: #0A0A0A;
  --lc-red-bg: #E8E8E6;
  --lc-red-light: #F2F1ED;

  /* Button surfaces */
  --lc-btn-ghost: rgba(0, 0, 0, 0.03);
  --lc-btn-ghost-border: #E5E3DD;

  /* Input */
  --lc-input-bg: #FAFAF7;
  --lc-input-placeholder: #8A8A87;
  --lc-input-focus: #EDF2F2;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  --lc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lc-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --lc-font-accent: var(--lc-font);

  /* Font sizes */
  --lc-text-display: clamp(2.5rem, 5vw, 4.75rem);
  --lc-text-h1: clamp(2rem, 3.5vw, 3.5rem);
  --lc-text-h2: clamp(1.5rem, 2.5vw, 2.75rem);
  --lc-text-h3: clamp(1.25rem, 1.8vw, 2rem);
  --lc-text-h4: clamp(1.125rem, 1.5vw, 1.5rem);
  --lc-text-h5: clamp(1rem, 1.2vw, 1.25rem);
  --lc-text-body: clamp(1rem, 1.1vw, 1.125rem);
  --lc-text-small: 0.9375rem;
  --lc-text-micro: 0.875rem;
  --lc-text-nano: 0.8125rem;

  /* Line heights */
  --lc-lh-tight: 1.1;
  --lc-lh-heading: 1.2;
  --lc-lh-body: 1.6;
  --lc-lh-relaxed: 1.7;

  /* Letter spacing */
  --lc-ls-display: -0.04em;
  --lc-ls-h1: -0.035em;
  --lc-ls-h2: -0.025em;
  --lc-ls-h3: -0.015em;
  --lc-ls-body: 0;
  --lc-ls-label: 0.04em;
  --lc-ls-tag: 0.06em;

  /* Font weights */
  --lc-fw-regular: 400;
  --lc-fw-medium: 500;
  --lc-fw-semibold: 600;
  --lc-fw-bold: 700;

  /* ========================================
     SPACING (4px base)
     ======================================== */

  --lc-space-1: 4px;
  --lc-space-2: 8px;
  --lc-space-3: 12px;
  --lc-space-4: 16px;
  --lc-space-5: 20px;
  --lc-space-6: 24px;
  --lc-space-8: 32px;
  --lc-space-10: 40px;
  --lc-space-12: 48px;
  --lc-space-16: 64px;
  --lc-space-20: 80px;
  --lc-space-24: 96px;
  --lc-space-32: 128px;

  /* ========================================
     RADIUS
     ======================================== */

  --lc-radius-sm: 6px;
  --lc-radius-md: 10px;
  --lc-radius-lg: 14px;
  --lc-radius-pill: 9999px;

  /* ========================================
     LAYOUT
     ======================================== */

  --lc-container: 1200px;
  --lc-container-sm: 960px;
  --lc-container-lg: 1400px;
  --lc-nav-height: 64px;
  --lc-sidebar-width: 260px;
  --lc-topbar-height: 52px;
  --lc-ai-panel-width: 380px;
  --lc-section-nav-width: 220px;

  /* ========================================
     SHADOWS — clean, cool-toned
     ======================================== */

  --lc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --lc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --lc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --lc-shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --lc-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --lc-ease-snappy: cubic-bezier(0.17, 0.17, 0.43, 1);
  --lc-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --lc-duration-fast: 150ms;
  --lc-duration-normal: 300ms;
  --lc-duration-slow: 500ms;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --lc-z-base: 1;
  --lc-z-lines: 3;
  --lc-z-sticky: 10;
  --lc-z-dropdown: 50;
  --lc-z-nav: 100;
  --lc-z-overlay: 200;
  --lc-z-modal: 300;
  --lc-z-toast: 400;
  --lc-z-tooltip: 500;

  /* ========================================
     DASHED LINE TEXTURE
     ======================================== */

  --lc-line-dash-h: repeating-linear-gradient(
    to right,
    var(--lc-border-dashed) 0 7px,
    transparent 7px 14px
  );
  --lc-line-dash-v: repeating-linear-gradient(
    to bottom,
    var(--lc-border-dashed) 0 7px,
    transparent 7px 14px
  );
  --lc-line-solid: linear-gradient(to right, var(--lc-border));
  --lc-line-mask: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );

  /* ========================================
     CHART COLORS — sage monochromatic
     ======================================== */

  --lc-chart-1: #5A8A88;
  --lc-chart-2: #7BA5A3;
  --lc-chart-3: #9BBDBC;
  --lc-chart-4: #B8CFCE;
  --lc-chart-5: #DCE6E6;
  --lc-chart-6: #EDF2F2;
}