/**
 * CSS Custom Properties (CSS Variables)
 * Defines color palette, spacing, and theming for both light and dark modes
 */

/* ===================================== */
/* RESPONSIVE BREAKPOINTS                */
/* ===================================== */
/*
 * Standard breakpoints used across all CSS files:
 *
 * Desktop:      > 768px    (default, no media query needed)
 * Tablet:       <= 768px   @media screen and (max-width: 768px)
 * Large Mobile: <= 600px   @media screen and (max-width: 600px)
 * Mobile:       <= 480px   @media screen and (max-width: 480px)
 * Small Mobile: <= 360px   @media screen and (max-width: 360px)
 *
 * Note: CSS variables cannot be used in media queries.
 * These values must be hardcoded in @media rules.
 */

/* ===================================== */
/* LIGHT MODE (DEFAULT)                  */
/* ===================================== */

:root {
    /* Cool Tones - Light Mode */
    --primary-color: #0D9488;
    --primary-dark: #0F766E;
    --secondary-color: #0284C7;
    --secondary-dark: #0369A1;
    --accent-color: #065F46;
    --success-color: #166534;
    --danger-color: #DC2626;
    --warning-color: #EA580C;
    --background-color: #F8FAFC;
    --background-gradient-start: #F8FAFC;
    --background-gradient-end: #F8FAFC;
    --card-background: #FFFFFF;
    --card-hover-background: #F1F5F9;
    --text-color: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --button-text-color: #ffffff;
    --shadow-color: rgba(13, 148, 136, 0.15);
    --bubble-shadow: 0 8px 24px rgba(13, 148, 136, 0.2);
    --input-background: #FFFFFF;
    --input-border: #CBD5E1;
    --border-color: #E2E8F0;
    --hover-lift: -4px;
    --background-color-rgb: 248, 250, 252;
    --primary-color-rgb: 13, 148, 136;
    --secondary-color-rgb: 2, 132, 199;
}

/* ===================================== */
/* DARK MODE                             */
/* ===================================== */

body.dark-mode {
    /* Cool Tones - Dark Mode */
    --primary-color: #0D9488;
    --primary-dark: #0F766E;
    --secondary-color: #0284C7;
    --secondary-dark: #0369A1;
    --accent-color: #065F46;
    --success-color: #14532D;
    --danger-color: #DC2626;
    --warning-color: #EA580C;
    --background-color: #0F172A;
    --background-gradient-start: #0F172A;
    --background-gradient-end: #0F172A;
    --card-background: #1E293B;
    --card-hover-background: #334155;
    --text-color: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --button-text-color: #ffffff;
    --shadow-color: rgba(13, 148, 136, 0.25);
    --bubble-shadow: 0 8px 32px rgba(13, 148, 136, 0.3);
    --input-background: #334155;
    --input-border: #475569;
    --border-color: #334155;
    --hover-lift: -4px;
    --background-color-rgb: 15, 23, 42;
    --primary-color-rgb: 13, 148, 136;
    --secondary-color-rgb: 2, 132, 199;
}