/*
 * Design tokens + base element styling, loaded by every page.
 * Component-specific rules live in /css/components/**; page-specific rules
 * in /css/pages/**. Nothing here is compiled — plain CSS, custom properties
 * for theming, cascade layers for predictable ordering against legacy CSS.
 */
@layer tokens, base, components, pages, legacy;

@layer tokens {
    :root {
        color-scheme: light dark;

        --bg: #f6f7f9;
        --surface: #ffffff;
        --surface-alt: #f0f2f5;
        --border: #dfe3e8;
        --text: #1b1f24;
        --text-muted: #5c6773;
        --primary: #1f6feb;
        --primary-text: #ffffff;
        --danger: #c8372d;
        --success: #1a7f4b;
        --warning: #9a6b00;

        --radius: 8px;
        --shadow: 0 1px 2px rgb(16 22 26 / 8%), 0 8px 24px rgb(16 22 26 / 8%);
        --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #14171a;
            --surface: #1c2024;
            --surface-alt: #22272c;
            --border: #333a42;
            --text: #e8eaed;
            --text-muted: #9aa4af;
            --primary: #4d8ef7;
            --danger: #e5695e;
            --success: #4cbd83;
            --warning: #d4a13a;
            --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
        }
    }
}

@layer base {
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font: 15px/1.5 var(--font);
    }

    body.has-modal {
        overflow: hidden;
    }

    h1 {
        margin: 0;
        font-size: 1.6rem;
    }

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

    main {
        max-width: 1100px;
        margin: 0 auto;
        padding: 1.5rem 1.25rem 4rem;
    }

    code {
        background: var(--surface-alt);
        border-radius: 4px;
        padding: 0.1em 0.35em;
        font-size: 0.9em;
    }
}

@layer components {
    .app-nav {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        padding: 0.85rem 1.25rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .app-nav__brand {
        font-weight: 650;
        color: var(--text);
        text-decoration: none;
    }

    .app-nav__link {
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9rem;
    }

    .app-nav__link.is-active {
        color: var(--primary);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.9rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        line-height: 1.2;
        cursor: pointer;
    }

    .btn:hover:not(:disabled) {
        border-color: var(--text-muted);
    }

    .btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }

    .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .btn--primary {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--primary-text);
    }

    .btn--danger {
        color: var(--danger);
    }

    .btn--ghost {
        background: transparent;
    }

    .btn--sm {
        padding: 0.3rem 0.55rem;
        font-size: 0.85rem;
    }

    .input,
    .field input,
    .field select {
        width: 100%;
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text);
        font: inherit;
    }

    .input:focus-visible,
    .field input:focus-visible,
    .field select:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        margin-bottom: 0.9rem;
    }

    .field label {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .field__error {
        margin: 0;
        color: var(--danger);
        font-size: 0.8rem;
    }

    .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem;
    }

    .form__actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-top: 1.25rem;
    }

    .badge {
        display: inline-block;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        background: var(--surface-alt);
        color: var(--text-muted);
        font-size: 0.78rem;
        text-transform: capitalize;
    }

    .badge--active {
        background: color-mix(in srgb, var(--success) 15%, transparent);
        color: var(--success);
    }

    .badge--lapsed {
        background: color-mix(in srgb, var(--danger) 15%, transparent);
        color: var(--danger);
    }

    .badge--prospect {
        background: color-mix(in srgb, var(--warning) 18%, transparent);
        color: var(--warning);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
    }

    .pagination__status {
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .spinner {
        display: inline-block;
        width: 0.9em;
        height: 0.9em;
        border: 2px solid var(--border);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
        .spinner { animation: none; }
    }

    .link-list {
        padding-left: 1.1rem;
        line-height: 2;
    }

    .note {
        color: var(--text-muted);
        font-size: 0.9rem;
    }
}