/**
 * THEME VARIABLES - CUSTOMIZE FOR YOUR COURSE
 *
 * This file contains all customizable colors, fonts, and spacing.
 * Change these values to match your institution's brand or course aesthetic.
 *
 * The presentation.css file references these variables, so you should not
 * need to edit presentation.css directly.
 */

:root {
    /* ===================================
       PRIMARY BRAND COLORS
       Node.js inspired theme for Server Web Development
       =================================== */
    --primary-color: #68a063;        /* Node.js official green */
    --primary-dark: #3c5c39;         /* Darker shade of Node green */
    --secondary-color: #90c53f;      /* Light/lime green accent */
    --secondary-light: #b4d88b;      /* Lighter green */
    --accent-color: #f0db4f;         /* JavaScript yellow */

    /* ===================================
       ADDITIONAL BRAND COLORS (Optional)
       =================================== */
    --success-color: #68a063;        /* Green for success states */
    --success-light: #90c53f;        /* Light green */
    --warning-color: #f0db4f;        /* Yellow for warnings */
    --danger-color: #e74c3c;         /* Red for errors */

    /* ===================================
       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 (DEFAULT)
       =================================== */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7f5;
    --bg-accent: #e8f4e8;
    --text-primary: #2d2d2d;
    --text-secondary: #3c5c39;
    --text-muted: #666666;
    --border-color: #68a063;
    --shadow-color: rgba(104, 160, 99, 0.15);
    --code-bg: #2d2d2d;
    --code-text: #90c53f;
    --success-bg: #e8f4e8;
    --success-border: #68a063;
    --warning-bg: #fef9e7;
    --warning-border: #f0db4f;
    --gradient-start: #68a063;
    --gradient-end: #90c53f;
    --slide-bg: #ffffff;
    --slide-bg-rgb: 255, 255, 255; /* RGB values for transparency effects */
    --nav-bg: #68a063;
    --nav-text: #ffffff;
    --button-hover: #3c5c39;
    --link-color: #68a063;
    --link-hover: #90c53f;
    --card-bg: white;
    --shadow: rgba(0, 0, 0, 0.1);
}

/* ===================================
   DARK MODE THEME
   Node.js inspired dark theme
   =================================== */
[data-theme="dark"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252525;
    --bg-accent: #2d4a2b;
    --text-primary: #e4e4e4;
    --text-secondary: #b4d88b;
    --text-muted: #999999;
    --border-color: #68a063;
    --shadow-color: rgba(104, 160, 99, 0.3);
    --code-bg: #1a1a1a;
    --code-text: #90c53f;
    --success-bg: rgba(104, 160, 99, 0.15);
    --success-border: #90c53f;
    --warning-bg: rgba(240, 219, 79, 0.1);
    --warning-border: #f0db4f;
    --gradient-start: #3c5c39;
    --gradient-end: #68a063;
    --slide-bg: #1e1e1e;
    --slide-bg-rgb: 30, 30, 30; /* RGB values for transparency effects */
    --nav-bg: #3c5c39;
    --nav-text: #ffffff;
    --button-hover: #68a063;
    --link-color: #90c53f;
    --link-hover: #f0db4f;
    --card-bg: #2a2a2a;
    --shadow: rgba(0, 0, 0, 0.4);
}

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