@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400&display=swap");

/*
 * Talking Each Day: the one stylesheet for every public page (homepage,
 * enroll, about, privacy, terms, pay, family portal). Brand colors and fonts
 * live here as variables; each page's own <style> keeps only its layout and
 * refers to these names, so a rebrand is an edit to this block alone.
 * Rebrand 2026-09-12: morning sky, navy, coral, sunshine, mint.
 */
:root {
    /* Brand */
    --ground: #f4f9ff;        /* page background: morning sky */
    --ink: #1f2a44;           /* text and section headings: navy */
    --ink-2: #4a5775;         /* secondary text */
    --ink-3: #6f7b96;         /* muted text, footers */
    --coral: #c94a1a;         /* links, outline buttons (4.7:1 on white) */
    --coral-bright: #e65a28;  /* filled buttons, homepage headline */
    --accent: #eb6834;        /* small accent marks */
    --sun: #ffc83d;           /* sunshine: step circles, highlights */
    --sun-soft: #fff6d8;      /* companion text bubble, soft fills */
    --sun-panel: #fff9e8;     /* soft panel */
    --note-border: #f5d77a;   /* border on sunny note boxes */
    --mint: #e2f5e9;          /* their text bubble, success fill */
    --rule: #dbe6f3;          /* hairlines */
    --border: #c9d8ea;        /* inputs and cards */
    --chip: #eaf1fa;          /* neutral chips */
    --chip-2: #e8eef6;
    --shadow: rgba(31, 42, 68, .07);

    /* Status: meanings, not brand; keep these even through a rebrand */
    --ok-ink: #3f6b36;
    --ok-border: #bfd8b4;
    --ok-border-2: #c4dbba;
    --err-bg: #fbe9e7;
    --err-border: #e5b1a8;
    --err-border-2: #efc4bd;
    --err-ink: #8c2f21;
    --warn-bg: #fdf0d7;
    --warn-ink: #8a5a10;
    --warn-ink-2: #8a5a1a;

    /* Type */
    --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
}

body {
    font-family: var(--font-body);
    background: var(--ground);
    color: var(--ink);
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

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