/* Global theme tokens + base styling for the site (static-host friendly). */

@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Space+Grotesk:wght@400;500;600&display=swap");

:root{
    /* Color system */
    --bg0:#07070A;
    --bg1:#0E0F15;
    --panel:#151622;
    --panel2:#1C1E2D;
    --text:#F3F4F7;
    --muted:#A9ACB6;
    --line:rgba(255,255,255,0.10);

    /* Accent (keep legacy custom props working too) */
    --accent:#72E6C3;        /* eerie mint */
    --accent2:#E6B96A;       /* candlelight */
    --accent-rgb:114, 230, 195;
    --accent2-rgb:230, 185, 106;
    ---maincolor:var(--accent);
    ---darkcolor:#2AB49B;
    ---Textcolor:var(--text);

    /* Layout + motion */
    --wrap:1440px;
    --r8:8px;
    --r12:12px;
    --r16:16px;
    --shadow:0 18px 48px rgba(0,0,0,0.45);
    --ease:cubic-bezier(.2,.9,.2,1);
}

*{
    box-sizing:border-box;
}

html,body{
    height:100%;
}

body{
    margin:0;
    color:var(--text);
    /* Keep the site background calm; the "hero" carries the dramatic gradient. */
    background: var(--bg0);
    font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{
    font-family:"IM Fell English", ui-serif, Georgia, "Times New Roman", serif;
    letter-spacing:-0.01em;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

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

p{
    line-height:1.65;
    color: var(--muted);
}

button, input, textarea{
    font-family:inherit;
}

input::placeholder, textarea::placeholder{
    color: rgba(169, 172, 182, 0.75);
}

/* Accessible focus */
:focus-visible{
    outline:2px solid rgba(var(--accent2-rgb), 0.85);
    outline-offset:3px;
    border-radius:6px;
}

/* Slightly nicer selection */
::selection{
    background:rgba(var(--accent-rgb), 0.28);
}

/* Give the primary page chrome breathing room. */
header, footer{
    padding:18px 20px;
}

/* Grain + vignette (Burton/Coraline-ish) */
body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

/* A subtle load-in for the main content. */
@keyframes wfFadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}

.container{
    animation:wfFadeUp .55s var(--ease) both;
}

@media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto !important; }
    .container{ animation:none; }
}