/*
 * Shared styles for the public pages. Mirrors the extension's own tokens so
 * the site and the product read as one thing, and stays a single small file
 * because these pages are uploaded by hand to shared hosting.
 */
:root {
    color-scheme: light;
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #f1f3f9;
    --border: #e3e6ef;
    --text: #151827;
    --text-2: #545b73;
    --text-3: #6e7488;
    --primary: #5b5bf6;
    --primary-soft: rgba(91, 91, 246, 0.12);
    --radius: 8px;
    --radius-lg: 12px;
    --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #080808;
        --surface: #0d0d0e;
        --surface-2: #17171a;
        --border: #232326;
        --text: #fafafa;
        --text-2: #a0a0a5;
        --text-3: #7e7e86;
        --primary: #a5a5ff;
        --primary-soft: rgba(165, 165, 255, 0.12);
    }
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary-soft); color: var(--text); }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

header.site {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
header.site .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 17px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.brand img { width: 28px; height: 28px; border-radius: 6px; }
nav.site a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    margin-left: 18px;
}
nav.site a:hover { color: var(--text); text-decoration: underline; }

main { padding: 48px 0 64px; }

h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.03em; margin: 0 0 8px; }
h2 { font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 12px; }
h3 { font-size: 17px; margin: 28px 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--primary); }

.updated { color: var(--text-3); font-size: 14px; margin-bottom: 32px; }
.lead { font-size: 18px; color: var(--text-2); }

.callout {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface);
    margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}
th, td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
th { font-weight: 600; color: var(--text-2); font-size: 14px; }

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-2);
}

footer.site {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 24px 0;
    color: var(--text-3);
    font-size: 14px;
}
footer.site .wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
footer.site a { color: var(--text-2); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    h1 { font-size: 27px; }
    main { padding: 32px 0 48px; }
    nav.site a { margin-left: 0; margin-right: 16px; }
}