/* * Kulud Academy — design tokens * Phase 2 of the redesign. run_id KACAD_DS_20260805_200229_54ad1e44 * * ── WHAT THIS FILE IS ──────────────────────────────────────────────── * The single source of truth for colour, type, spacing, radius and shadow. * It declares custom properties ONLY — no selectors are styled here, so * adding it to a page cannot change how anything currently looks. Components * (components.css) and later phases consume these names. * * ── WHY A THIRD NAMESPACE ──────────────────────────────────────────── * Two token sets already exist in this theme and they disagree: * --k-* (assets/manara.css) Inter, radius 16/24/10, LMS pages * --ka-* (assets/academy-home.css) Merriweather + Source Sans 3, home only * Rather than edit either — both are live and working — --kla-* supersedes * them. Migrate call sites gradually; retire the older two only once nothing * references them. * * (Written the long way on purpose: the obvious phrasing puts the two old * prefixes side by side, which spells a comment terminator and silently * ends this block 14 lines early.) A verified census of the live pages found EIGHT custom * property prefixes already in use (--thim-, --wndb-, --wp-, --e-, --lp-, * --nfd-, --k-, --ka-) and ZERO occurrences of --kla-, so this name is free. * * ── COLOUR VALUES ARE THE LIVE ONES ────────────────────────────────── * The palette below is what academy.kulud-pharmacy.com renders TODAY * (Kulud green #00843d), not a rebrand. Confirmed by decision on * 2026-08-05. Changing brand later means editing this block and nothing else. * * ── EVERY PAIRING BELOW WAS MEASURED, NOT ASSUMED ──────────────────── * Contrast ratios in the comments are computed WCAG 2.2 values. Where a * pairing fails, the token carries a rule saying what to use instead. Those * rules are the useful part of this file — read them before picking a colour. */ :root { /* ── BRAND ────────────────────────────────────────────────────────── * primary is the action colour. It clears 4.5:1 on white BOTH ways * (4.81:1), so it works as a button background with white text AND as * link text on white — unusual and worth keeping. */ --kla-primary: #00843d; /* white on this: 4.81:1 PASS */ --kla-primary-dark: #00632e; /* white on this: 7.44:1 PASS */ --kla-primary-deeper: #004a22; /* white on this: 10.49:1 PASS */ --kla-primary-tint: #e8f4ee; /* surface only — see rule below */ --kla-primary-tint-2: #f3faf6; --kla-primary-mid: #a8dcc0; /* Accent is DECORATIVE. White text on it is 2.19:1 — a clear failure. * Never use it as a button background with white text; use --kla-primary. * Ink on accent is 6.71:1, so accent + dark text is fine. */ --kla-accent: #34c77b; --kla-on-accent: #1f2937; /* 6.71:1 PASS — the ONLY safe fg */ /* RULE: text on --kla-primary-tint must be --kla-primary-dark (6.59:1), * NOT --kla-primary (4.26:1 — fails AA for normal text). */ --kla-on-tint: #00632e; /* ── NEUTRALS ───────────────────────────────────────────────────────*/ --kla-white: #ffffff; --kla-bg: #f9fafb; /* page background */ --kla-surface: #ffffff; /* cards, panels */ --kla-surface-alt: #f3f5f7; --kla-border: #e5e7eb; /* DECORATIVE hairline (1.24:1). */ --kla-border-strong: #d1d5db; /* still decorative (1.47:1) */ /* Borders of INTERACTIVE controls (inputs, checkboxes, unfilled buttons) * must clear 3:1 against their background — WCAG 2.2 1.4.11. The two * greys above do not; this one does (3.39:1 on white). Use it on anything * a user can operate, and keep --kla-border for pure decoration. */ --kla-border-interactive: #858c98; /* 3.39:1 on white PASS */ --kla-text: #1f2937; /* 14.68:1 on white */ --kla-text-secondary: #4b5563; /* 7.56:1 on white */ --kla-text-muted: #6b7280; /* 4.83:1 on white, 4.63:1 on bg */ --kla-text-on-primary: #ffffff; --kla-text-disabled: #9ca3af; /* 2.54:1 — allowed: WCAG exempts * inactive controls (1.4.3/1.4.11) */ /* ── STATUS ───────────────────────────────────────────────────────── * Four states for competency and compliance. Each has a SOLID value (for * dots, bars and fills — judged at the 3:1 non-text threshold) and a * -text value dark enough to sit on its own tint at 4.5:1. * * The naive choices failed and were corrected here: * #2563eb on info tint = 4.48:1 FAIL -> #1d4ed8 = 5.81:1 PASS * #6b7280 on grey tint = 4.35:1 FAIL -> #565e6b = 5.88:1 PASS * * ACCESSIBILITY RULE: colour is never the only signal. Every status must * also carry an icon and a text label — see .kla-badge in components.css. */ --kla-success: #16a34a; /* 3.30:1 on white — fills only */ --kla-success-text: #12803a; /* 5.03:1 on white, 4.51:1 on tint */ --kla-success-tint: #e8f6ed; --kla-warning: #d97706; /* 3.19:1 on white — fills only */ --kla-warning-text: #a35a04; /* 5.22:1 on white, 4.75:1 on tint */ --kla-warning-tint: #fdf3e3; --kla-danger: #dc2626; /* 4.83:1 on white */ --kla-danger-text: #b91c1c; /* 6.47:1 on white, 5.59:1 on tint */ --kla-danger-tint: #fdeaea; --kla-neutral: #6b7280; --kla-neutral-text: #565e6b; /* 5.88:1 on its tint */ --kla-neutral-tint: #f1f3f5; --kla-info: #2563eb; --kla-info-text: #1d4ed8; /* 5.81:1 on its tint */ --kla-info-tint: #e8effd; /* ── TYPOGRAPHY ───────────────────────────────────────────────────── * One family for Latin AND Arabic. IBM Plex Sans Arabic covers both, so * switching language does not change the visual texture of the page — * the usual failure when a site pairs a Latin face with a separate Arabic * one. It is self-hosted (assets/fonts.css), which also removes a * render-blocking request to a third-party host on every page. */ --kla-font: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --kla-font-mono: 'IBM Plex Mono', 'Fira Code', Consolas, monospace; /* Scale keeps the 15px body already in production on the home page — * changing base size would reflow every existing layout. */ --kla-text-xs: 0.75rem; /* 12px — metadata, never body copy */ --kla-text-sm: 0.8125rem; /* 13px */ --kla-text-base: 0.9375rem; /* 15px — body */ --kla-text-md: 1.0625rem; /* 17px */ --kla-text-lg: 1.25rem; /* 20px — h4 */ --kla-text-xl: 1.5rem; /* 24px — h3 */ --kla-text-2xl: 1.75rem; /* 28px — h2 */ --kla-text-3xl: 2.125rem; /* 34px — h1 */ --kla-text-4xl: 2.625rem; /* 42px — display */ --kla-leading-tight: 1.2; --kla-leading-snug: 1.35; --kla-leading-normal: 1.55; --kla-leading-relaxed: 1.7; /* long-form lesson copy */ --kla-weight-light: 300; --kla-weight-regular: 400; --kla-weight-medium: 500; --kla-weight-semibold: 600; /* Arabic renders optically smaller than Latin at the same px size and its * ascenders/descenders need more room. Applied via [lang="ar"] in rtl.css. */ --kla-ar-size-adjust: 1.05; --kla-ar-leading-adjust: 1.75; /* ── SPACING — 4px base ─────────────────────────────────────────────*/ --kla-space-1: 0.25rem; /* 4px */ --kla-space-2: 0.5rem; /* 8px */ --kla-space-3: 0.75rem; /* 12px */ --kla-space-4: 1rem; /* 16px */ --kla-space-5: 1.5rem; /* 24px */ --kla-space-6: 2rem; /* 32px */ --kla-space-7: 3rem; /* 48px */ --kla-space-8: 4rem; /* 64px */ /* ── RADIUS ───────────────────────────────────────────────────────── * The Phase 2 brief proposed a single 8px radius. The live site uses * 10/16/24px, and a single 8px would visibly re-shape every existing card * and button. Kept the live scale; --kla-radius is the default one to * reach for. Flagged as a deviation from the brief's D4. */ --kla-radius-sm: 10px; --kla-radius: 16px; /* default: cards, buttons, badges */ --kla-radius-lg: 24px; --kla-radius-pill: 999px; /* ── ELEVATION — two levels, deliberately ───────────────────────────*/ --kla-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06); --kla-shadow: 0 4px 16px rgba(31, 41, 55, 0.08); /* ── MOTION ─────────────────────────────────────────────────────────*/ --kla-ease: cubic-bezier(0.4, 0, 0.2, 1); --kla-duration: 160ms; /* ── FOCUS ────────────────────────────────────────────────────────── * A visible focus indicator is not optional (WCAG 2.2 2.4.7, and 2.4.11 * Focus Not Obscured is new in 2.2). Primary green is 4.81:1 on white and * 4.60:1 on the page background, so one ring colour works on both. */ --kla-focus-ring: var(--kla-primary); --kla-focus-width: 3px; --kla-focus-offset: 2px; /* ── TARGET SIZE ──────────────────────────────────────────────────── * WCAG 2.2 2.5.8 (AA) sets a 24x24 minimum. 44px is the stricter, more * usable figure and the one the brief asks for; it is what components use. */ --kla-tap-min: 44px; /* ── LAYOUT ─────────────────────────────────────────────────────────*/ --kla-container: 1200px; --kla-container-text: 68ch; /* readable measure for lesson prose */ /* ── BREAKPOINTS (reference only) ─────────────────────────────────── * Media queries cannot read custom properties, so these cannot be * consumed — they are recorded here so one file remains the source of * truth. Mobile-first: write base styles, then add min-width queries. * * base <= 767px phone * tablet >= 768px * desktop >= 1024px * wide >= 1440px */ --kla-bp-tablet: 768px; --kla-bp-desktop: 1024px; --kla-bp-wide: 1440px; } /* Honour the OS "reduce motion" setting globally for the kla layer. */ @media (prefers-reduced-motion: reduce) { :root { --kla-duration: 0ms; } }