/*--------------------------------------------------------------
# Color Scheme Variables
# This file contains all color scheme variables for the website
# Organized by: Primary, Secondary, Text, Background, etc.
# 
# USAGE:
#   Primary: var(--color-primary)
#   Secondary: var(--color-secondary)
#   Text: var(--color-text-primary)
#   Background: var(--color-bg-white)
#   Success: var(--color-success)
#   Warning: var(--color-warning)
#   Danger: var(--color-danger)
#   Info: var(--color-info)
--------------------------------------------------------------*/

:root {
  /* ============================================
     PRIMARY COLORS (Main Brand Color - Smooth Orange)
     ============================================ */
  --color-primary: #FF8C42;
  --color-primary-rgb: 255, 140, 66;
  --color-primary-dark: #E67A2E;
  --color-primary-light: #FFA366;
  --color-primary-hover: #FF7F35;
  --color-primary-active: #D66B1F;
  
  /* ============================================
     SECONDARY COLORS (Supporting Brand Color)
     ============================================ */
  --color-secondary: #06416F;
  --color-secondary-rgb: 6, 65, 111;
  --color-secondary-dark: #04243D;
  --color-secondary-light: #0C395B;
  --color-secondary-hover: #052D54;
  --color-secondary-active: #031F2A;
  
  /* ============================================
     TEXT COLORS
     ============================================ */
  --color-text-primary: #06416F;
  --color-text-secondary: #868EA5;
  --color-text-secondary-rgb: 134, 142, 165;
  --color-text-light: #95B7D1;
  --color-text-light-rgb: 149, 183, 209;
  --color-text-dark: #121C2C;
  --color-text-muted: #868EA5;
  --color-text-white: #ffffff;
  
  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  --color-bg-white: #ffffff;
  --color-bg-white-rgb: 255, 255, 255;
  --color-bg-light: #F2F2F2;
  --color-bg-light-rgb: 242, 242, 242;
  --color-bg-dark: #000000;
  --color-bg-dark-rgb: 0, 0, 0;
  --color-bg-primary: var(--color-primary);
  --color-bg-secondary: var(--color-secondary);
  
  /* ============================================
     ACCENT COLORS
     ============================================ */
  --color-accent-1: #04243D;
  --color-accent-1-rgb: 4, 36, 61;
  --color-accent-2: #0C395B;
  --color-accent-2-rgb: 12, 57, 91;
  --color-accent-3: #121C2C;
  --color-accent-3-rgb: 18, 28, 44;
  
  /* ============================================
     SEMANTIC COLORS (Success, Warning, Danger, Info)
     ============================================ */
  --color-success: #28a745;
  --color-success-rgb: 40, 167, 69;
  --color-success-light: #d4edda;
  --color-success-dark: #155724;
  
  --color-warning: #ffc107;
  --color-warning-rgb: 255, 193, 7;
  --color-warning-light: #fff3cd;
  --color-warning-dark: #856404;
  
  --color-danger: #dc3545;
  --color-danger-rgb: 220, 53, 69;
  --color-danger-light: #f8d7da;
  --color-danger-dark: #721c24;
  
  --color-info: #17a2b8;
  --color-info-rgb: 23, 162, 184;
  --color-info-light: #d1ecf1;
  --color-info-dark: #0c5460;
  
  /* ============================================
     BORDER COLORS
     ============================================ */
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;
  --color-border-dark: #868EA5;
  --color-border-primary: var(--color-primary);
  --color-border-secondary: var(--color-secondary);
  
  /* ============================================
     LEGACY COMPATIBILITY (for existing code)
     These map to the new color scheme variables
     ============================================ */
  --transwide-base: var(--color-primary);
  --transwide-base-rgb: var(--color-primary-rgb);
  --transwide-color: var(--color-text-secondary);
  --transwide-color-rgb: var(--color-text-secondary-rgb);
  --transwide-text-dark: var(--color-text-light);
  --transwide-text-dark-rgb: var(--color-text-light-rgb);
  --transwide-white: var(--color-bg-white);
  --transwide-white-rgb: var(--color-bg-white-rgb);
  --transwide-white2: var(--color-bg-light);
  --transwide-white2-rgb: var(--color-bg-light-rgb);
  --transwide-black: var(--color-secondary);
  --transwide-black-rgb: var(--color-secondary-rgb);
  --transwide-black2: var(--color-accent-1);
  --transwide-black2-rgb: var(--color-accent-1-rgb);
  --transwide-black3: var(--color-bg-dark);
  --transwide-black3-rgb: var(--color-bg-dark-rgb);
  --transwide-black4: var(--color-accent-2);
  --transwide-black4-rgb: var(--color-accent-2-rgb);
  --transwide-black5: var(--color-accent-3);
  --transwide-black5-rgb: var(--color-accent-3-rgb);
}