/**
 * THEME VARIABLES - CLOUD DEVELOPMENT COURSE
 *
 * Cloud-themed color scheme:
 * - Light Mode: Sunny day with blue skies and white clouds
 * - Dark Mode: Stormy afternoon thunderstorm
 *
 * The presentation.css file references these variables, so you should not
 * need to edit presentation.css directly.
 */

:root {
    /* ===================================
       PRIMARY BRAND COLORS - SUNNY SKY THEME
       Light mode represents a beautiful sunny day
       =================================== */
    --primary-color: #4A90E2;        /* Sky blue */
    --primary-dark: #2E5C8A;         /* Deep sky blue */
    --secondary-color: #87CEEB;      /* Soft cloud blue */
    --secondary-light: #D6EBFF;      /* Light cloud white-blue */
    --accent-color: #FDB813;         /* Sunshine yellow/gold */

    /* ===================================
       ADDITIONAL BRAND COLORS
       =================================== */
    --success-color: #52B788;        /* Fresh green */
    --success-light: #95D5B2;        /* Light green */
    --warning-color: #FDB813;        /* Sunshine yellow */
    --danger-color: #E63946;         /* Alert red */

    /* ===================================
       SPACING SYSTEM
       Consistent spacing throughout
       =================================== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;

    /* ===================================
       TYPOGRAPHY
       =================================== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.9em;
    --font-size-sm: 1em;
    --font-size-md: 1.2em;
    --font-size-lg: 1.5em;
    --font-size-xl: 2em;
    --font-size-xxl: 2.8em;

    /* Code block typography */
    --code-font-family: 'Courier New', 'Consolas', monospace;
    --code-font-size: 1.1em;
    --code-line-height: 1.6;
    --code-padding: 12px;

    /* ===================================
       LIGHT MODE THEME - SUNNY DAY WITH CLOUDS
       Bright, airy, sky-inspired colors
       =================================== */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0F8FF;         /* Alice blue - very light sky */
    --bg-accent: #E3F2FD;            /* Light blue cloud tint */
    --text-primary: #1A2332;         /* Deep blue-gray for readability */
    --text-secondary: #2E5C8A;       /* Deep sky blue */
    --text-muted: #64748B;           /* Muted slate */
    --border-color: #87CEEB;         /* Soft cloud blue */
    --shadow-color: rgba(74, 144, 226, 0.15);
    --code-bg: #2E5C8A;              /* Deep sky blue */
    --code-text: #FFFFFF;
    --success-bg: #D8F3DC;
    --success-border: #52B788;
    --warning-bg: #FFF8E1;
    --warning-border: #FDB813;
    --gradient-start: #4A90E2;       /* Sky blue gradient */
    --gradient-end: #87CEEB;         /* To cloud blue */
    --slide-bg: #FFFFFF;
    --slide-bg-rgb: 255, 255, 255;
    --nav-bg: #4A90E2;               /* Sky blue navigation */
    --nav-text: #FFFFFF;
    --button-hover: #2E5C8A;         /* Darker on hover */
    --link-color: #4A90E2;
    --link-hover: #2E5C8A;
    --card-bg: #FFFFFF;
    --shadow: rgba(74, 144, 226, 0.12);
}

/* ===================================
   DARK MODE THEME - THUNDERSTORM
   Dramatic storm clouds with lightning accents
   =================================== */
[data-theme="dark"] {
    --bg-primary: #0F172A;           /* Deep storm sky */
    --bg-secondary: #1E293B;         /* Dark storm clouds */
    --bg-accent: #334155;            /* Storm cloud gray */
    --text-primary: #F1F5F9;         /* Light cloud white */
    --text-secondary: #60A5FA;       /* Electric blue */
    --text-muted: #94A3B8;           /* Muted cloud gray */
    --border-color: #3B82F6;         /* Electric lightning blue */
    --shadow-color: rgba(59, 130, 246, 0.25);
    --code-bg: #1E293B;              /* Dark storm cloud */
    --code-text: #E0E7FF;            /* Light lavender-white */
    --success-bg: rgba(82, 183, 136, 0.15);
    --success-border: #52B788;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --warning-border: #FBBF24;       /* Lightning flash gold */
    --gradient-start: #1E293B;       /* Dark storm gradient */
    --gradient-end: #334155;         /* To lighter storm */
    --slide-bg: #0F172A;
    --slide-bg-rgb: 15, 23, 42;
    --nav-bg: #1E3A5F;               /* Deep storm blue */
    --nav-text: #F1F5F9;
    --button-hover: #3B82F6;         /* Electric blue hover */
    --link-color: #60A5FA;           /* Electric blue links */
    --link-hover: #FBBF24;           /* Lightning gold hover */
    --card-bg: #1E293B;              /* Storm cloud cards */
    --shadow: rgba(0, 0, 0, 0.4);
}

/* ===================================
   SMOOTH TRANSITIONS
   =================================== */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}