/* ===== main.css — demo site chrome (scoped to .site) ===== */

/* One palette: the site names are the theme's tokens (rt-base.css), so light and dark follow it */
:root {
    --site-bg: var(--rt-surface-2);
    --site-surface: var(--rt-surface);
    --site-text: var(--rt-text);
    --site-muted: var(--rt-muted);
    --site-border: var(--rt-border);
    --site-accent: var(--rt-accent);
    --site-accent-weak: color-mix(in oklab, var(--rt-accent) 10%, var(--rt-surface));
    --site-radius: 12px;
    --site-gap: 16px;
    --site-font: var(--rt-font);
    --site-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Base layout */
:where(.site) {
    min-height: 100dvh;
    background: var(--site-bg);
    color: var(--site-text);
    font: 16px/1.55 var(--site-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(.site a) {
    color: var(--site-accent);
    text-decoration: none;
}
:where(.site a:hover) { text-decoration: underline; }

/* Page regions */
:where(.site-header) {
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: saturate(180%) blur(8px);
    background: color-mix(in oklab, var(--site-surface) 85%, transparent);
    border-bottom: 1px solid var(--site-border);
}
:where(.site-header .wrap),
:where(.site-main .wrap),
:where(.site-footer .wrap) {
    max-width: 1100px;
    margin-inline: auto;
    padding: 14px clamp(16px, 3.2vw, 28px);
}
:where(.site-main .wrap) { padding-block: clamp(20px, 4vw, 40px); }

:where(.brand) {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; letter-spacing: .2px;
}
:where(.brand img){ width: 28px; height: 28px; border-radius: 6px; }

/* Typography */
:where(.site h1){ font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 0 0 12px; }
:where(.site h2){ font-size: clamp(22px, 3vw, 28px); line-height: 1.2;  margin: 28px 0 10px; }
:where(.site h3){ font-size: clamp(18px, 2.2vw, 22px); margin: 22px 0 8px; }
:where(.site p){ margin: 0 0 12px; color: var(--site-text); }
/* the theme has .grid, .card, .lead and .muted (rt-base.css); this is only what the demo site adds to a card */
:where(.card .actions){ display: flex; gap: 8px; margin-top: 10px; }

/* Buttons */
:where(.btn){
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; padding: 8px 12px;
    font-weight: 600; letter-spacing: .2px; cursor: pointer;
    border: 1px solid var(--site-border);
    background: var(--site-surface);
    color: var(--site-text);
    transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
:where(.btn:hover){ transform: translateY(-1px); }
:where(.btn.primary){
    border-color: color-mix(in oklab, var(--site-accent) 35%, var(--site-border));
    background: linear-gradient(180deg,
    color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)),
    color-mix(in oklab, var(--site-accent) 4%, var(--site-surface))
    );
    color: var(--site-text);
}
:where(.btn.ghost){
    background: color-mix(in oklab, var(--site-accent-weak) 60%, transparent);
    border-color: transparent;
}

/* Code & pre (for examples) */
:where(.site :not(pre) > code){
    font-family: var(--site-code);
    background: color-mix(in oklab, var(--site-surface) 80%, transparent);
    border: 1px solid var(--site-border);
    border-radius: 8px; padding: 0 .35em;
}
:where(.site pre){
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 12px 14px; overflow: auto;
}

/* Utilities */
:where(.stack > * + *){ margin-top: var(--site-gap); }
:where(.cluster){
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
:where(img){ max-width: 100%; height: auto; }

/* Footer */
:where(.site-footer){
    border-top: 1px solid var(--site-border);
    color: var(--site-muted);
}