/* DuckyTrack — Default Theme (Rubber Ducky Yellow + Red)
   Bright, playful, unmistakably ducky.
   ========================================================================== */

:root {
    /* Core palette — Bright rubber ducky yellow with red accents */
    --dt-primary: #FFD600;
    --dt-primary-dark: #F9A825;
    --dt-primary-light: #FFF176;
    --dt-primary-rgb: 255, 214, 0;
    --dt-secondary: #E53935;
    --dt-accent: #FF1744;

    /* Surfaces */
    --dt-bg: #FFFDE7;
    --dt-surface: #FFFFFF;
    --dt-surface-alt: #FFF9C4;

    /* Text */
    --dt-text: #1A1A1A;
    --dt-text-muted: #616161;
    --dt-text-inverse: #FFFFFF;

    /* Borders */
    --dt-border: #E0E0E0;

    /* Status */
    --dt-success: #4CAF50;
    --dt-warning: #FF9800;
    --dt-error: #F44336;
    --dt-info: #2196F3;

    /* Gradients — Yellow to red, rubber ducky feel */
    --dt-hero-gradient: linear-gradient(135deg, #FFD600 0%, #FF9100 40%, #E53935 100%);
    --dt-gradient: linear-gradient(135deg, #FFD600, #E53935);

    /* Shadows */
    --dt-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* Chrome */
    --dt-nav-bg: #1A1A1A;
    --dt-nav-text: #FFFFFF;
    --dt-footer-bg: #212121;
    --dt-footer-text: #BDBDBD;

    /* Radii */
    --dt-radius: 8px;
    --dt-radius-lg: 16px;
}

/* ── Hero — Scattered duck silhouettes ──────────────────────────────────── */

.hero {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M30 45c-3-1-5-4-5-7 0-4 3-7 7-7 1 0 2 0 3 1l2-3c2-2 5-3 8-2 4 1 6 5 5 9l1 1c2 1 3 3 3 6 0 4-3 7-7 7H30z' fill='%23FFFFFF' fill-opacity='0.07'/%3E%3C/svg%3E");
}

/* ── Cards — Bright yellow top accent on hover ─────────────────────────── */

.card {
    border-top: 3px solid transparent;
}
.card:hover {
    border-top-color: var(--dt-primary);
}

/* ── Section titles — Yellow to red underline ──────────────────────────── */

.section-title::after {
    background: linear-gradient(90deg, #FFD600, #E53935);
}

/* ── Buttons — Bright ducky gradient ───────────────────────────────────── */

.btn-primary {
    background: linear-gradient(135deg, #FFD600 0%, #FFC107 100%);
    color: #1A1A1A;
    font-weight: 700;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #FFF176 0%, #FFD600 100%);
    color: #1A1A1A;
}

/* ── Stat cards — Yellow to red gradient text ──────────────────────────── */

.stat-card .stat-number {
    background: linear-gradient(135deg, #FFD600, #E53935);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Feature card icon — Bright yellow ─────────────────────────────────── */

.feature-card:hover .feature-icon {
    background: #FFF176;
}

/* ── Timeline dot — Bright yellow ──────────────────────────────────────── */

.timeline-item::after {
    background: #FFD600;
    box-shadow: 0 0 0 2px #FFD600;
}

/* ── Footer gradient bar — Yellow to red ───────────────────────────────── */

.dt-footer::before {
    background: linear-gradient(90deg, #FFD600, #FF9100, #E53935);
}

/* ── Links — Warm red tones ────────────────────────────────────────────── */

a {
    color: #D32F2F;
}
a:hover {
    color: #E53935;
}

/* ── Selection — Bright yellow ─────────────────────────────────────────── */

::selection {
    background: #FFD600;
    color: #1A1A1A;
}