/**
 * @file design-tokens.css
 * @module EvictSure Design System
 * @since 2024
 *
 * PROPRIETARY AND CONFIDENTIAL
 * ==================================================================================
 *
 * Copyright © 2024-2025 TIU Consulting, LLC. All Rights Reserved.
 *
 * This source code and all associated documentation, materials, and information
 * (collectively, the "Software") are the exclusive property of TIU Consulting, LLC
 * and are protected by copyright law, trade secret law, and other applicable
 * intellectual property rights.
 *
 * UNAUTHORIZED USE PROHIBITED
 * ---------------------------
 * No part of this Software may be reproduced, distributed, transmitted, displayed,
 * published, broadcast, modified, adapted, sold, licensed, or otherwise exploited
 * in any form or by any means, including without limitation by photocopying,
 * recording, or other electronic or mechanical methods, without the prior written
 * permission of TIU Consulting, LLC.
 *
 * ==================================================================================
 *
 * Unified Design Token System
 *
 * This file serves as the single source of truth for all design tokens across
 * the EvictSure platform. It defines:
 * - Color palettes (primary, status colors, neutral colors)
 * - Gradients (for various component states and contexts)
 * - Component-specific tokens (buttons, inputs, spacing, shadows)
 * - Light and dark mode variants
 *
 * Import this file FIRST in your HTML before other stylesheets to ensure
 * all CSS variables are available throughout the application.
 */

:root {
  /* ========================================================================
     PRIMARY COLOR SYSTEM - iOS Blue (#007AFF) as standard
     ======================================================================== */

  /* Color Scale - Light Mode */
  --evict-primary-50: #E5F2FF;      /* Lightest background */
  --evict-primary-100: #CCE5FF;
  --evict-primary-300: #3396FF;     /* Light interactive */
  --evict-primary-500: #007AFF;     /* Base primary (iOS Blue) */
  --evict-primary-700: #0062CC;     /* Dark variant (hover/active) */
  --evict-primary-900: #004499;     /* Darkest variant */

  /* Primary Color Aliases */
  --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);

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

  --evict-success: #27AE60;
  --evict-success-light: #4ADE80;
  --evict-success-bg: #F0FDF4;

  --evict-warning: #F39C12;
  --evict-warning-light: #FFB347;
  --evict-warning-bg: #FFFBEB;

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

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

  /* Aliases for error (same as danger) */
  --evict-error: var(--evict-danger);
  --evict-error-light: var(--evict-danger-light);

  /* ========================================================================
     NEUTRAL COLORS - Grayscale
     ======================================================================== */

  --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%);

  /* Permission-specific gradient (warning/caution) */
  --evict-gradient-permission: linear-gradient(135deg, #FFB347 0%, #FF9800 100%);

  /* ========================================================================
     COMPONENT TOKENS - Buttons
     ======================================================================== */

  --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;

  /* ========================================================================
     COMPONENT TOKENS - Inputs
     ======================================================================== */

  --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);

  /* ========================================================================
     COMPONENT TOKENS - Cards & Containers
     ======================================================================== */

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

  --evict-container-radius: 8px;
  --evict-container-padding: 16px;

  /* ========================================================================
     COMPONENT TOKENS - 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;

  /* ========================================================================
     COMPONENT TOKENS - 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);

  /* Primary-colored shadows */
  --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);

  /* Status-colored shadows */
  --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;
  --evict-line-height-relaxed: 1.75;

  /* ========================================================================
     TRANSITIONS & ANIMATIONS
     ======================================================================== */

  --evict-transition-fast: 150ms ease-in-out;
  --evict-transition-base: 200ms ease-in-out;
  --evict-transition-slow: 300ms ease-in-out;

  --evict-timing-function-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --evict-timing-function-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --evict-timing-function-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================================================
     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-popover: 1060;
  --evict-z-tooltip: 1070;
}

/* ============================================================================
   DARK MODE - Adaptive Color Variants via System Preference
   ============================================================================

   In dark mode, we use brighter, more saturated colors for better contrast
   on dark backgrounds. This is not a simple opacity change - these are
   genuinely different colors that work better on dark backgrounds.
*/

@media (prefers-color-scheme: dark) {
  :root {
    /* PRIMARY COLOR SYSTEM - Brightened for dark mode */
    --evict-primary-50: #001F3F;      /* Darkest background */
    --evict-primary-100: #003366;
    --evict-primary-300: #66B0FF;     /* Light interactive (brighter) */
    --evict-primary-500: #0A84FF;     /* Base primary (brighter iOS Blue) */
    --evict-primary-700: #0066CC;     /* Dark variant stays similar */
    --evict-primary-900: #0051A8;

    /* ====================================================================
       BACKGROUND & TEXT COLORS - Dark Mode
       ==================================================================== */

    --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;

    /* ====================================================================
       STATUS COLORS - Dark Mode (Brightened)
       ==================================================================== */

    --evict-success: #4ADE80;
    --evict-success-light: #86EFAC;
    --evict-success-bg: #064E3B;

    --evict-warning: #FFB347;
    --evict-warning-light: #FFD68F;
    --evict-warning-bg: #78350F;

    --evict-danger: #FF6B6B;
    --evict-danger-light: #FF8888;
    --evict-danger-bg: #7F1D1D;

    --evict-info: #66B0FF;
    --evict-info-light: #99C8FF;
    --evict-info-bg: #082F49;

    /* ====================================================================
       GRADIENTS - Dark Mode (Brightened)
       ==================================================================== */

    --evict-gradient-primary: linear-gradient(135deg, var(--evict-primary-500) 0%, #0066CC 100%);
    --evict-gradient-primary-subtle: linear-gradient(135deg, var(--evict-primary-300) 0%, var(--evict-primary-500) 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-gradient-permission: linear-gradient(135deg, #FFD68F 0%, #FFB347 100%);

    /* ====================================================================
       SHADOWS - Dark Mode (More subtle)
       ==================================================================== */

    --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-shadow-primary-focus: 0 0px 0px 3px rgba(10, 132, 255, 0.15);

    --evict-shadow-success: 0 4px 12px rgba(74, 222, 128, 0.2);
    --evict-shadow-danger: 0 4px 12px rgba(255, 107, 107, 0.2);
    --evict-shadow-warning: 0 4px 12px rgba(255, 179, 71, 0.2);

    /* ====================================================================
       INPUT FOCUS - Dark Mode
       ==================================================================== */

    --evict-input-focus-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
  }
}

/* ============================================================================
   LIGHT MODE - Explicit data-theme attribute selector (highest specificity)
   ============================================================================ */

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

  /* STATUS COLORS - Light Mode */
  --evict-success: #27AE60;
  --evict-success-light: #4ADE80;
  --evict-success-bg: #F0FDF4;

  --evict-warning: #F39C12;
  --evict-warning-light: #FFB347;
  --evict-warning-bg: #FFFBEB;

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

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

  /* 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%);
  --evict-gradient-permission: linear-gradient(135deg, #FFB347 0%, #FF9800 100%);

  /* SHADOWS - Light Mode */
  --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);

  --evict-input-focus-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* ============================================================================
   DARK MODE - Explicit data-theme attribute selector
   ============================================================================ */

:root[data-theme="dark"] {
  /* PRIMARY COLOR SYSTEM - Brightened for dark mode */
  --evict-primary-50: #001F3F;
  --evict-primary-100: #003366;
  --evict-primary-300: #66B0FF;
  --evict-primary-500: #0A84FF;
  --evict-primary-700: #0066CC;
  --evict-primary-900: #0051A8;

  /* STATUS COLORS - Dark Mode (Brightened) */
  --evict-success: #4ADE80;
  --evict-success-light: #86EFAC;
  --evict-success-bg: #064E3B;

  --evict-warning: #FFB347;
  --evict-warning-light: #FFD68F;
  --evict-warning-bg: #78350F;

  --evict-danger: #FF6B6B;
  --evict-danger-light: #FF8888;
  --evict-danger-bg: #7F1D1D;

  --evict-info: #66B0FF;
  --evict-info-light: #99C8FF;
  --evict-info-bg: #082F49;

  /* BACKGROUND & TEXT COLORS - Dark Mode */
  --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;

  /* GRADIENTS - Dark Mode (Brightened) */
  --evict-gradient-primary: linear-gradient(135deg, var(--evict-primary-500) 0%, #0066CC 100%);
  --evict-gradient-primary-subtle: linear-gradient(135deg, var(--evict-primary-300) 0%, var(--evict-primary-500) 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-gradient-permission: linear-gradient(135deg, #FFD68F 0%, #FFB347 100%);

  /* SHADOWS - Dark Mode (More subtle) */
  --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-shadow-primary-focus: 0 0px 0px 3px rgba(10, 132, 255, 0.15);

  --evict-shadow-success: 0 4px 12px rgba(74, 222, 128, 0.2);
  --evict-shadow-danger: 0 4px 12px rgba(255, 107, 107, 0.2);
  --evict-shadow-warning: 0 4px 12px rgba(255, 179, 71, 0.2);

  --evict-input-focus-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

/* ============================================================================
   BACKWARD COMPATIBILITY ALIASES
   ============================================================================

   These variables maintain compatibility with existing code that uses
   different naming conventions. New code should use the --evict-* naming.
*/

:root {
  /* Legacy --evict-* prefix variables (for existing code) */
  --evict-error: var(--evict-danger);

  /* Legacy --evictsure-* prefix variables (for existing components) */
  --evictsure-primary: var(--evict-primary);
  --evictsure-primary-dark: var(--evict-primary-dark);
  --evictsure-primary-light: var(--evict-primary-light);
  --evictsure-success: var(--evict-success);
  --evictsure-warning: var(--evict-warning);
  --evictsure-danger: var(--evict-danger);
  --evictsure-info: var(--evict-info);
  --evictsure-error: var(--evict-danger);

  /* Generic aliases (for components using generic names) */
  --primary: var(--evict-primary);
  --primary-dark: var(--evict-primary-dark);
  --success: var(--evict-success);
  --warning: var(--evict-warning);
  --danger: var(--evict-danger);
  --info: var(--evict-info);
  --error: var(--evict-danger);

  --bg: var(--evict-bg-primary);
  --bg-secondary: var(--evict-bg-secondary);
  --text: var(--evict-text-secondary);
  --border: var(--evict-border-primary);

  --shadow: var(--evict-shadow-sm);
  --shadow-hover: var(--evict-shadow-primary);

  --radius-md: var(--evict-radius-md);
  --spacing-md: var(--evict-spacing-md);
}

/* ============================================================================
   UTILITY CLASSES (Optional - for common patterns)
   ============================================================================ */

.evict-text-primary {
  color: var(--evict-text-primary);
}

.evict-text-secondary {
  color: var(--evict-text-secondary);
}

.evict-bg-primary {
  background-color: var(--evict-bg-primary);
}

.evict-bg-secondary {
  background-color: var(--evict-bg-secondary);
}

.evict-border {
  border: 1px solid var(--evict-border-primary);
}

.evict-shadow {
  box-shadow: var(--evict-shadow-md);
}

.evict-shadow-primary {
  box-shadow: var(--evict-shadow-primary);
}

.evict-rounded {
  border-radius: var(--evict-radius-md);
}

.evict-transition {
  transition: all var(--evict-transition-base);
}

.evict-gradient-primary {
  background: var(--evict-gradient-primary);
}