/* ============================================================
   CODERZ GROUP — DESIGN TOKEN SYSTEM (Light + Dark Themes)
   ============================================================ */

:root {
    /* Brand */
    --primary-blue: #157EEE;
    --primary-dark: #0f1923;
    --connector-color: #157EEE;

    /* Surfaces */
    --bg-body: #f5f7fa;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8f9fa;
    --bg-elevated: #ffffff;

    /* Text */
    --text-heading: #0f1923;
    --text-body: #212529;
    --text-muted: #6c757d;

    /* Borders & Shadows */
    --border-color: #e9ecef;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* Components */
    --card-bg: #ffffff;
    --card-border: #e9ecef;
    --navbar-bg: rgba(255, 255, 255, 0.92);
    --badge-bg: #ffffff;
    --badge-border: #e9ecef;
    --badge-text: #6c757d;
    --timeline-bg: #ffffff;
    --timeline-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    /* Theme transition */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
    --bg-body: #0a0f18;
    --bg-surface: #111827;
    --bg-surface-alt: #1a2332;
    --bg-elevated: #1e293b;

    --text-heading: #f1f5f9;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;

    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

    --card-bg: #1e293b;
    --card-border: rgba(255, 255, 255, 0.08);
    --navbar-bg: rgba(10, 15, 24, 0.92);
    --badge-bg: #1e293b;
    --badge-border: rgba(255, 255, 255, 0.1);
    --badge-text: #94a3b8;
    --timeline-bg: #1e293b;
    --timeline-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}