/* Design tokens — BISOFTECH platform ==================================== STATUS: REAL BRAND VALUES (as of Day 11+, supplied by BISOFTECH via logo files, brochures, and flyers — see static/img/brand-reference/ and BRANDING.md). Colors below were extracted by sampling actual pixels from the official logo/favicon files (the most authoritative source — flyer background panels use a few stylistic variants of the same blue, but the logo itself gives one exact, consistent value), not eyeballed or guessed. This is still the ONLY file that should ever hardcode a brand color or font — every component consumes these variables. */ :root { /* --- Color: brand ------------------------------------------------------- Primary navy sampled directly from the official logo/favicon files: #014A90 / #024A92 / #01498F all appeared — #014A90 used as the clean, representative value. Accent orange sampled from flyer panels (#FE5E00 / #FF6A00 / #FF6B01 cluster) — #FF6A00 as the representative value. */ --color-primary: #014A90; /* BISOFTECH navy — headers, nav, footer */ --color-primary-dark: #003287; /* darker navy sampled from flyer panels — footer base, dark mode bg */ --color-primary-light: #1C4CA1; /* lighter navy sampled from brochure panels — hover/active states */ --color-accent: #FF6A00; /* BISOFTECH orange — CTAs, badges, stats */ --color-accent-dark: #E05C00; /* accent hover/active (darkened from #FF6A00) */ /* THE ACCENT, DARK ENOUGH TO BE READ — Day 35. #E05C00 measures 3.68:1 on white and 3.43:1 on --color-surface-alt. Both are below WCAG AA for normal text (4.5:1), and it was carrying every card eyebrow on the site, the required-field asterisk, the programme prices and the certification provider names — all small text, which is the worst place to be short. #B84B00 measures 5.19:1 on white and 4.84:1 on the alt surface. Use --color-accent-dark for hover states and fills, where the 3:1 non-text threshold applies; use this one for TEXT. */ --color-accent-text: #B84B00; --color-accent-contrast: #FFFFFF;/* white text on orange — matches the brochure's own "ENROLL NOW" usage */ /* Stable — does NOT flip between light/dark mode. Use for text/icons on surfaces that are *always* dark regardless of theme (hero, footer, topbar, "ghost on dark" buttons). Do NOT use --color-surface for this: --color-surface is the page background and legitimately flips to a dark color in dark mode, which would make text invisible against an already-dark hero/footer. */ --color-on-dark: #F7F9FC; /* --- Color: neutrals / text -------------------------------------------- */ --color-ink: #1A1F2B; /* body text */ --color-muted: #5B6472; /* secondary text, captions */ --color-surface: #FFFFFF; /* cards, page background (light mode) */ --color-surface-alt: #F5F7FA; /* section backgrounds, zebra stripes */ --color-border: #E2E6ED; /* --- Color: feedback ---------------------------------------------------- */ /* #1E8E5A until Day 35, when the contrast test was written and measured it at 4.14:1 on white — below AA for normal text, and 3.66:1 on the success alert's own background, which is where it is mostly read ("Application approved", "Payment recorded"). */ --color-success: #177349; --color-danger: #C13B3B; --color-warning: var(--color-accent); /* --- Typography --------------------------------------------------------- Display: Space Grotesk — geometric, slightly technical character, used for headings only, with restraint. Body: Inter — highly legible at small sizes for dense dashboard UI. Mono: IBM Plex Mono — used ONLY for numeric/data elements (stat counters, program duration/module-count badges, matricule/reference numbers) as a deliberate nod to the subject: a software institute. This is the platform's one signature typographic device — used sparingly, never for body copy. Display font updated Day 11+ from Space Grotesk to Poppins — a closer visual match to the bold, rounded geometric headline style used across BISOFTECH's real flyers/brochure ("TRANSFORM YOUR FUTURE IN TECH", "OUR PROGRAMS"). This is a best-effort visual match, not a confirmed exact brand font — the flyers themselves are static designed graphics, so the precise font FILE used isn't recoverable from them the way the color palette was (sampling pixels can't tell you a font name). If BISOFTECH can confirm the actual typeface, this is the only line that needs to change. ------------------------------------------------------------------------- */ --font-display: "Poppins", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Consolas", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --leading-tight: 1.15; --leading-normal: 1.55; /* --- Spacing scale (4px base) ------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; /* --- Layout -------------------------------------------------------------- */ --container-max: 1200px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06); --shadow-md: 0 4px 12px rgba(20, 33, 61, 0.10); --shadow-lg: 0 12px 32px rgba(20, 33, 61, 0.16); /* --- Tints --------------------------------------------------------------- Translucent washes of the two brand hues, for icon plates and soft backgrounds. Written as rgba() of the brand hex rather than color-mix() so they render identically everywhere, and re-declared per theme rather than left to inherit — a 8%-navy wash disappears on a navy-black surface. */ --tint-primary: rgba(1, 74, 144, 0.08); --tint-primary-strong: rgba(1, 74, 144, 0.14); --tint-accent: rgba(255, 106, 0, 0.10); --tint-neutral: rgba(26, 31, 43, 0.05); /* --- Data visualisation ------------------------------------------------- Added 26 Aug 2026 with the dashboard charts. Chart colour is not picked by eye here — every value below was measured against the surface it actually renders on (#FFFFFF light, #10192E dark) and the numbers in the comments are real WCAG contrast ratios, not aspirations. Two separate jobs, never mixed: * SERIES — magnitude and trend. ONE hue (the brand navy), because departments/programs/weeks are nominal or temporal, not ranked by colour. Shading a bar darker because it is longer spends the identity channel re-encoding what length already shows. * STATUS — reserved meanings (approved / pending / rejected). Never reused for "the third series". Always shipped with a visible label, because approved-green and rejected-red are the textbook red/green collapse under deuteranopia (measured ΔE 4.6 in OKLab) and hue alone must never be what tells them apart. `--viz-status-pending` measures 2.87:1 on white — under 3:1. That is the same brand orange as the CTA buttons, and the same known trade recorded in WEEK3_REVIEW.md. It is legal here ONLY because every segment that uses it carries a visible count + label and the figure has a table view; if either is ever removed, this token has to change with it. ------------------------------------------------------------------------- */ --viz-series: #014A90; /* 8.81:1 on white — brand navy */ --viz-series-soft: #256ABF; /* 5.39:1 — secondary shade, hover */ --viz-series-wash: rgba(1, 74, 144, 0.10); /* area fill — a wash, never a block */ /* Day 35: was #1E8E5A at 4.14:1, which is under AA for the pill LABEL beside it ("Approved"). Now the same green as --color-success, measured. */ --viz-status-approved: #177349; /* 5.86:1 */ --viz-status-pending: #FF6A00; /* 2.87:1 — see note above */ --viz-status-rejected: #C13B3B; /* 5.31:1 */ --viz-grid: #E8ECF2; /* hairline, one step off surface */ --viz-axis: #C9D1DE; --viz-ink: var(--color-ink); --viz-muted: var(--color-muted); --viz-surface: var(--color-surface); /* --- Motion -------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; /* --- Breakpoints (referenced in comments; media queries hardcode these since CSS custom properties can't be used inside @media conditions) --- sm: 480px · md: 768px · lg: 1024px · xl: 1280px ------------------------------------------------------------------------- */ } /* Dark mode — toggled via [data-theme="dark"] on , see main.js. Also honors the OS-level preference on first visit before any manual choice is stored. */ :root[data-theme="dark"] { --color-ink: #E7EAF0; --color-muted: #A7AEBC; --color-surface: #10192E; --color-surface-alt: #0B1526; --color-border: #24304A; /* Chart colours are re-STEPPED for the dark surface (#10192E), not reused. The light navy is 1.4:1 on dark — invisible. Every value below clears 3:1 there. */ --viz-series: #5598E7; /* 5.86:1 on #10192E */ --viz-series-soft: #3987E5; /* 4.81:1 */ --viz-series-wash: rgba(85, 152, 231, 0.14); --viz-status-approved: #2FB37A; /* 6.54:1 */ --viz-status-pending: #FF8534; /* 7.21:1 */ --viz-status-rejected: #E06B6B; /* 5.40:1 */ --viz-grid: #1E293F; --viz-axis: #2C3A56; --tint-primary: rgba(85, 152, 231, 0.14); --tint-primary-strong: rgba(85, 152, 231, 0.22); --tint-accent: rgba(255, 133, 52, 0.16); /* On a dark surface the bright accent is the readable one: #FF8534 on #10192E is 6.6:1. The light-mode text token would be 2.3:1 here. */ --color-accent-text: #FF8534; /* Status colours need their own dark values: the light green is 2.99:1 on the dark surface and the light red 3.30:1 — both unreadable exactly where an error message matters most. */ --color-success: #3FBF83; --color-danger: #F87171; --tint-neutral: rgba(231, 234, 240, 0.06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-ink: #E7EAF0; --color-muted: #A7AEBC; --color-surface: #10192E; --color-surface-alt: #0B1526; --color-border: #24304A; /* Chart colours are re-STEPPED for the dark surface (#10192E), not reused. The light navy is 1.4:1 on dark — invisible. Every value below clears 3:1 there. */ --viz-series: #5598E7; /* 5.86:1 on #10192E */ --viz-series-soft: #3987E5; /* 4.81:1 */ --viz-series-wash: rgba(85, 152, 231, 0.14); --viz-status-approved: #2FB37A; /* 6.54:1 */ --viz-status-pending: #FF8534; /* 7.21:1 */ --viz-status-rejected: #E06B6B; /* 5.40:1 */ --viz-grid: #1E293F; --viz-axis: #2C3A56; --tint-primary: rgba(85, 152, 231, 0.14); --tint-primary-strong: rgba(85, 152, 231, 0.22); --tint-accent: rgba(255, 133, 52, 0.16); --tint-neutral: rgba(231, 234, 240, 0.06); } }