:root {
    /* core palette */
    --primary-1: #6d28d9; /* purple */
    --primary-2: #3b82f6; /* blue */
    --accent: #ffb300; /* warm yellow */
    --accent-soft: #ffd54f;
    --bg-0: #f4f7ff; /* light canvas */
    --bg-1: #e9eefc;
    --surface: #ffffff;
    --muted: #9aa6c7;
    --text: #0f1724;
    --text-weak: #5b636e;
    --glass: rgba(255,255,255,0.6);
    --elev: 0 10px 30px rgba(15,23,36,0.12);
    --radius-lg: 12px;
    --radius-pill: 999px;
}

/* page background (subtle vertical gradient) */
body {
    background: linear-gradient(180deg,var(--bg-0),var(--bg-1));
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* global link / accent */
a, .link {
    color: var(--primary-1);
}

    a:hover {
        color: var(--primary-2);
    }

/* primary buttons */
.btn-primary, .btn.btn--info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .5rem .9rem;
    background: linear-gradient(135deg,var(--primary-1),var(--primary-2));
    color: #fff;
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--elev);
    font-weight: 700;
    transition: transform .14s ease, box-shadow .14s ease;
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(15,23,36,0.16);
    }

/* secondary / accent */
.btn-accent {
    background: linear-gradient(135deg,var(--accent-soft),var(--accent));
    color: #231f20;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 22px rgba(34,24,8,0.08);
}

/* navigation pills (nanogallery2 style) - use variables */
#nanogallery2 .nGY2NavigationbarItem,
.btn-wide {
    background: linear-gradient(135deg,var(--primary-1),var(--primary-2));
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    box-shadow: var(--elev);
}

/* overlays, panels and cards */
.codrops-links, .panel, .slide__number {
    background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.35));
    backdrop-filter: blur(6px);
    border-radius: var(--radius-lg);
}

/* modal header */
.modal-header {
    background: linear-gradient(90deg,var(--primary-1),var(--primary-2));
    color: #fff;
}

/* subtle muted text */
.muted, small {
    color: var(--text-weak);
}

/* helpers for consistent spacing */
.container, .phcontainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* responsive tweaks kept in page CSS override as needed */