/* ============================================================
Handova — Design tokens
------------------------------------------------------------
The single source of truth for colour, type, spacing, radii,
shadows and motion across every app in this repository.
Link this BEFORE an app's own stylesheet:
Lifted verbatim from the Phase 1 marketing site, which remains
the visual reference. Do not fork these values per app.
============================================================ */
/* Inter, served from this site (fonts/, licence in
fonts/Inter-LICENSE.txt; docker/nginx.conf /assets/fonts/) rather
than Google's, so nothing on anybody else's server stands between a
visitor and the first paint. One variable file per script covers
every weight; the browser fetches latin-ext only for a page that
uses one of its letters. swap: text shows at once in the fallback
from --font-sans, and turns into Inter when it lands. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* Neutrals */
--navy-950: #080D18;
--navy-900: #0C1424;
--navy-800: #162034;
--navy-700: #26324A;
--bg: #F7F8FA;
--bg-alt: #FFFFFF;
--surface: #FFFFFF;
--surface-sunk: #F4F6F8;
--border: #E5E8EC;
--border-strong: #D6DBE2;
--text: #16202E;
--text-muted: #5C6779;
--text-faint: #626D82; /* 5.3:1 on white — faint, but still readable */
--text-invert:#FFFFFF;
/* Accent — the purple from the marketing site's playful layer, so
the portals and sign-in screens read as the same product. */
--accent: #7B3FD4; /* 5.7:1 on white */
--accent-hover: #6A2FC4;
--accent-soft: #F3ECFD;
--accent-border:#DCCBF7;
/* Primary buttons are flat purple (--accent), white text. No gradients. */
/* The portals' sidebars: a deep Handova purple (white text 13:1). */
--sidebar-bg: #2B1463;
--sidebar-bg-deep: #22104F;
/* Brand: WhatsApp. Slightly deepened from the official #25D366 so a
saturated green does not fight the restrained palette. */
/* Status.
--danger / --danger-soft complete the palette but are deliberately
unused on the marketing site — nothing here fails. They are kept so the
portals in later phases inherit the same scale. */
--success: #256B4D;
--success-soft: #EAF5EF;
--warning: #96660D;
--warning-soft: #FBF2E2;
--danger: #B0433A;
--danger-soft: #FBEDEC;
/* Typography */
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--fs-body: 1rem;
--fs-sm: 0.9375rem;
--fs-xs: 0.8125rem;
--fs-label: 0.75rem;
--lh-snug: 1.25;
--lh-body: 1.65;
--tracking-tight: -0.022em;
--tracking-label: 0.1em;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3.5rem;
--space-9: 5rem;
--container: 1240px;
--gutter: clamp(1.25rem, 4vw, 2rem);
/* Radius */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-full: 999px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(12, 20, 36, 0.04);
--shadow-sm: 0 1px 2px rgba(12, 20, 36, 0.05), 0 1px 3px rgba(12, 20, 36, 0.03);
--shadow-md: 0 4px 14px -3px rgba(12, 20, 36, 0.07), 0 2px 5px -2px rgba(12, 20, 36, 0.04);
--shadow-lg: 0 22px 48px -14px rgba(12, 20, 36, 0.16), 0 6px 16px -6px rgba(12, 20, 36, 0.06);
/* Motion */
--t-fast: 150ms;
--t-base: 200ms;
--t-slow: 300ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
/* --------------------------------------------------------
Portal extension
The admin and parent portals need an informational status
the marketing site never did. Aliased to the accent pair so
no new colour enters the system.
-------------------------------------------------------- */
--info: #7B3FD4;
--info-soft: #F3ECFD;
/* Translucent sticky headers (marketing nav, school topbar, gate
header) — a blurred tint over whatever scrolls under them, so it
can't just be --surface. Kept as its own pair of tokens because
the alpha and the scrolled-state opacity are specific to that
effect, not general-purpose colours. */
--header-bg: rgba(247, 248, 250, 0.85);
--header-bg-scrolled: rgba(255, 255, 255, 0.92);
}
/* --------------------------------------------------------
Dark theme
------------------------------------------------------------
Applied by packages/design-system/theme.js, which sets
data-theme="dark" on from the visitor's saved choice
(falling back to their OS preference) and exposes the toggle
every app's topbar/sidebar renders.
Only the tokens that read as "colour" move — spacing, type,
radius, shadow shape and motion stay put. The navy sidebar
background used across every portal is already dark in the
light theme, so it is intentionally left as-is here.
-------------------------------------------------------- */
:root[data-theme="dark"] {
--bg: #0A0F1A;
--bg-alt: #0F1626;
--surface: #121A2C;
--surface-sunk: #0D1420;
--border: #263252;
--border-strong: #34426A;
--text: #E8ECF4;
--text-muted: #A9B3C7;
--text-faint: #8B96AC;
--text-invert:#FFFFFF;
--accent: #B08CF2;
--accent-hover: #C4A8F6;
--accent-soft: #221A3A;
--accent-border:#3D2E66;
--success: #4FCE95;
--success-soft: #12291F;
--warning: #F0B858;
--warning-soft: #332510;
--danger: #F08B82;
--danger-soft: #34181A;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 14px -3px rgba(0, 0, 0, 0.4), 0 2px 5px -2px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 22px 48px -14px rgba(0, 0, 0, 0.55), 0 6px 16px -6px rgba(0, 0, 0, 0.3);
--info: #B08CF2;
--info-soft: #221A3A;
--sidebar-bg: #1E0F45;
--sidebar-bg-deep: #180B38;
--header-bg: rgba(10, 15, 26, 0.85);
--header-bg-scrolled: rgba(10, 15, 26, 0.95);
}