/* =================================================================
   Design Tokens — Portfolio Design System
   Single source of truth for all design decisions.
   All components and sections consume these tokens.
   ================================================================= */

:root {
    /* ── Colors ─────────────────────────────────────────────────── */
    --bg:           #0b1220;
    --surface:      #111827;
    --surface-2:    #1f2937;
    --border:       #334155;
    --text:         #e5e7eb;
    --muted:        #94a3b8;
    --primary:      #3b82f6;
    --primary-soft: rgba(59, 130, 246, 0.12);
    --secondary:    #22c55e;
    --danger:       #ef4444;
    --success:      #10b981;
    --shadow:       rgba(0, 0, 0, 0.35);

    /* ── Nav backgrounds (themed) ───────────────────────────────── */
    --header-bg:       rgba(11, 18, 32, 0.92);
    --nav-mobile-bg:   rgba(11, 18, 32, 0.98);

    /* ── Typography ─────────────────────────────────────────────── */
    --font-body: Inter, 'Segoe UI', system-ui, sans-serif;
    --font-mono: Consolas, 'JetBrains Mono', monospace;

    /* ── Spacing ─────────────────────────────────────────────────── */
    --section-space: 96px;
    --container:     1200px;

    /* ── Border Radius ───────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* ── Images ─────────────────────────────────────────────────── */
    --hero-bg-image: url('/images/hero-bg-dark.webp');
}

/* ── Light theme overrides ───────────────────────────────────────── */
[data-theme="light"] {
    --bg:           #f8fafc;
    --surface:      #ffffff;
    --surface-2:    #f1f5f9;
    --border:       #e2e8f0;
    --text:         #0f172a;
    --muted:        #64748b;
    --primary:      #2563eb;
    --primary-soft: rgba(37, 99, 235, 0.10);
    --secondary:    #16a34a;
    --danger:       #dc2626;
    --success:      #059669;
    --shadow:       rgba(0, 0, 0, 0.08);

    --header-bg:     rgba(248, 250, 252, 0.92);
    --nav-mobile-bg: rgba(248, 250, 252, 0.98);

    --hero-bg-image: url('/images/hero-bg-light.webp');
}

@media (max-width: 768px) {
    :root {
        --section-space: 72px;
    }
}

@media (max-width: 640px) {
    :root {
        --section-space: 56px;
    }
}