/* ========================================================================== tokens.css — Perdana Dental design tokens -------------------------------------------------------------------------- Every colour, size, space and shadow value in this project is defined here and NOWHERE ELSE. If you find a raw hex code or a magic number like "23px" anywhere else in the CSS, that is a bug. Why this matters: when a client says "make the blue darker", you change one line here instead of hunting through twelve files. It is also how you keep accessibility guarantees — every contrast ratio below has been calculated, not guessed. ========================================================================== */ :root { /* ====================================================================== 1. COLOUR Clinical blue and white. Contrast ratios are measured against WCAG 2.1. AA requires 4.5:1 for body text, 3:1 for large text and for the visible boundary of interactive components. ====================================================================== */ /* --- Neutrals ------------------------------------------------------- */ --c-surface: #FFFFFF; /* page background */ --c-surface-alt: #F2F7FA; /* alternating section background */ --c-ink: #12212E; /* body + headings — 16.37:1 on white ✅ AAA */ --c-ink-muted: #4A6070; /* secondary text — 6.57:1 on white ✅ AA */ /* Two border tokens, deliberately. --c-border is a decorative hairline (1.35:1) and is fine for separating content visually. It is NOT enough for the edge of an input or button. WCAG 1.4.11 requires 3:1 for the boundary of a control a user must find, so interactive elements use --c-border-strong (3.64:1). Most sites get this wrong and ship inputs nobody with low vision can locate. */ --c-border: #D3E0E8; --c-border-strong: #6E8A9B; /* 3.64:1 on white ✅ AA for UI components */ /* --- Brand ---------------------------------------------------------- */ --c-brand: #0A6C9E; /* 5.75:1 on white ✅ AA — safe for links */ --c-brand-dark: #075A7B; /* 7.62:1 on white ✅ AAA — hover / active */ --c-brand-tint: #E4F0F7; /* pale wash for callout panels */ --c-on-brand: #FFFFFF; /* 5.75:1 on --c-brand ✅ AA */ /* --- WhatsApp ------------------------------------------------------ Important accessibility lesson: the official WhatsApp green (#25D366) with white text is 1.98:1. That FAILS AA badly, and it is on thousands of Malaysian websites. We use WhatsApp's darker brand green instead, which reaches 5.29:1 with white text and still reads unmistakably as WhatsApp. Brand guidelines never override accessibility law. --------------------------------------------------------------------- */ --c-wa: #0F7A5F; /* 5.29:1 with white text ✅ AA */ --c-wa-dark: #0B5E49; /* hover state */ --c-wa-raw: #25D366; /* icon fill only, never a text background */ /* --- Feedback ------------------------------------------------------- */ --c-danger: #A32020; /* 7.54:1 with white ✅ AAA — emergency CTA */ --c-focus: #B34700; /* 5.50:1 on white ✅ AA — see focus ring */ /* ====================================================================== 2. TYPOGRAPHY A deliberate decision worth defending on the portfolio: NO WEBFONT. A single self-hosted webfont family costs roughly 40–120 KB and delays first meaningful paint. Page speed is a confirmed local ranking factor and this clinic's visitors are on Malaysian mobile networks. The system font stack renders instantly, costs zero bytes, and looks native on every device. On a spa site — where the visitor is buying a feeling — a webfont may well be worth its weight. On a clinic site it is not. Knowing when a rule does not apply is the difference between following best practice and understanding it. ====================================================================== */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Fluid type scale using clamp(MIN, PREFERRED, MAX). The middle value mixes a rem base with a vw component, so the size grows with the viewport but never below MIN or above MAX. This replaces four or five media queries with one line, and it never leaves a size stranded between breakpoints. The rem term in the middle value is essential: a preferred value of pure vw would ignore the user's browser font-size setting, which is a WCAG 1.4.4 failure. Keeping a rem component preserves user zoom. */ --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.9375rem; /* 15px */ --text-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); /* 16→17 */ --text-lg: clamp(1.125rem, 1.06rem + 0.31vw, 1.25rem); /* 18→20 */ --text-xl: clamp(1.375rem, 1.26rem + 0.55vw, 1.625rem); /* 22→26 */ --text-2xl: clamp(1.625rem, 1.42rem + 1.02vw, 2.125rem); /* 26→34 */ --text-3xl: clamp(2rem, 1.65rem + 1.75vw, 2.875rem); /* 32→46 */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line height shrinks as type grows — large text needs proportionally less leading than body copy or it looks loose and disconnected. */ --leading-tight: 1.15; /* h1, h2 */ --leading-snug: 1.3; /* h3, h4, short strings */ --leading-normal: 1.6; /* body copy */ --leading-relaxed: 1.75; /* long-form explainers */ --tracking-tight: -0.02em; /* large headings only */ --tracking-wide: 0.04em; /* small caps, eyebrow labels */ /* Maximum line length. 65 characters is the readability sweet spot; beyond ~75 the eye loses its place returning to the next line. */ --measure: 65ch; /* ====================================================================== 3. SPACING A 4px-based scale. Using a scale rather than arbitrary values is what makes a hand-coded site look designed instead of assembled. ====================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ /* Fluid vertical rhythm between major page sections. */ --space-section: clamp(var(--space-8), 6vw, var(--space-10)); /* ====================================================================== 4. LAYOUT ====================================================================== */ --container-max: 72rem; /* 1152px — comfortable for a 12-col grid */ --container-pad: clamp(var(--space-4), 4vw, var(--space-6)); /* ====================================================================== 5. BORDERS, RADII, SHADOWS Restrained on purpose. A clinic should read as precise, not playful. ====================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(18, 33, 46, 0.06); --shadow-md: 0 2px 8px rgba(18, 33, 46, 0.08); --shadow-lg: 0 8px 24px rgba(18, 33, 46, 0.10); /* ====================================================================== 6. MOTION Short and unobtrusive. Anything over ~250ms feels sluggish on a control the user is waiting on. ====================================================================== */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --duration-fast: 120ms; --duration-normal: 200ms; /* ====================================================================== 7. FOCUS RING Defined as a token because it must never be removed, only restyled. Deleting the focus outline is the single most common accessibility failure on hand-coded sites and it makes a site unusable by keyboard. Orange rather than the brand blue: the ring must be visible against blue buttons as well as white backgrounds, so a contrasting hue is safer than a tint of the brand colour. ====================================================================== */ --focus-width: 3px; --focus-offset: 2px; --focus-color: var(--c-focus); }