/* ========================================
   DIGITAILOR — Design Tokens
   ======================================== */

:root {
    /* Color Palette */
    --bg-primary: #06080d;
    --bg-secondary: #0c0f18;
    --bg-card: rgba(14, 17, 28, 0.65);
    --bg-card-hover: rgba(20, 24, 40, 0.8);

    --text-primary: #e8eaf0;
    --text-secondary: #8b92a8;
    --text-heading: #ffffff;

    --accent-blue: #4f8eff;
    --accent-violet: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #4f8eff 0%, #8b5cf6 100%);
    --accent-glow: rgba(79, 142, 255, 0.15);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Sizing */
    --max-width: 1200px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 100px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s var(--ease-out);
    --transition-med: 0.4s var(--ease-out);
    --transition-slow: 0.6s var(--ease-out);
}

/* ── Light Theme Overrides ──────────────── */
[data-theme="light"] {
    --bg-primary: #f5f7fb;
    --bg-secondary: #ebeef5;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: rgba(255, 255, 255, 0.95);

    --text-primary: #2a2e3c;
    --text-secondary: #5f6780;
    --text-heading: #121520;

    --accent-blue: #3b7bf5;
    --accent-violet: #7c4ddb;
    --accent-gradient: linear-gradient(135deg, #3b7bf5 0%, #7c4ddb 100%);
    --accent-glow: rgba(59, 123, 245, 0.12);

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .site-header {
    background: rgba(245, 247, 251, 0.85);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hero::before {
    background: radial-gradient(circle, rgba(59, 123, 245, 0.08) 0%, transparent 70%);
}

[data-theme="light"] .hero::after {
    background: radial-gradient(circle, rgba(124, 77, 219, 0.05) 0%, transparent 70%);
}

[data-theme="light"] .btn-outline {
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .btn-outline:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .bento-card .code-block {
    background: #1a1d2b;
}

[data-theme="light"] .footer {
    background: #121520;
    --text-primary: #e8eaf0;
    --text-secondary: #8b92a8;
    --text-heading: #ffffff;
    --border-subtle: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .hero {
    background: linear-gradient(180deg, #e8ecf5 0%, #f5f7fb 100%);
}

[data-theme="light"] #hero-canvas {
    opacity: 0.35;
}

[data-theme="light"] .nav-cta {
    color: #fff !important;
}

[data-theme="light"] .hero-badge {
    background: rgba(59, 123, 245, 0.1);
    border-color: rgba(59, 123, 245, 0.2);
}

[data-theme="light"] .trust-strip {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .section-label {
    color: var(--accent-blue);
}

[data-theme="light"] .scroll-indicator {
    border-color: rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .scroll-indicator:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

[data-theme="light"] .hero-subtitle {
    color: var(--text-secondary);
}

[data-theme="light"] .hero-title {
    color: var(--text-heading);
}

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}