@layer tokens, base, components, utilities;

@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; }
    body {
        background: var(--bg-base);
        color: var(--text-primary);
        font-family: var(--font-ui);
        font-size: var(--fs-base);
        line-height: 1.5;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    h1, h2, h3, h4 { margin: 0 0 var(--s-3); font-weight: 600; }
    h1 { font-size: var(--fs-2xl); }
    h2 { font-size: var(--fs-xl); }
    h3 { font-size: var(--fs-lg); }
    .mono, code, kbd { font-family: var(--font-mono); font-feature-settings: "tnum"; }
    button { font-family: inherit; }
}

@layer components {
    /* App shell */
    .app {
        display: grid;
        grid-template-columns: var(--sidebar-w) 1fr;
        grid-template-rows: var(--topbar-h) 1fr;
        min-height: 100vh;
    }
    .sidebar {
        grid-row: 1 / 3;
        background: var(--bg-sunken);
        border-right: 1px solid var(--border-subtle);
        padding: var(--s-4);
    }
    .topbar {
        background: var(--bg-base);
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        padding: 0 var(--s-6);
        gap: var(--s-4);
    }
    .main {
        padding: var(--s-6);
        overflow: auto;
    }

    /* Brand */
    .brand {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        font-family: var(--font-ui);
        font-weight: 600;
        letter-spacing: -0.2px;
        color: var(--text-primary);
        margin-bottom: var(--s-6);
    }
    .brand-mark {
        width: 26px; height: 26px;
        border-radius: var(--r-sm);
        background: linear-gradient(135deg, oklch(0.78 0.12 75), oklch(0.55 0.10 60));
        color: var(--accent-fg);
        display: grid; place-items: center;
        font-weight: 700;
    }

    /* Nav */
    .nav-group { margin-bottom: var(--s-4); }
    .nav-group-title {
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-tertiary);
        padding: 0 var(--s-2) var(--s-2);
    }
    .nav-item {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        padding: var(--s-2) var(--s-3);
        border-radius: var(--r-md);
        color: var(--text-secondary);
        position: relative;
    }
    .nav-item:hover { background: var(--bg-overlay); color: var(--text-primary); text-decoration: none; }
    .nav-item.is-active {
        background: var(--bg-raised);
        color: var(--text-primary);
    }
    .nav-item.is-active::before {
        content: '';
        position: absolute;
        left: -16px; top: 8px; bottom: 8px;
        width: 3px;
        background: var(--accent);
        border-radius: 2px;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        padding: var(--s-2) var(--s-4);
        background: var(--bg-raised);
        border: 1px solid var(--border-default);
        color: var(--text-primary);
        border-radius: var(--r-md);
        font-size: var(--fs-md);
        cursor: pointer;
    }
    .btn:hover { background: var(--bg-overlay); }
    .btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--accent-fg);
        font-weight: 600;
    }
    .btn-primary:hover { background: oklch(0.78 0.10 75); }
    .btn-ghost { background: transparent; border-color: transparent; }
    .btn-sm { padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); }

    /* Forms */
    .field { margin-bottom: var(--s-4); }
    .field label { display: block; font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--s-1); }
    .field input, .field textarea, .field select {
        width: 100%;
        padding: var(--s-2) var(--s-3);
        background: var(--bg-sunken);
        border: 1px solid var(--border-default);
        color: var(--text-primary);
        border-radius: var(--r-md);
        font-family: inherit;
        font-size: var(--fs-md);
    }
    .field input:focus, .field textarea:focus, .field select:focus {
        outline: none; border-color: var(--accent);
    }

    /* Card surfaces */
    .card {
        background: var(--bg-raised);
        border: 1px solid var(--border-subtle);
        border-radius: var(--r-lg);
        padding: var(--s-5);
    }

    /* Chip */
    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--s-1);
        padding: 2px var(--s-2);
        border-radius: 999px;
        background: var(--bg-overlay);
        color: var(--text-secondary);
        font-size: var(--fs-xs);
        font-family: var(--font-mono);
    }
    .chip.chip-monster { background: var(--type-monster); color: var(--accent-fg); }
    .chip.chip-spell   { background: var(--type-spell);   color: var(--accent-fg); }
    .chip.chip-trap    { background: var(--type-trap);    color: var(--accent-fg); }
    .chip.chip-extra   { background: var(--type-extra);   color: var(--accent-fg); }

    /* Flash */
    .flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); }
    .flash.flash-error { background: oklch(0.28 0.06 25); color: var(--text-primary); border: 1px solid var(--bad); }
    .flash.flash-ok    { background: oklch(0.28 0.06 155); color: var(--text-primary); border: 1px solid var(--good); }
}

@layer utilities {
    .stack > * + * { margin-top: var(--s-3); }
    .row { display: flex; gap: var(--s-3); align-items: center; }
    .row-end { display: flex; gap: var(--s-3); align-items: center; justify-content: flex-end; }
    .text-secondary { color: var(--text-secondary); }
    .text-tertiary { color: var(--text-tertiary); }
    .grow { flex: 1; }
}