/* ========================================================================== Yusra - design tokens (teal). Single source of truth for colour, type, space, radius, shadow and motion. Nothing here selects a component; if a rule has a class in it, it belongs in yusra-ds.css instead. The v1 terracotta/editorial system was replaced wholesale. Where a v1 name is still referenced by a component it is aliased at the bottom rather than left dangling, so no component silently loses its colour. 1 colour 2 typography 3 space + layout 4 radius 5 shadow 6 motion ========================================================================== */ /* ========================================================================== 1 colour Teal dominates. Apricot is an accent only - highlights, emergency, and the occasional CTA emphasis. Contrast figures are measured against the surface each token is actually used on, not against white. Rebranded from purple: the old primary sat within a few points of another template on the same shelf, and two clinics that read as one brand is a worse problem than a colour cliche. ========================================================================== */ :root { /* --- brand: teal ------------------------------------------------------ */ --teal-900: #06322F; /* 13.9:1 - hero ground, footer */ --primary: #0D6E6E; /* 6.1:1 on white - buttons, headings */ --primary-hover: #0A5A5A; --primary-active: #084B4B; --teal: #117A77; /* 5.2:1 on white - secondary, hover */ --teal-soft: #E3F1F0; /* pale - section bands, soft cards */ --teal-tint: #F2F9F8; /* very light - page bands */ --primary-rgb: 13, 110, 110; /* --- ground ------------------------------------------------------------ */ --background: #FBFAF8; /* warm ivory - the default page */ --surface: #FFFFFF; /* cards */ --surface-secondary: var(--teal-tint); --surface-soft: var(--teal-soft); --surface-tertiary: #DCE9E8; /* tracks, wells */ --surface-inverse: var(--teal-900); --surface-inverse-2: #0A4744; /* --- accent: apricot, used sparingly ----------------------------------- */ --accent: #F59A5B; /* 2.2:1 - decorative only, never text */ --accent-strong: #B4551A; /* 4.9:1 on white - apricot TEXT only */ --emergency: #CE3A24; /* 4.9:1 - emergency actions */ --emergency-hover: #B22F1C; --emergency-text: #B3301F; /* 6.3:1 on white - emergency as text */ --accent-soft: #FDF1E7; /* --- text -------------------------------------------------------------- */ --text-primary: #1B2A29; /* 14.9:1 on white */ --text-secondary: #635C68; /* 6.2:1 on white - darkened from #716A75, which was 5.0 on white but only 4.3 on the lavender bands it sits on */ --text-tertiary: #5A6867; /* 5.8:1 - meta, captions */ --text-inverse: #FFFFFF; --text-inverse-muted:#B9D6D3; /* 9.1:1 on --teal-900 */ --text-on-primary: #FFFFFF; /* 6.1:1 on --primary */ /* --- line -------------------------------------------------------------- */ --border: #DCE9E8; --border-strong: #C6DAD8; --border-inverse: #17544F; /* --- status ------------------------------------------------------------ */ /* Always paired with an icon and a text label, never colour alone. */ --success: #2F6B4F; /* 5.6:1 */ --success-tint: #E4F0EA; --warning: #8A5A0E; /* 5.6:1 */ --warning-tint: #FBF0DC; --error: #A32A2A; /* 6.4:1 */ --error-tint: #F9E6E4; --info: #1F5F6E; /* 6.3:1 */ --info-tint: var(--teal-soft); /* --- focus ------------------------------------------------------------- */ /* Magenta. A focus ring must never be mistakable for the brand, and the brand is now the teal this token used to be - so it moves. Magenta is the one hue nothing else in the system uses. 6.1:1 on white. */ --focus: #B3247B; --focus-ring: 0 0 0 3px var(--background), 0 0 0 5px var(--focus); } /* ========================================================================== 2 typography Zain carries the display role, Cairo the body and UI. Both cover Latin *and* Arabic, which is the point: this is an Arabic-first template, and a Latin-only face would swap typeface the moment the language changed, shifting every line length with it. ========================================================================== */ :root { --font-display: "Zain", system-ui, -apple-system, Segoe UI, sans-serif; --font-body: "Cairo", system-ui, -apple-system, Helvetica, Arial, sans-serif; /* --- fluid scale ------------------------------------------------------- Mobile-first: every clamp() starts at its 375px value. Headings are larger and tighter than v1 to match the reference's confidence. */ --fs-display: clamp(2.5rem, 1.45rem + 4.48vw, 5.0rem); /* 40 -> 80 */ --fs-h1: clamp(2.125rem, 1.49rem + 2.70vw, 3.625rem);/* 34 -> 58 */ --fs-h2: clamp(1.75rem, 1.30rem + 1.92vw, 2.8125rem);/* 28 -> 45 */ --fs-h3: clamp(1.3125rem, 1.16rem + 0.64vw, 1.6875rem); --fs-h4: clamp(1.125rem, 1.07rem + 0.22vw, 1.25rem); --fs-stat: clamp(2.75rem, 1.70rem + 4.48vw, 5.25rem); /* 44 -> 84 */ --fs-lead: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); --fs-body: 1rem; --fs-ui: 0.9375rem; --fs-sm: 0.875rem; --fs-caption: 0.8125rem; --lh-display: 1.06; --lh-heading: 1.14; --lh-h3: 1.3; --lh-lead: 1.65; --lh-body: 1.7; --lh-ui: 1.45; --ls-display: -0.028em; --ls-heading: -0.022em; --ls-caption: 0.02em; --ls-eyebrow: 0.08em; --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 700; --fw-display-heavy: 800; } /* Arabic needs no font swap here - both families cover it. What it does need is its own vertical metrics: Arabic sits taller in the line and takes no letter-spacing, so tracking tuned for Latin caps comes off. */ :root[lang="ar"] { --lh-display: 1.35; --lh-heading: 1.4; --ls-display: 0; --ls-heading: 0; --ls-eyebrow: 0; } /* ========================================================================== 3 space + layout ========================================================================== */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* The reference is generous; sections breathe more than v1 did. */ --section-y: clamp(4rem, 2.6rem + 5.6vw, 8rem); --section-y-tight: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem); --container: 1290px; --container-wide: 1440px; --container-text: 68ch; --gutter: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem); --header-h: 80px; --tabbar-h: 64px; --touch-min: 44px; } /* ========================================================================== 4 radius Softer and larger than v1, per the reference: pills for controls, 18-22px for cards, 28-36px for large containers and imagery. ========================================================================== */ :root { --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-hero: 40px; --radius-pill: 999px; } /* ========================================================================== 5 shadow Depth comes from surface contrast first. Shadows stay soft and teal- tinted - a neutral black shadow on a lavender ground reads as grey dirt. ========================================================================== */ :root { --shadow-xs: 0 1px 2px rgba(36, 29, 41, 0.04); --shadow-sm: 0 2px 10px rgba(46, 21, 71, 0.05); --shadow-md: 0 10px 30px rgba(46, 21, 71, 0.07); --shadow-lg: 0 24px 60px rgba(46, 21, 71, 0.12); --shadow-fab: 0 8px 24px rgba(239, 102, 55, 0.38); --shadow-sheet: 0 -8px 32px rgba(46, 21, 71, 0.14); } /* ========================================================================== 6 motion ========================================================================== */ :root { --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 380ms; --dur-reveal: 620ms; --dur-marquee: 42s; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.44, 0.09, 0.24, 0.99); --ease-entry: cubic-bezier(0.16, 1, 0.30, 1); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-reveal: 0.01ms; } } /* ========================================================================== v1 aliases Components carried over from the terracotta build still reference these names. Pointing them at the new palette keeps those components correct without a rename sweep; they are removed as each component is rewritten. ========================================================================== */ :root { --primary-bright: var(--teal); --primary-on-tint: var(--primary); --primary-tint: var(--teal-soft); --accent-blush: var(--teal-soft); --accent-lavender: var(--teal-soft); --accent-sand: var(--accent-soft); --warning-on-tint: var(--warning); }