/* ============================================
   DUNE — Design System Tokens
   ============================================ */
:root {
    /* Core palette — Arrakis at night */
    --void:          #060504;
    --deep:          #0D0B08;
    --mid:           #161009;
    --surface:       #1F160A;
    --surface-high:  #2A1E0E;

    /* Text — warm parchment */
    --text-primary:  #EDE3C8;
    --text-muted:    rgba(237, 227, 200, 0.50);
    --text-dim:      rgba(237, 227, 200, 0.28);

    /* Spice — the melange amber */
    --spice:         #C4941A;
    --spice-bright:  #E8B840;
    --spice-dim:     #7A5C18;
    --spice-glow:    rgba(196, 148, 26, 0.15);

    /* Caladan — water teal */
    --teal:          #1E6075;
    --teal-dim:      rgba(30, 96, 117, 0.25);

    /* Metal — ornithopter alloy */
    --metal:         #6B7D88;
    --metal-bright:  #9AADB8;

    /* Glass surfaces */
    --glass-bg:      rgba(196, 148, 26, 0.04);
    --glass-bg-high: rgba(196, 148, 26, 0.08);
    --glass-border:  rgba(196, 148, 26, 0.18);
    --glass-border-dim: rgba(196, 148, 26, 0.10);
    --glass-inset:   rgba(196, 148, 26, 0.07);

    /* Typography */
    --font-display:  'Cinzel', serif;
    --font-body:     'Jost', 'Helvetica Neue', sans-serif;
    --font-mono:     'Space Mono', 'Courier New', monospace;

    /* Spacing */
    --s-xs:  0.5rem;
    --s-sm:  1rem;
    --s-md:  2rem;
    --s-lg:  4rem;
    --s-xl:  6rem;

    /* Transitions */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
    --ease-io:   cubic-bezier(0.77, 0, 0.175, 1);
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

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

button {
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 1px solid var(--spice);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================
   UTILITY
   ============================================ */
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }
.font-mono     { font-family: var(--font-mono); }
.text-spice    { color: var(--spice); }
.text-muted    { color: var(--text-muted); }

/* ============================================
   CANVAS OVERLAY
   ============================================ */
#sand-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    will-change: contents;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 5, 4, 0.94);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    cursor: zoom-out;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    border: 1px solid var(--glass-border);
    transform: scale(0.92);
    transition: transform 0.4s var(--ease-out);
}

.lightbox-overlay.active .lightbox-img {
    transform: scale(1);
}

/* ============================================
   PRINT RESET (case study pages)
   ============================================ */
@media (max-width: 768px) {
    body { font-size: 0.95rem; }
}