/* ============================================================ Design Tokens — shared across all 4 apps ============================================================ */ :root{ /* Neutrals */ --gray-0:#ffffff; --gray-25:#fafafb; --gray-50:#f5f6f8; --gray-100:#eceef2; --gray-200:#dfe2e8; --gray-300:#c6cad3; --gray-400:#9aa0ad; --gray-500:#6b7280; --gray-600:#4b5160; --gray-700:#343a46; --gray-800:#20242e; --gray-900:#12141a; /* Semantic colors */ --success:#16a34a; --success-bg:#e8f7ee; --warning:#d97706; --warning-bg:#fef3e2; --danger:#dc2626; --danger-bg:#fdeaea; --info:#2563eb; --info-bg:#eaf1fd; --pending:#7c3aed; --pending-bg:#f1eafc; /* Base surface */ --bg:var(--gray-50); --surface:var(--gray-0); --surface-alt:var(--gray-25); --border:var(--gray-200); --text:var(--gray-800); --text-muted:var(--gray-500); --text-faint:var(--gray-400); /* Default accent (overridden per app below) */ --accent:#4f46e5; --accent-dark:#4338ca; --accent-light:#eef0fd; --accent-text:#ffffff; /* Spacing scale */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; /* Radius */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px; /* Shadow */ --shadow-sm:0 1px 2px rgba(18,20,26,.06); --shadow-md:0 4px 12px rgba(18,20,26,.08); --shadow-lg:0 12px 32px rgba(18,20,26,.14); /* Type */ --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --transition:160ms cubic-bezier(.4,0,.2,1); } /* Per-app accent overrides — set via class on */ body.app-parent{ --accent:#f0653e; --accent-dark:#d94f2b; --accent-light:#fdece5; } body.app-teacher{ --accent:#0d9488; --accent-dark:#0b7a70; --accent-light:#e3f6f3; } body.app-admin{ --accent:#4f46e5; --accent-dark:#4338ca; --accent-light:#eef0fd; } body.app-superadmin{ --accent:#7c3aed; --accent-dark:#6b28d9; --accent-light:#f1eafc; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font); background:var(--bg); color:var(--text); font-size:var(--fs-base); line-height:1.45; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p{margin:0;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} img{max-width:100%;display:block;} ul{margin:0;padding:0;list-style:none;} /* Flash-of-unauthenticated-content guard, toggled by auth.js */ html.auth-checking body{visibility:hidden;}