@layer foundations, reset, base, components, utilities;

/* ── Foundations: Design Tokens ── */
@layer foundations {
    :root {
        /* Color palette */
        --color-bg:           light-dark(#faf9f7, #0a0a0a);
        --color-bg-subtle:    light-dark(#f0ece6, #111111);
        --color-bg-inset:     light-dark(#eae6e0, #1a1a1a);
        --color-text:         light-dark(#2a2520, #e8e4df);
        --color-text-muted:   light-dark(#4a4540, #b8b0a4);
        --color-accent:       light-dark(#8a7a5a, #c8b89a);
        --color-accent-hover: light-dark(#2a2520, #e8e4df);
        --color-border:       light-dark(#e8e4de, #1a1a1a);

        /* Fluid type scale (~12px nav → ~14px body → ~28px h1) */
        --step--1: clamp(0.7rem,    0.67rem + 0.13vw, 0.75rem);
        --step-0:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
        --step-1:  clamp(1rem,      0.95rem + 0.25vw, 1.1rem);
        --step-2:  clamp(1.2rem,    1.1rem  + 0.5vw,  1.5rem);
        --step-3:  clamp(1.5rem,    1.3rem  + 1vw,    1.875rem);

        /* Fluid spacing */
        --space-xs:  clamp(0.25rem, 0.2rem  + 0.25vw, 0.5rem);
        --space-sm:  clamp(0.5rem,  0.45rem + 0.25vw, 0.75rem);
        --space-md:  clamp(1rem,    0.9rem  + 0.5vw,  1.5rem);
        --space-lg:  clamp(1.5rem,  1.3rem  + 1vw,    2.5rem);
        --space-xl:  clamp(2rem,    1.7rem  + 1.5vw,  3.5rem);
        --space-2xl: clamp(3rem,    2.5rem  + 2.5vw,  5rem);

        /* Line-heights */
        --lh-tight:   1;
        --lh-heading: 1.2;
        --lh-body:    1.6;
        --lh-relaxed: 1.75;

        /* Font families */
        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

        /* Nav tokens */
        --nav-bg:     light-dark(#faf9f7, #0a0a0a);
        --nav-text:   light-dark(#2a2520, #e8e4df);
        --nav-muted:  light-dark(#4a4540, #b8b0a4);
        --nav-accent: light-dark(#8a7a5a, #c8b89a);
        --nav-border: light-dark(#e8e4de, #1a1a1a);
        --nav-hover:  light-dark(#2a2520, #e8e4df);
    }
}

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

/* ── Base: Element defaults ── */
@layer base {
    html { color-scheme: light dark; }

    body {
        font-family: var(--font-sans);
        font-size: var(--step-0);
        line-height: var(--lh-body);
        background-color: var(--color-bg);
        color: var(--color-text);
    }

    h1 { font-size: var(--step-3); line-height: var(--lh-heading); }
    h2 { font-size: var(--step-2); line-height: var(--lh-heading); }
    h3 { font-size: var(--step-1); line-height: var(--lh-heading); }

    p { margin-bottom: 1rem; color: var(--color-text-muted); }

    a         { color: var(--color-accent); }
    a:hover   { color: var(--color-accent-hover); }

    code { font-family: var(--font-mono); font-size: 0.85em; }
}

/* ── Components: Shared UI ── */
@layer components {
    /* ── Sticky header ── */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--nav-bg);
        border-bottom: 1px solid var(--nav-border);
    }

    /* ── Nav layout ── */
    .site-nav {
        max-width: 960px;
        margin: 0 auto;
        padding: 0.6rem 1.5rem;
        display: flex;
        align-items: flex-end;
        gap: 1.5rem;
        font-family: var(--font-sans);
        font-size: var(--step--1);
        line-height: var(--lh-tight);
    }

    /* ── Logo ── */
    .site-nav__logo {
        display: flex;
        align-items: flex-end;
        gap: var(--space-xs);
        text-decoration: none;
        font-size: var(--step-2);
        line-height: var(--lh-heading);
    }

    .site-nav__logo-name {
        font-size: var(--step--1);
        line-height: var(--lh-tight);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-muted);
        transition: color 0.15s;
    }

    .site-nav__logo:hover .site-nav__logo-name {
        color: var(--nav-hover);
    }

    /* ── Desktop links ── */
    .site-nav__links {
        display: flex;
        list-style: none;
        gap: 1.25rem;
        margin-left: auto;
    }

    .site-nav__links a {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--nav-muted);
        transition: color 0.15s;
    }

    .site-nav__links a:hover {
        color: var(--nav-hover);
    }

    .site-nav__links a[aria-current="page"] {
        color: var(--nav-accent);
    }

    /* ── Mobile menu (details/summary) ── */
    .site-nav__mobile {
        display: none;
        margin-left: auto;
        position: relative;
    }

    .site-nav__mobile summary {
        list-style: none;
        cursor: pointer;
        padding: 0.5rem;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .site-nav__mobile summary::-webkit-details-marker { display: none; }

    .site-nav__mobile summary::before,
    .site-nav__mobile summary::after {
        content: "";
        display: block;
        position: absolute;
        left: 0.25rem;
        right: 0.25rem;
        height: 2px;
        background: var(--nav-muted);
        transition: transform 0.2s, top 0.2s;
    }

    .site-nav__mobile summary::before {
        top: 0.5rem;
        box-shadow: 0 0.45rem 0 var(--nav-muted);
    }

    .site-nav__mobile summary::after {
        top: calc(0.5rem + 0.9rem);
    }

    .site-nav__mobile[open] summary::before {
        top: calc(50% - 1px);
        transform: rotate(45deg);
        box-shadow: none;
    }

    .site-nav__mobile[open] summary::after {
        top: calc(50% - 1px);
        transform: rotate(-45deg);
    }

    .site-nav__dropdown {
        position: absolute;
        right: 0;
        top: calc(100% + 0.4rem);
        background: var(--nav-bg);
        border: 1px solid var(--nav-border);
        border-radius: 6px;
        padding: 0.5rem 0;
        min-width: 160px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .site-nav__dropdown a {
        padding: 0.6rem 1.25rem;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 500;
        font-size: var(--step--1);
        letter-spacing: 0.06em;
        color: var(--nav-muted);
        transition: color 0.15s;
    }

    .site-nav__dropdown a:hover {
        color: var(--nav-hover);
    }

    .site-nav__dropdown a[aria-current="page"] {
        color: var(--nav-accent);
    }

    /* ── Responsive ── */
    @media (max-width: 640px) {
        .site-nav__links { display: none; }
        .site-nav__mobile { display: block; }
    }
}

/* ── Utilities: Layout defaults ── */
@layer utilities {
    main {
        max-width: 640px;
        margin-inline: auto;
        padding: var(--space-lg) var(--space-md);
    }
}