/* ============================================================ Anh Ngu Ms Hong — Brand Hub design tokens Each section is owned by a specific task (see banner). Edit ONLY your own region to avoid merge conflicts. ============================================================ */ :root { /* ===== COLOR TOKENS (owner: T62) ===== */ /* --- Core brand (from logo SVG — authoritative) --- */ --brand-navy: #082861; /* primary dominant; 20-30% of visual area */ --brand-red: #be1e2d; /* accent-main (CTA, highlight); 8-12% */ --brand-pink: #ec6f8a; /* accent-warm (decoration only); 3-8% */ /* HONG wordmark gradient (red -> pink, left to right) */ --brand-grad: linear-gradient(90deg, #be1e2d 0%, #ec6f8a 100%); /* --- Dominant-accent ratio guidance (see C2 §2.3 and O1 §2.2) --- neutral-bg 55-65% white/off-white/near-white -- breathing room navy 20-30% headings, nav, footer, info blocks, dark panels red 8-12% CTA, key numbers, visual emphasis markers pink 3-8% illustration panels, decorative backgrounds All three brand hues used at equal weight = visual noise; don't. --- */ /* --- Neutrals (5-step gray scale + white + off-white) --- */ --neutral-0: #ffffff; /* pure white -- primary background */ --neutral-50: #fff7fa; /* off-white with a slight warm-pink tint -- secondary bg */ --neutral-100: #f5f0f2; /* very light pinkish gray -- card backgrounds */ --neutral-200: #e8e0e3; /* light gray -- dividers, borders */ --neutral-300: #c8bfc4; /* mid-light gray -- disabled states, placeholders */ --neutral-400: #9e9098; /* mid gray -- secondary text, captions */ --neutral-700: #4a3f47; /* dark gray -- body text on light bg */ --neutral-900: #1a0f15; /* near-black -- high-emphasis text */ /* --- Semantic (UI feedback states) --- */ --color-success: #1a7a4a; /* green -- pass, confirmed; ratio ~8:1 on white */ --color-warning: #b05e00; /* amber-brown -- caution; ~5:1 on white */ --color-error: #c0282a; /* red-adjacent -- error (distinct from brand-red) */ --color-info: #0a4fa0; /* blue -- informational; distinct from navy */ /* ================================================================ PALETTE OPTIONS A / B / C Purpose: let the /decide/colors page present all three side by side. A later decision task picks ONE as the production palette. All three share the same navy + neutrals base; they differ only in accent treatment. ================================================================ */ /* --- Option A: Logo-faithful (navy + red + pink, no additions) --- "Classic" -- exactly what the logo uses; safe for brand consistency. Red = main CTA accent; pink = warm accent + illustration panels. */ --a-primary: #082861; /* navy */ --a-accent-main: #be1e2d; /* brand red */ --a-accent-warm: #ec6f8a; /* brand pink */ --a-grad: linear-gradient(90deg, #be1e2d 0%, #ec6f8a 100%); /* No fourth hue -- three is the ceiling per O1 §2.1 */ /* --- Option B: A + coral/orange accent (added energy) --- Adds a coral-orange (#e85d2f) between red and pink as a third accent; useful for youth-content sections and 10-15 age-group materials. Coral DOES pass WCAG AA on white (contrast ~3.4:1 for large text; use only on headings >=24px, never body copy). Per O1 §2.2: add orange ONLY as a tint within the gradient or as a spot accent -- never elevate it to compete with the three logo colors. */ --b-primary: #082861; /* navy */ --b-accent-main: #be1e2d; /* brand red */ --b-accent-coral: #e85d2f; /* coral-orange -- bridge/energy accent */ --b-accent-warm: #ec6f8a; /* brand pink */ --b-grad: linear-gradient(90deg, #be1e2d 0%, #e85d2f 50%, #ec6f8a 100%); /* --- Option C: Navy-heavy (restrained red, minimal pink) --- "Restrained" -- maximises trust signals for parent audience. Red is used only sparingly (main CTA only); pink is near-absent (use only as a 5% tint wash, not solid panels). Best fit for: THCS/THPT content, academic docs, parent reports. */ --c-primary: #082861; /* navy -- dominant */ --c-primary-light: #0f3d8c; /* mid-navy -- hover states, secondary panels */ --c-primary-tint: #d9e4f5; /* very light navy tint -- card bg, table rows */ --c-accent-main: #be1e2d; /* red -- CTA only, strict 8% ceiling */ --c-accent-warm: #ec6f8a; /* pink -- decorative tint only, 3% ceiling */ --c-grad: linear-gradient(90deg, #082861 0%, #0f3d8c 100%); /* navy-only grad */ /* ===== END COLOR TOKENS ===== */ /* ===== TYPOGRAPHY TOKENS (owner: T63) ===== */ /* Font families */ --font-heading: 'Baloo 2', system-ui, sans-serif; --font-body: 'Be Vietnam Pro', system-ui, sans-serif; /* Type scale — modular scale ratio 1.25 (major third), base 1rem = 16px Step rem px (approx) -2 0.64 10.2 -1 0.8 12.8 0 1.0 16.0 body base +1 1.25 20.0 +2 1.563 25.0 +3 1.953 31.3 +4 2.441 39.1 +5 3.052 48.8 +6 3.815 61.0 */ --fs-xs: 0.64rem; /* captions, legal, metadata */ --fs-sm: 0.8rem; /* labels, secondary copy */ --fs-base: 1rem; /* body text */ --fs-md: 1.25rem; /* lead text, large labels */ --fs-lg: 1.563rem; /* card titles, H4 */ --fs-xl: 1.953rem; /* H3, section sub-headings */ --fs-2xl: 2.441rem; /* H2 */ --fs-3xl: 3.052rem; /* H1 */ --fs-4xl: 3.815rem; /* Hero headline, stat numbers */ /* Font weights Baloo 2 available: 400 500 600 700 800 Be Vietnam Pro available: 300 400 500 600 700 */ --fw-light: 300; /* Be Vietnam Pro only — long body intros */ --fw-regular: 400; /* Be Vietnam Pro body; Baloo 2 light display */ --fw-medium: 500; /* Be Vietnam Pro emphasis */ --fw-semibold: 600; /* Be Vietnam Pro strong; Baloo 2 sub-heading */ --fw-bold: 700; /* Both families — primary heading weight */ --fw-extrabold: 800; /* Baloo 2 only — hero / stat numbers */ /* Line heights Vietnamese diacritics (dấu mũ, dấu ngã stacked) need extra leading to prevent ascender/diacritic clipping across lines. */ --lh-heading: 1.2; /* H1/H2/H3 — tight but clear */ --lh-subheading: 1.3; /* H4/H5 card titles */ --lh-lead: 1.45; /* Lead paragraphs, large body */ --lh-body: 1.6; /* Body copy — Vietnamese-safe leading */ --lh-caption: 1.5; /* Captions, labels */ /* Letter spacing Heading: slight tightening for large sizes (body metrics of Baloo 2 are wide) Body: keep at normal; Be Vietnam Pro is already well-spaced Allcaps labels: loosen for legibility */ --ls-heading: -0.01em; /* H1/H2 at large sizes */ --ls-subheading: 0em; /* H3/H4 — no adjustment needed */ --ls-body: 0em; /* body — keep optical default */ --ls-label: 0.04em; /* allcaps / uppercase UI labels */ --ls-caption: 0.02em; /* small captions to aid legibility */ /* ===== END TYPOGRAPHY TOKENS ===== */ }