/* ===================================================================
   CENTRALIZED COLOR SYSTEM
   Single source of truth for all colors in the application
   =================================================================== */

:root {
  /* =================================================================
     RAW COLOR PALETTE - DO NOT USE DIRECTLY IN COMPONENTS
     These are the base color values that semantic tokens reference
     ================================================================= */
  
  /* Grayscale Palette */
  --white: #FFFFFF;
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --black: #000000;
  
  /* =================================================================
     SEMANTIC TOKENS - USE THESE IN COMPONENTS
     These provide meaning and can be easily updated without affecting raw colors
     ================================================================= */
  
  /* Background Tokens */
  --color-background: var(--white);              /* Main app background */
  --color-bg-card: var(--gray-50);              /* Standard card background */
  --color-bg-card-primary: var(--white);        /* Hero/special card background */
  --color-bg-card-hover: var(--gray-100);       /* Card hover state */
  --color-bg-card-active: var(--gray-200);      /* Card active/pressed state */
  --color-bg-overlay: rgba(0, 0, 0, 0.5);       /* Modal overlay */
  --color-bg-input: var(--white);               /* Input field background */
  --color-bg-input-disabled: var(--gray-50);    /* Disabled input background */
  
  /* Text Tokens - Comprehensive Hierarchy */
  --color-text-primary: var(--gray-900);       /* Primary text (#111827) */
  --color-text-secondary: var(--gray-600);     /* Secondary text (#4B5563) */
  --color-text-muted: var(--gray-500);         /* Muted/tertiary text (#6B7280) */
  --color-text-disabled: var(--gray-400);      /* Disabled text (#9CA3AF) */
  --color-text-placeholder: var(--gray-400);   /* Placeholder text */
  --color-text-inverse: var(--white);          /* Text on dark backgrounds */
  --color-text-link: var(--gray-700);          /* Link text */
  --color-text-link-hover: var(--gray-900);    /* Link hover state */
  
  /* Legacy mapping for backward compatibility */
  --color-text-tertiary: var(--color-text-muted);
  
  /* Special text colors for financial data */
  --color-text-value: var(--gray-800);               /* Financial values use lighter gray-800 */
  --color-text-heading: var(--color-text-primary);   /* Headings use primary text */
  
  /* Border Tokens - Complete Set */
  --color-border-light: var(--gray-200);       /* Light borders (#E5E7EB) */
  --color-border-default: var(--gray-300);     /* Default borders (#D1D5DB) */
  --color-border-strong: var(--gray-400);      /* Strong borders (#9CA3AF) */
  --color-border-focus: var(--gray-500);       /* Focus state borders */
  --color-border-error: var(--gray-700);       /* Error state borders */
  
  /* Legacy mapping */
  --color-border-medium: var(--color-border-default);
  --color-border-heavy: var(--color-border-strong);
  --color-border-primary: var(--color-border-light);
  --color-border-secondary: var(--gray-100);
  
  /* Accent Tokens - Zen Minimalist Grays */
  --color-accent: var(--gray-600);             /* Primary accent (#4B5563) */
  --color-accent-hover: var(--gray-700);       /* Accent hover (#374151) */
  --color-accent-active: var(--gray-800);      /* Accent pressed (#1F2937) */
  --color-accent-muted: var(--gray-100);       /* Muted accent background */
  --color-accent-subtle: var(--gray-50);       /* Very subtle accent */
  
  /* Interactive States */
  --color-focus-ring: var(--gray-400);         /* Focus ring color */
  --color-selection-bg: var(--gray-100);       /* Text selection background */
  --color-selection-text: var(--gray-900);     /* Text selection color */
  
  /* Legacy mappings */
  --accent-muted: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-active: var(--color-accent-active);
  --accent-primary: var(--color-accent);
  
  /* Chart Colors - All Grays */
  --color-chart-primary: var(--gray-600);
  --color-chart-secondary: var(--gray-400);
  --color-chart-tertiary: var(--gray-300);
  
  /* Hover States - Subtle */
  --color-hover-overlay: rgba(0, 0, 0, 0.02);
  --color-active-overlay: rgba(0, 0, 0, 0.04);
  
  /* Shadows - Zen Soft Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.03), 0 4px 6px rgba(0, 0, 0, 0.02);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.03), 0 10px 10px rgba(0, 0, 0, 0.02);
  
  /* Gradients - Minimal */
  --gradient-surface: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  --gradient-surface-hover: linear-gradient(135deg, var(--white) 0%, var(--gray-100) 100%);
  --gradient-subtle: linear-gradient(90deg, var(--white) 0%, var(--gray-50) 100%);
  
  /* Animation Colors */
  --color-skeleton-base: var(--gray-100);
  --color-skeleton-shine: var(--gray-50);
  
  /* Status Colors - Semantic with Grayscale */
  --color-status-success: var(--gray-600);     /* Success state */
  --color-status-warning: var(--gray-700);     /* Warning state */
  --color-status-error: var(--gray-800);       /* Error state */
  --color-status-info: var(--gray-500);        /* Info state */

  /* Status Backgrounds */
  --color-status-success-bg: var(--gray-50);
  --color-status-warning-bg: var(--gray-100);
  --color-status-error-bg: var(--gray-100);
  --color-status-info-bg: var(--gray-50);

  /* =================================================================
     FINANCIAL COLORS - Subtle accents for gains/losses
     Keep the grayscale vibe but add meaning to financial data
     ================================================================= */

  /* Positive/Gains - Muted sage green */
  --color-positive: #22c55e;                    /* Green for positive arrows */
  --color-positive-muted: #22c55e20;            /* 12% opacity green background */
  --color-positive-text: #15803d;               /* Dark green for text */
  --color-positive-bg: #f0fdf4;                 /* Very light green bg */

  /* Negative/Losses - Muted rose red */
  --color-negative: #ef4444;                    /* Red for negative arrows */
  --color-negative-muted: #ef444420;            /* 12% opacity red background */
  --color-negative-text: #b91c1c;               /* Dark red for text */
  --color-negative-bg: #fef2f2;                 /* Very light red bg */

  /* Assets indicator - grayscale (dark gray) */
  --color-assets: var(--gray-600);              /* Dark gray for assets */
  --color-assets-bg: var(--gray-50);

  /* Liabilities indicator - grayscale (medium gray) */
  --color-liabilities: var(--gray-400);         /* Medium gray for liabilities */
  --color-liabilities-bg: var(--gray-100);
  
  /* Legacy mappings */
  --color-success: var(--color-status-success);
  --color-warning: var(--color-status-warning);
  --color-error: var(--color-status-error);
  --color-info: var(--color-status-info);
  
  /* Button & CTA Tokens */
  --color-button-primary-bg: var(--color-text-primary);
  --color-button-primary-text: var(--color-text-inverse);
  --color-button-primary-border: var(--color-text-primary);
  --color-button-primary-hover-bg: var(--color-text-secondary);
  
  --color-button-secondary-bg: var(--color-bg-card);
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-secondary-border: var(--color-border-default);
  --color-button-secondary-hover-bg: var(--color-bg-card-hover);
  
  --color-button-outline-bg: transparent;
  --color-button-outline-text: var(--color-text-primary);
  --color-button-outline-border: var(--color-border-default);
  --color-button-outline-hover-bg: var(--color-bg-card-hover);
  
  /* Legacy Support - Will be deprecated */
  --color-surface: var(--color-bg-card);
  --color-surface-hover: var(--color-bg-card-hover);
  --color-surface-active: var(--color-bg-card-active);
  --color-bg-primary: var(--color-bg-card-primary);
  --color-bg-secondary: var(--color-bg-card);
  --color-primary: var(--color-accent);
  --color-primary-dark: var(--color-accent-hover);
  --color-primary-light: var(--color-accent-muted);
  --color-border-primary: var(--color-border-light);
  --color-border-secondary: var(--gray-100);
  --accent-primary: var(--color-accent);
}