/**
 * @file fcl-design-tokens.css
 * @module ForecloSure Design System
 * @since 2025
 *
 * PROPRIETARY AND CONFIDENTIAL - TIU Consulting, LLC
 *
 * Unified Design Token System for ForecloSure (FCL) Module.
 * Inherits EvictSure design tokens with FCL brand additions.
 */

:root {
  /* ========================================================================
     PRIMARY COLOR SYSTEM - iOS Blue (#007AFF) as standard (matches EvictSure)
     ======================================================================== */
  --evict-primary-50: #E5F2FF;
  --evict-primary-100: #CCE5FF;
  --evict-primary-300: #3396FF;
  --evict-primary-500: #007AFF;
  --evict-primary-700: #0062CC;
  --evict-primary-900: #004499;

  --evict-primary: var(--evict-primary-500);
  --evict-primary-dark: var(--evict-primary-700);
  --evict-primary-light: var(--evict-primary-300);
  --evict-primary-bg: var(--evict-primary-50);

  /* ========================================================================
     FCL BRAND COLORS
     ======================================================================== */
  --fcl-brand-blue: #1B4F8A;
  --fcl-brand-orange: #E87425;
  --fcl-brand-blue-light: #2B6FB8;
  --fcl-brand-orange-light: #F09045;

  /* ========================================================================
     STATUS COLORS
     ======================================================================== */
  --evict-success: #27AE60;
  --evict-success-light: #4ADE80;
  --evict-success-bg: #F0FDF4;
  --evict-success-bg-strong: #C8E6C9;

  --evict-warning: #F39C12;
  --evict-warning-light: #FFB347;
  --evict-warning-bg: #FFFBEB;
  --evict-warning-text: #78350F;

  --evict-danger: #E74C3C;
  --evict-danger-light: #FF6B6B;
  --evict-danger-bg: #FEF2F2;

  --evict-info: #3498DB;
  --evict-info-light: #66B0FF;
  --evict-info-bg: #EFF6FF;

  --evict-error: var(--evict-danger);

  /* ========================================================================
     NEUTRAL COLORS
     ======================================================================== */
  --evict-gray-50: #F9FAFB;
  --evict-gray-100: #F3F4F6;
  --evict-gray-200: #E5E7EB;
  --evict-gray-300: #D1D5DB;
  --evict-gray-400: #9CA3AF;
  --evict-gray-500: #6B7280;
  --evict-gray-600: #4B5563;
  --evict-gray-700: #374151;
  --evict-gray-800: #1F2937;
  --evict-gray-900: #111827;

  /* ========================================================================
     BACKGROUND & TEXT COLORS - Light Mode
     ======================================================================== */
  --evict-bg-primary: #FFFFFF;
  --evict-bg-secondary: #F9FAFB;
  --evict-bg-tertiary: #F3F4F6;

  --evict-text-primary: #111827;
  --evict-text-secondary: #4B5563;
  --evict-text-tertiary: #6B7280;
  --evict-text-disabled: #9CA3AF;

  --evict-border-primary: #E5E7EB;
  --evict-border-secondary: #D1D5DB;
  --evict-border-tertiary: #E5E7EB;

  /* ========================================================================
     GRADIENTS - Light Mode
     ======================================================================== */
  --evict-gradient-primary: linear-gradient(135deg, var(--evict-primary-500) 0%, var(--evict-primary-700) 100%);
  --evict-gradient-primary-subtle: linear-gradient(135deg, var(--evict-primary-300) 0%, var(--evict-primary-500) 100%);
  --evict-gradient-success: linear-gradient(135deg, #4ADE80 0%, #16A34A 100%);
  --evict-gradient-warning: linear-gradient(135deg, #FFB347 0%, #FF8C00 100%);
  --evict-gradient-danger: linear-gradient(135deg, #FF6B6B 0%, #EE5A52 100%);
  --evict-gradient-info: linear-gradient(135deg, #66B0FF 0%, #3498DB 100%);
  --fcl-gradient-brand: linear-gradient(135deg, var(--fcl-brand-blue) 0%, var(--fcl-brand-orange) 100%);

  /* ========================================================================
     COMPONENT TOKENS
     ======================================================================== */
  --evict-button-height-sm: 36px;
  --evict-button-height-md: 44px;
  --evict-button-height-lg: 52px;
  --evict-button-padding-sm: 8px 16px;
  --evict-button-padding-md: 10px 24px;
  --evict-button-padding-lg: 12px 32px;
  --evict-button-radius: 8px;
  --evict-button-font-weight: 500;
  --evict-button-font-size: 14px;

  --evict-input-height: 44px;
  --evict-input-radius: 8px;
  --evict-input-padding: 10px 12px;
  --evict-input-border-width: 1px;
  --evict-input-border-color: var(--evict-border-primary);
  --evict-input-bg: var(--evict-bg-primary);
  --evict-input-text-color: var(--evict-text-primary);
  --evict-input-focus-border: var(--evict-primary);
  --evict-input-focus-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);

  --evict-card-radius: 12px;
  --evict-card-padding: 20px;
  --evict-card-bg: var(--evict-bg-primary);
  --evict-card-border: 1px solid var(--evict-border-primary);

  /* Surface aliases — several v2 pages reference --evict-surface(-2)/--evict-border
     which never existed, so their var() fallbacks rendered hardcoded LIGHT panels and
     LIGHT card outlines in dark mode (user-reported 2026-07-13). Aliasing to the real
     bg/border tokens fixes every consumer at once and inherits the [data-theme="dark"]
     overrides automatically; light mode is unchanged (--evict-border-primary is the
     same #E5E7EB the pages already fell back to). */
  --evict-surface: var(--evict-bg-primary);
  --evict-surface-2: var(--evict-bg-tertiary);
  --evict-border: var(--evict-border-primary);

  /* ========================================================================
     SPACING
     ======================================================================== */
  --evict-spacing-xs: 4px;
  --evict-spacing-sm: 8px;
  --evict-spacing-md: 16px;
  --evict-spacing-lg: 24px;
  --evict-spacing-xl: 32px;
  --evict-spacing-2xl: 48px;

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */
  --evict-radius-xs: 4px;
  --evict-radius-sm: 6px;
  --evict-radius-md: 8px;
  --evict-radius-lg: 12px;
  --evict-radius-xl: 16px;

  /* ========================================================================
     SHADOWS
     ======================================================================== */
  --evict-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --evict-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --evict-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --evict-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --evict-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --evict-shadow-primary: 0 4px 12px rgba(0, 122, 255, 0.3);
  --evict-shadow-primary-hover: 0 8px 20px rgba(0, 122, 255, 0.35);
  --evict-shadow-primary-focus: 0 0px 0px 3px rgba(0, 122, 255, 0.1);
  --evict-shadow-success: 0 4px 12px rgba(39, 174, 96, 0.25);
  --evict-shadow-danger: 0 4px 12px rgba(231, 76, 60, 0.25);
  --evict-shadow-warning: 0 4px 12px rgba(243, 156, 18, 0.25);

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */
  --evict-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --evict-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;

  --evict-font-size-xs: 12px;
  --evict-font-size-sm: 13px;
  --evict-font-size-md: 14px;
  --evict-font-size-lg: 16px;
  --evict-font-size-xl: 18px;
  --evict-font-size-2xl: 20px;

  --evict-line-height-tight: 1.25;
  --evict-line-height-normal: 1.5;

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */
  --evict-transition-fast: 150ms ease-in-out;
  --evict-transition-base: 200ms ease-in-out;
  --evict-transition-slow: 300ms ease-in-out;

  /* ========================================================================
     Z-INDEX SCALE
     ======================================================================== */
  --evict-z-dropdown: 1000;
  --evict-z-sticky: 1020;
  --evict-z-fixed: 1030;
  --evict-z-modal-backdrop: 1040;
  --evict-z-modal: 1050;
  --evict-z-tooltip: 1070;

  /* Sidebar width (Xocket spec: 250px expanded / 72px collapsed rail) */
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 72px;
  --header-height: 60px;
}

/* ============================================================================
   LIGHT MODE - Explicit data-theme
   ============================================================================ */
:root[data-theme="light"] {
  --evict-primary-50: #E5F2FF;
  --evict-primary-100: #CCE5FF;
  --evict-primary-300: #3396FF;
  --evict-primary-500: #007AFF;
  --evict-primary-700: #0062CC;
  --evict-primary-900: #004499;

  --evict-success: #27AE60;
  --evict-success-light: #4ADE80;
  --evict-success-bg: #F0FDF4;
  --evict-warning: #F39C12;
  --evict-warning-light: #FFB347;
  --evict-warning-bg: #FFFBEB;
  --evict-warning-text: #78350F;
  --evict-danger: #E74C3C;
  --evict-danger-light: #FF6B6B;
  --evict-danger-bg: #FEF2F2;
  --evict-info: #3498DB;
  --evict-info-light: #66B0FF;
  --evict-info-bg: #EFF6FF;

  --evict-bg-primary: #FFFFFF;
  --evict-bg-secondary: #F9FAFB;
  --evict-bg-tertiary: #F3F4F6;
  --evict-text-primary: #111827;
  --evict-text-secondary: #4B5563;
  --evict-text-tertiary: #6B7280;
  --evict-text-disabled: #9CA3AF;
  --evict-border-primary: #E5E7EB;
  --evict-border-secondary: #D1D5DB;
  --evict-border-tertiary: #E5E7EB;

  --evict-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --evict-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --evict-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --evict-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --evict-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --evict-input-focus-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* ============================================================================
   DARK MODE - Explicit data-theme
   ============================================================================ */
:root[data-theme="dark"] {
  --evict-primary-50: #001F3F;
  --evict-primary-100: #003366;
  --evict-primary-300: #66B0FF;
  --evict-primary-500: #0A84FF;
  --evict-primary-700: #0066CC;
  --evict-primary-900: #0051A8;

  --fcl-brand-blue: #3B7FCA;
  --fcl-brand-orange: #F09045;

  --evict-success: #4ADE80;
  --evict-success-light: #86EFAC;
  --evict-success-bg: #064E3B;
  --evict-warning: #FFB347;
  --evict-warning-light: #FFD68F;
  --evict-warning-bg: #78350F;
  --evict-warning-text: #FBBF24;
  --evict-danger: #FF6B6B;
  --evict-danger-light: #FF8888;
  --evict-danger-bg: #7F1D1D;
  --evict-info: #66B0FF;
  --evict-info-light: #99C8FF;
  --evict-info-bg: #082F49;

  --evict-bg-primary: #1C1C1E;
  --evict-bg-secondary: #2C2C2E;
  --evict-bg-tertiary: #3A3A3C;
  --evict-text-primary: #F5F5F7;
  --evict-text-secondary: #A1A1A6;
  --evict-text-tertiary: #86868B;
  --evict-text-disabled: #5E5E60;
  --evict-border-primary: #3A3A3C;
  --evict-border-secondary: #424245;
  --evict-border-tertiary: #3A3A3C;

  --evict-gradient-primary: linear-gradient(135deg, var(--evict-primary-500) 0%, #0066CC 100%);
  --evict-gradient-success: linear-gradient(135deg, #86EFAC 0%, #4ADE80 100%);
  --evict-gradient-warning: linear-gradient(135deg, #FFD68F 0%, #FFB347 100%);
  --evict-gradient-danger: linear-gradient(135deg, #FF8888 0%, #FF6B6B 100%);
  --evict-gradient-info: linear-gradient(135deg, #99C8FF 0%, #66B0FF 100%);

  --evict-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --evict-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --evict-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --evict-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --evict-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
  --evict-shadow-primary: 0 4px 12px rgba(10, 132, 255, 0.25);
  --evict-shadow-primary-hover: 0 8px 20px rgba(10, 132, 255, 0.3);
  --evict-input-focus-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}