/**
 * SDScreener - CSS Variables
 * Global design tokens and theme variables
 */

:root {
    /* Brand Colors */
    --wowate-cyan: #0FB6CC;
    --wowate-primary: #0fb6cc;
    --wowate-secondary: #2E86AB;
    --wowate-light: #f8feff;
    --wowate-dark: #1a4855;
    --wowate-grey: #505A64;
    --wowate-green: #AEFF00;
    --wowate-pink: #FF004A;
    
    /* Derived Colors */
    --cyan-dark: #2E86AB;
    --green-dark: #7AB800;
    --grey-dark: #3A4248;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0fb6cc 0%, #2E86AB 100%);
    --gradient-light: linear-gradient(135deg, rgba(15, 182, 204, 0.05) 0%, rgba(46, 134, 171, 0.08) 100%);
    --gradient-cyan: linear-gradient(135deg, var(--wowate-cyan) 0%, var(--cyan-dark) 100%);
    --gradient-grey: linear-gradient(135deg, var(--wowate-grey) 0%, var(--grey-dark) 100%);
    --gradient-green: linear-gradient(135deg, var(--wowate-green) 0%, var(--green-dark) 100%);
    --gradient-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    
    /* Shadows */
    --shadow-primary: 0 8px 32px rgba(15, 182, 204, 0.15);
    --shadow-card: 0 4px 20px rgba(15, 182, 204, 0.1);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 15px;
    --radius-round: 50%;
    
    /* Typography */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Semantic theme tokens — Light (default) */
    --color-bg:          #FFFFFF;
    --color-bg-surface:  #F4F6F8;
    --color-bg-elevated: #FFFFFF;
    --color-border:      #E2E6EA;
    --color-text:        #111111;
    --color-text-muted:  #6C757D;
    --color-text-subtle: #999999;
    --color-shadow:      rgba(0, 0, 0, 0.08);
    --color-positive:    #27AE60;
    --color-negative:    #E74C3C;
    --color-warning-bg:  #E07B00;
}

/* ============================================================================
   DARK THEME
   ============================================================================ */

[data-theme="dark"] {
    --color-bg:          #0D1117;
    --color-bg-surface:  #161C25;
    --color-bg-elevated: #1E2736;
    --color-border:      rgba(15, 182, 204, 0.15);
    --color-text:        #F0F4FA;
    --color-text-muted:  #8B96A8;
    --color-text-subtle: #5A6475;
    --color-shadow:      rgba(0, 0, 0, 0.4);
    --color-positive:    #2ECC71;
    --color-negative:    #FF5F56;
    --color-warning-bg:  #FFBD2E;

    /* Override brand-derived tokens for dark readability */
    --wowate-secondary:  #5BAFD4;
    --wowate-grey:       #8B96A8;
    --gradient-light:    linear-gradient(135deg, rgba(15, 182, 204, 0.08) 0%, rgba(46, 134, 171, 0.12) 100%);
    --shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-card:       0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-primary:    0 8px 32px rgba(15, 182, 204, 0.25);
}

/* OS preference — applied when user has not set a manual override */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:          #0D1117;
        --color-bg-surface:  #161C25;
        --color-bg-elevated: #1E2736;
        --color-border:      rgba(15, 182, 204, 0.15);
        --color-text:        #F0F4FA;
        --color-text-muted:  #8B96A8;
        --color-text-subtle: #5A6475;
        --color-shadow:      rgba(0, 0, 0, 0.4);
        --color-positive:    #2ECC71;
        --color-negative:    #FF5F56;
        --color-warning-bg:  #FFBD2E;
        --wowate-secondary:  #5BAFD4;
        --wowate-grey:       #8B96A8;
        --gradient-light:    linear-gradient(135deg, rgba(15, 182, 204, 0.08) 0%, rgba(46, 134, 171, 0.12) 100%);
        --shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-card:       0 4px 20px rgba(0, 0, 0, 0.3);
        --shadow-primary:    0 8px 32px rgba(15, 182, 204, 0.25);
    }
}