/* Teki public pages — one small stylesheet, served same-origin (CSP default-src 'self').
   These pages are read by parents on a phone, often from an email link, so the layout is a
   single readable column with large touch targets. No web fonts, no trackers, no frameworks. */

/* The palette is the DESIGN_SYSTEM.md semantic token set, so these pages and the app read as one
   product. Only the tokens these pages use are defined. Measured contrast ratios in comments. */
:root {
    --teki-ink: #0B3442;        /* color.text.primary   — 12.91:1 on canvas, 13.26:1 on card */
    --teki-muted: #587280;      /* color.text.tertiary  — 4.95:1 on canvas, 5.08:1 on card */
    --teki-bg: #FDFCF8;         /* color.bg.canvas */
    --teki-card: #FFFFFF;       /* color.surface.default */
    --teki-accent: #0A7A42;     /* color.action.strong / color.text.link — 5.42:1 with white.
                                   color.action.primary #0B9650 is only 3.82:1 with white, so it
                                   is reserved for large fills and borders, never small text. */
    --teki-accent-ink: #FFFFFF; /* color.text.onPrimary */
    --teki-focus: #0A7A42;      /* color.border.focus   — 3 px ring at 2 px offset */
    --teki-border: #DCE7E3;     /* color.border.default */
    --teki-danger: #B3261E;     /* status.error.fg      — 6.54:1 on card, 5.72:1 on danger-bg */
    --teki-danger-bg: #FDECEA;  /* status.error.bg */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1.5rem 1rem 3rem;
    background: var(--teki-bg);
    color: var(--teki-ink);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    max-width: 40rem;
    margin: 0 auto;
    background: var(--teki-card);
    border: 1px solid var(--teki-border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
p  { margin: 0 0 1rem; }

a { color: var(--teki-accent); }

.lang {
    max-width: 40rem;
    margin: 0 auto 1rem;
    font-size: 0.9rem;
    color: var(--teki-muted);
}

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

.placeholder {
    border-left: 4px solid var(--teki-danger);
    background: var(--teki-danger-bg);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}

label { display: block; font-weight: 600; margin: 1rem 0 0.35rem; }

input[type="email"],
input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--teki-border);
    border-radius: 8px;
}

button {
    /* >= 48 dp touch target, like every interactive element in the app. */
    min-height: 48px;
    margin-top: 1.25rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--teki-accent-ink);
    background: var(--teki-accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--teki-focus);
    outline-offset: 2px;
}

footer {
    max-width: 40rem;
    margin: 1.5rem auto 0;
    font-size: 0.85rem;
    color: var(--teki-muted);
}

[hidden] { display: none !important; }