/* standard.css – Base Layer */
@layer base, tenant;

@layer base {
    :root {
        --cn-font-sans: system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
        --cn-text: #0f172a;
        --cn-text-muted: #475569;
        --cn-bg: #fff;
        --cn-surface: #fff;
        --cn-border: #e5e7eb;
        --cn-primary: #0ea5e9;
        --cn-primary-600: #0284c7;
        --cn-accent: #a78bfa;
        --cn-radius: 14px;
        --cn-shadow: 0 10px 30px rgba(2,6,23,.06);
        --cn-code-bg: #0b1220;
        --cn-code-fg: #e2e8f0;
        --cn-table-stripe: #f8fafc;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --cn-text: #e2e8f0;
            --cn-text-muted: #94a3b8;
            --cn-bg: #0b0f19;
            --cn-surface: #0f1525;
            --cn-border: #1f2937;
            --cn-shadow: 0 10px 25px rgba(0,0,0,.45);
            --cn-table-stripe: #0b1220;
        }
    }

    html, body {
        font-family: var(--cn-font-sans);
        color: var(--cn-text);
        background: var(--cn-bg);
        line-height: 1.55;
    }

    a {
        color: var(--cn-primary);
        text-decoration: none
    }

        a:hover {
            text-decoration: underline
        }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 .6rem;
        color: var(--cn-text);
        letter-spacing: -.01em
    }

    h1 {
        font-size: clamp(2rem,1.2rem+2.5vw,3rem);
        font-weight: 800
    }

    h2 {
        font-size: clamp(1.5rem,1rem+1.5vw,2.2rem);
        font-weight: 700
    }

    h3 {
        font-size: clamp(1.25rem,1rem+.8vw,1.6rem);
        font-weight: 700
    }

    p {
        margin: .5rem 0 1rem;
        color: var(--cn-text-muted)
    }

    /* Hero */
    .hero-section, .cn-hero {
        border-radius: var(--cn-radius);
        padding: clamp(2rem,3vw,3rem);
        background: linear-gradient(180deg, rgba(2,6,23,.85), rgba(2,6,23,.65));
        color: #eaf2fb;
        box-shadow: var(--cn-shadow);
    }

        .hero-section h1, .cn-hero .cn-hero-title {
            color: #fff
        }

    /* Sections */
    .cn-section {
        background: var(--cn-surface);
        border: 1px solid var(--cn-border);
        border-radius: var(--cn-radius);
        padding: 2rem;
        box-shadow: var(--cn-shadow);
        margin: 2rem 0
    }

    .cn-section-title {
        margin-bottom: .75rem
    }

    .section {
        background: var(--cn-surface);
        border: 1px solid var(--cn-border);
        border-radius: var(--cn-radius);
        margin: 2rem 0;
        box-shadow: var(--cn-shadow);
        overflow: hidden
    }

    .section-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--cn-border);
        background: linear-gradient(180deg, rgba(2,6,23,.03), transparent)
    }

    .section-title {
        margin: 0
    }

    .section-body {
        padding: 1.25rem
    }

    /* Cards */
    .card {
        background: var(--cn-surface);
        border: 1px solid var(--cn-border);
        border-radius: var(--cn-radius);
        box-shadow: var(--cn-shadow)
    }

    .card-header {
        padding: .9rem 1.1rem;
        border-bottom: 1px solid var(--cn-border);
        background: linear-gradient(180deg, rgba(2,6,23,.03), transparent)
    }

    .card-title {
        margin: 0
    }

    .card-content {
        padding: 1.1rem
    }

    /* Features */
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(12,1fr);
        gap: clamp(1rem,1.6vw,1.5rem)
    }

    @media (max-width:680px) {
        .feature-grid {
            grid-template-columns: 1fr
        }
    }

    .feature-card {
        grid-column: span 4;
        background: var(--cn-surface);
        border: 1px solid var(--cn-border);
        border-radius: var(--cn-radius);
        padding: 1.25rem;
        box-shadow: var(--cn-shadow)
    }

    @media (max-width:980px) {
        .feature-card {
            grid-column: span 6
        }
    }

    /* Forms */
    .form, .form.form {
        background: var(--cn-surface);
        border: 1px solid var(--cn-border);
        border-radius: var(--cn-radius);
        padding: 1rem;
        box-shadow: var(--cn-shadow)
    }

    .form-label {
        display: block;
        font-size: .92rem;
        color: var(--cn-text-muted);
        margin: .75rem 0 .35rem
    }

    .form-input, .form textarea.form-input, .form select.form-input {
        width: 100%;
        font: inherit;
        color: var(--cn-text);
        background: var(--cn-bg);
        border: 1px solid var(--cn-border);
        border-radius: 10px;
        padding: .62rem .75rem;
        outline: none;
        transition: border-color .15s, box-shadow .15s, background .15s;
        box-shadow: 0 0 0 0 rgba(14,165,233,0);
    }

        .form-input:focus {
            border-color: var(--cn-primary);
            box-shadow: 0 0 0 4px rgba(14,165,233,.15);
            background: color-mix(in oklab, var(--cn-bg) 92%, white)
        }

    .form-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--cn-primary);
        background: linear-gradient(180deg,var(--cn-primary),var(--cn-primary-600));
        color: #fff;
        border-radius: 12px;
        padding: .65rem 1rem;
        font-weight: 700;
        cursor: pointer
    }

    /* Tables */
    .table, table {
        width: 100%;
        border-collapse: collapse
    }

        .table thead th, table thead th {
            font-weight: 700;
            text-align: left;
            border-bottom: 1px solid var(--cn-border);
            padding: .7rem .6rem
        }

        .table tbody td, table tbody td {
            border-bottom: 1px solid var(--cn-border);
            padding: .7rem .6rem
        }

        .table tbody tr:nth-child(odd), table tbody tr:nth-child(odd) {
            background: var(--cn-table-stripe)
        }

    /* Code */
    pre {
        background: var(--cn-code-bg);
        color: var(--cn-code-fg);
        padding: 1rem 1.2rem;
        border-radius: 10px;
        overflow: auto;
        border: 1px solid rgba(148,163,184,.2)
    }

        pre code {
            color: inherit
        }

    /* Utilities */
    .text-center {
        text-align: center
    }
}