/* ==========================================================================
   KromeAppSite — base tokens & primitives.
   Theme: purple primary, white surfaces, black ink accents.
   Tokens are --krome-* so page/component scoped CSS can reference them.
   Palette values are defaults; branding is admin-configurable (replaced later).
   ========================================================================== */

:root {
    /* Brand palette */
    --krome-primary: #6d28d9;          /* purple 700 */
    --krome-primary-strong: #5b21b6;   /* purple 800 */
    --krome-primary-soft: #ede9fe;     /* purple 100 */
    --krome-primary-contrast: #ffffff;

    /* Ink (black accents) + surfaces (white) */
    --krome-ink: #0b0b0f;
    --krome-ink-muted: #4b4b57;
    --krome-surface: #ffffff;
    --krome-surface-2: #faf9fe;
    --krome-border: #e7e5f0;

    /* Typography */
    --krome-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --krome-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout */
    --krome-container: 1140px;
    --krome-radius: 14px;
    --krome-shadow: 0 10px 30px -12px rgba(28, 8, 66, 0.25);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--krome-font-body);
    color: var(--krome-ink);
    background: var(--krome-surface);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--krome-font-display);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 0.5em;
}

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

.site-container {
    width: 100%;
    max-width: var(--krome-container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn--lg {
    padding: 0.85rem 1.6rem;
    font-size: 1.05rem;
}

.btn--primary {
    background: var(--krome-primary);
    color: var(--krome-primary-contrast);
}

.btn--primary:hover {
    background: var(--krome-primary-strong);
    box-shadow: var(--krome-shadow);
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--krome-ink);
    border-color: var(--krome-border);
}

.btn--ghost:hover {
    border-color: var(--krome-primary);
    color: var(--krome-primary);
}

/* Sections */
.section {
    padding-block: clamp(3rem, 7vw, 6rem);
}

.section--empty {
    text-align: center;
}

.section__heading {
    font-size: clamp(2rem, 5vw, 3.25rem);
    color: var(--krome-ink);
}

.section__subheading {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--krome-ink-muted);
    max-width: 42rem;
    margin-inline: auto;
    margin-block-end: 1.75rem;
}

.not-found {
    text-align: center;
    padding-block: 6rem;
}