/* CyanoLakes Design System Variables
 * Essential design tokens only - colors, spacing, and key properties
 * Following redesign workflow guidelines with _this_pattern naming
 */

:root {
    /* Primary Brand Colors (Green, Blue, Gray) */
    --_primary_green_color: #589F48;   /* Green - PANTONE 362C */
    --_primary_blue_color: #30A0D6;    /* Blue - PANTONE 299C */
    --_primary_gray_color: #353E31;    /* Gray - PANTONE 418C */

    --_success_color: #28a745;
    --_warning_color: #ffc107;
    --_danger_color: #dc3545;
    --_info_color: #17a2b8;
    --_orange_color: #fd7e14;

    /* UI Element Colors */
    --_tooltip_background_color: #2c3e50;
    --_black_color: #000000;

    /* Risk Level Colors - CyanoLakes Specific */
    --_risk_very_high_color: #dd4c3d;
    --_risk_high_color: #ffa500;
    --_risk_medium_color: #ffff00;
    --_risk_low_color: #87ceeb;

    /* Trophic Status Colors */
    --_trophic_hypertrophic_color: #dd4c3d;
    --_trophic_eutrophic_color: #ffa500;
    --_trophic_mesotrophic_color: #ffff00;
    --_trophic_oligotrophic_color: #87ceeb;

    --_background_color: #ffffff;
    --_background_secondary_color: #f8f9fa;

    --_border_color: #dee2e6;
    --_border_light_color: #f1f1f1;

    --_text_primary_color: #212529;
    --_text_secondary_color: #6c757d;       
    --_text_muted_color: #6c757d;           
    --_text_white_color: #ffffff;
    --_text_dark_color: #0c0c0c;
    --_text_light_gray_color: #6c6c6c;      
    --_text_medium_gray_color: #666;       
    --_text_lighter_gray_color: #757575;    

    /* Base spacing scale */
    --_spacing_xs: 0.5rem;     /* 5px */
    --_spacing_sm: 1rem;       /* 10px */
    --_spacing_md: 1.5rem;     /* 15px */
    --_spacing_lg: 2rem;       /* 20px */
    --_spacing_xl: 2.5rem;     /* 25px */

    /* Input/Component spacing */
    --_input_padding_y: 0.75rem;
    --_input_padding_x: 1rem;

    /* Font Sizes */
    --_font_size_xs: 1.0rem;      /* 10px */
    --_font_size_sm: 1.2rem;      /* 12px */
    --_font_size_base: 1.4rem;    /* 14px - Matches Bootstrap body */
    --_font_size_md: 1.6rem;      /* 16px */
    --_font_size_lg: 1.8rem;      /* 18px */
    --_font_size_xl: 2.4rem;      /* 24px */
    --_font_size_xxl: 3.2rem;     /* 32px */
    --_font_size_3xl: 4rem;       /* 40px - For prominent metric values */        

    /* Line Heights - For improved readability */
    --_line_height_tight: 1.2;      
    --_line_height_normal: 1.4;     
    --_line_height_relaxed: 1.6;  

    /* Font Weights */
    --_font_weight_normal: 400;
    --_font_weight_semibold: 600;
    --_font_weight_bold: 700;

    /* Borders */
    --_border_width: 1px;
    --_border_width_thick: 2px;
    --_border_radius: 0.375rem;
    --_border_radius_lg: 0.5rem;
    --_border_radius_xl: 1rem;
    --_border_radius_pill: 9999px;      

    /* Shadows */
    --_shadow_sm: 0 0.5px 2px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.24);
    --_shadow_md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.12);

    /* Focus states */
    --_focus_ring_color: rgba(48, 160, 214, 0.25);  /* Using primary blue */
    --_focus_ring_width: 0.2rem;

    /* Transitions */
    --_transition_base: 0.3s ease-in-out;

    /* Z-index scale */
    --_z_dropdown: 1000;
    --_z_modal: 1050;
    --_z_tooltip: 1070;
}

/* Text colors */
.u-text-primary { color: var(--_text_primary_color) !important; }
.u-text-secondary { color: var(--_text_secondary_color) !important; }
.u-text-muted { color: var(--_text_muted_color) !important; }

/* Spacing utilities */
.u-m-sm { margin: var(--_spacing_sm) !important; }
.u-m-md { margin: var(--_spacing_md) !important; }
.u-m-lg { margin: var(--_spacing_lg) !important; }

.u-p-sm { padding: var(--_spacing_sm) !important; }
.u-p-md { padding: var(--_spacing_md) !important; }
.u-p-lg { padding: var(--_spacing_lg) !important; }