/* ============================================================ Bailleul Arabia — Design Tokens Three-tier architecture: primitives -> semantic -> component. Components read ONLY from tier 2. Never reference a primitive directly in a component; if there is no semantic name for what you need, the semantic layer is incomplete. Anchored to the logo: --bl-slate-600 and --bl-azure-500 are the exact sampled brand values. Everything else is derived in OKLCH. ============================================================ */ :root { /* ---------- TIER 1 — PRIMITIVES ---------- */ /* Slate — brand neutral. Structure, text, surfaces. */ --bl-slate-50: #F6F7F9; --bl-slate-100: #E9EBEE; --bl-slate-200: #D7D9DD; --bl-slate-300: #BBC0C6; --bl-slate-400: #9CA2AC; --bl-slate-500: #828995; --bl-slate-600: #646B76; /* LOGO WORDMARK */ --bl-slate-700: #4D535B; --bl-slate-800: #3A3D43; --bl-slate-900: #27292C; --bl-slate-950: #18191B; /* Azure — accent. Interaction and emphasis. Used sparingly. */ --bl-azure-50: #EEF9FF; --bl-azure-100: #DFEEF6; --bl-azure-200: #C6DDEA; --bl-azure-300: #9EC6DB; --bl-azure-400: #6BABCA; --bl-azure-500: #4293B7; /* LOGO ACCENT DOT — 3.4:1, large text / non-text only */ --bl-azure-600: #1E7497; --bl-azure-700: #195A75; --bl-azure-800: #1B4254; --bl-azure-900: #182C36; --bl-azure-950: #101B20; /* Neutral — near-achromatic. Surfaces that must not take the cool cast. */ --bl-neutral-50: #F6F7F7; --bl-neutral-100: #EBEBEC; --bl-neutral-200: #D8D9DA; --bl-neutral-300: #BEBFC1; --bl-neutral-400: #A0A2A5; --bl-neutral-500: #86898C; --bl-neutral-600: #696B6E; --bl-neutral-700: #515355; --bl-neutral-800: #3C3D3F; --bl-neutral-900: #28292A; --bl-neutral-950: #19191A; /* Status — low chroma, held inside the clinical register. */ --bl-success-50: #F1F9F3; --bl-success-100: #E3EFE5; --bl-success-500: #5E986E; --bl-success-600: #417951; --bl-success-700: #325E3F; --bl-success-900: #1E2D22; --bl-warning-50: #FDF6EB; --bl-warning-100: #F4E9DB; --bl-warning-500: #AF7E2F; --bl-warning-600: #8F6000; --bl-warning-700: #6F4A05; --bl-warning-900: #332613; --bl-danger-50: #FFF2F0; --bl-danger-100: #FCE5E2; --bl-danger-500: #CA675E; --bl-danger-600: #A74941; --bl-danger-700: #813933; --bl-danger-900: #3B201D; --bl-white: #FFFFFF; /* ---------- TIER 2 — SEMANTIC ---------- */ /* Content */ --bl-content-primary: var(--bl-slate-900); /* 14.6:1 */ --bl-content-secondary: var(--bl-slate-600); /* 5.4:1 */ --bl-content-tertiary: var(--bl-slate-500); /* 3.5:1 — large text only */ --bl-content-inverse: var(--bl-white); --bl-content-link: var(--bl-azure-600); /* 5.2:1 — NOT azure-500 */ --bl-content-link-hover: var(--bl-azure-700); /* Surface */ --bl-surface-page: var(--bl-white); --bl-surface-raised: var(--bl-slate-50); --bl-surface-sunken: var(--bl-slate-100); --bl-surface-inverse: var(--bl-slate-900); --bl-surface-accent-subtle: var(--bl-azure-50); /* Border */ --bl-border-subtle: var(--bl-slate-200); --bl-border-default: var(--bl-slate-300); --bl-border-strong: var(--bl-slate-600); --bl-border-focus: var(--bl-azure-600); /* Interactive */ --bl-interactive-bg: var(--bl-azure-600); /* white on this: 5.25:1 */ --bl-interactive-bg-hover: var(--bl-azure-700); --bl-interactive-bg-active: var(--bl-azure-800); --bl-interactive-bg-subtle: var(--bl-azure-50); --bl-interactive-fg: var(--bl-white); --bl-interactive-disabled-bg: var(--bl-slate-200); --bl-interactive-disabled-fg: var(--bl-slate-400); /* Feedback */ --bl-feedback-success-bg: var(--bl-success-50); --bl-feedback-success-fg: var(--bl-success-700); --bl-feedback-success-br: var(--bl-success-600); --bl-feedback-warning-bg: var(--bl-warning-50); --bl-feedback-warning-fg: var(--bl-warning-700); --bl-feedback-warning-br: var(--bl-warning-600); --bl-feedback-danger-bg: var(--bl-danger-50); --bl-feedback-danger-fg: var(--bl-danger-700); --bl-feedback-danger-br: var(--bl-danger-600); /* Commerce — the tokens generic systems omit and builds then hardcode */ --bl-price-current: var(--bl-slate-900); --bl-price-was: var(--bl-slate-500); --bl-price-saving: var(--bl-success-700); /* never red */ --bl-stock-in: var(--bl-success-600); --bl-stock-low: var(--bl-warning-600); --bl-stock-out: var(--bl-slate-500); /* Focus — never removed, never outline:none without a replacement */ --bl-focus-ring-color: var(--bl-azure-600); --bl-focus-ring-width: 2px; --bl-focus-ring-offset: 2px; /* ---------- TYPOGRAPHY ---------- */ /* Two families. Serif for deciding, sans for acting. Serif is NEVER used below 20px, and never in cart, checkout, forms, navigation, prices, or the admin dashboard. */ --bl-font-serif: "Spectral", "Source Serif 4", Georgia, serif; --bl-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --bl-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Arabic has no serif. One family carries the whole system; hierarchy comes from weight, size and colour. */ --bl-font-serif-ar: "IBM Plex Sans Arabic", sans-serif; --bl-font-sans-ar: "IBM Plex Sans Arabic", sans-serif; /* Brand face — oversized words only (≥ 40px). Never body, never UI. No Arabic cut exists, so RTL falls back to the Arabic sans at Bold. */ --bl-font-brand: "Archivo", "IBM Plex Sans", system-ui, sans-serif; /* Role aliases — components reference these, not the families above. */ --bl-font-display: var(--bl-font-serif); --bl-font-body: var(--bl-font-sans); --bl-font-ui: var(--bl-font-sans); --bl-weight-regular: 400; --bl-weight-medium: 500; --bl-weight-semibold: 600; /* Scale — 1.20 minor third. Mobile values in the media query below. */ --bl-text-display-xl: 3.5rem; --bl-leading-display-xl: 1.05; --bl-text-display-lg: 2.75rem; --bl-leading-display-lg: 1.10; --bl-text-display-md: 2.25rem; --bl-leading-display-md: 1.15; --bl-text-heading-lg: 1.75rem; --bl-leading-heading-lg: 1.25; --bl-text-heading-md: 1.5rem; --bl-leading-heading-md: 1.30; --bl-text-heading-sm: 1.25rem; --bl-leading-heading-sm: 1.35; --bl-text-body-lg: 1.125rem; --bl-leading-body-lg: 1.60; --bl-text-body-md: 1rem; --bl-leading-body-md: 1.60; --bl-text-body-sm: 0.875rem; --bl-leading-body-sm: 1.55; --bl-text-label: 0.8125rem; --bl-leading-label: 1.40; --bl-text-eyebrow: 0.75rem; --bl-leading-eyebrow: 1.30; --bl-text-caption: 0.75rem; --bl-leading-caption: 1.45; --bl-tracking-tight: -0.02em; --bl-tracking-snug: -0.01em; --bl-tracking-normal: 0; --bl-tracking-eyebrow: 0.18em; /* from the logo's "DERMATOLOGIE" lockup */ /* Direction-aware multipliers. Overridden in [dir="rtl"] below. */ --bl-font-scale: 1; --bl-leading-scale: 1; /* ---------- PAGE CONTAINER ---------- */ /* The full-width / boxed decision lives here and nowhere else. --bl-page-max: none -> full-bleed (current) --bl-page-max: 1480px -> boxed, centred Nothing else in the codebase should set a page width. */ --bl-page-max: none; --bl-page-gutter: 1.5rem; /* ---------- SPACING ---------- */ --bl-space-0: 0; --bl-space-05: 0.125rem; --bl-space-1: 0.25rem; --bl-space-2: 0.5rem; --bl-space-3: 0.75rem; --bl-space-4: 1rem; --bl-space-5: 1.25rem; --bl-space-6: 1.5rem; --bl-space-8: 2rem; --bl-space-10: 2.5rem; --bl-space-12: 3rem; --bl-space-16: 4rem; --bl-space-20: 5rem; --bl-space-24: 6rem; --bl-space-32: 8rem; /* ---------- RADIUS ---------- */ --bl-radius-none: 0; --bl-radius-sm: 4px; --bl-radius-md: 8px; --bl-radius-lg: 12px; --bl-radius-xl: 20px; --bl-radius-full: 9999px; /* ---------- ELEVATION — tinted with the brand slate, never pure black ---------- */ --bl-shadow-sm: 0 1px 2px rgba(39, 41, 44, 0.05); --bl-shadow-md: 0 2px 8px rgba(39, 41, 44, 0.07); --bl-shadow-lg: 0 8px 24px rgba(39, 41, 44, 0.09); --bl-shadow-xl: 0 16px 48px rgba(39, 41, 44, 0.12); /* ---------- MOTION ---------- */ --bl-duration-instant: 0ms; --bl-duration-fast: 120ms; --bl-duration-base: 200ms; --bl-duration-slow: 320ms; --bl-duration-deliberate: 480ms; --bl-ease-standard: cubic-bezier(0.2, 0, 0, 1); --bl-ease-enter: cubic-bezier(0, 0, 0, 1); --bl-ease-exit: cubic-bezier(0.3, 0, 1, 1); /* ---------- Z-INDEX — named, never arbitrary ---------- */ --bl-z-base: 0; --bl-z-raised: 10; --bl-z-sticky: 100; --bl-z-header: 200; --bl-z-drawer: 300; --bl-z-overlay: 400; --bl-z-modal: 500; --bl-z-toast: 600; --bl-z-tooltip: 700; /* ---------- TIER 3 — COMPONENT ---------- */ /* Reads only from tier 2. Extend per component; never reach past the semantic layer into a primitive. */ --bl-btn-primary-bg: var(--bl-interactive-bg); --bl-btn-primary-fg: var(--bl-interactive-fg); --bl-btn-primary-bg-hover: var(--bl-interactive-bg-hover); --bl-btn-primary-bg-active: var(--bl-interactive-bg-active); --bl-btn-primary-radius: var(--bl-radius-md); --bl-btn-secondary-bg: transparent; --bl-btn-secondary-fg: var(--bl-content-link); --bl-btn-secondary-border: var(--bl-border-default); --bl-btn-secondary-bg-hover: var(--bl-interactive-bg-subtle); --bl-btn-disabled-bg: var(--bl-interactive-disabled-bg); --bl-btn-disabled-fg: var(--bl-interactive-disabled-fg); --bl-card-bg: var(--bl-surface-raised); --bl-card-border: var(--bl-border-subtle); --bl-card-radius: var(--bl-radius-md); --bl-card-shadow: var(--bl-shadow-sm); --bl-input-bg: var(--bl-surface-page); --bl-input-fg: var(--bl-content-primary); --bl-input-placeholder: var(--bl-content-tertiary); --bl-input-border: var(--bl-border-default); --bl-input-border-focus: var(--bl-border-focus); --bl-input-border-error: var(--bl-feedback-danger-br); --bl-input-radius: var(--bl-radius-sm); --bl-badge-radius: var(--bl-radius-sm); /* Badge colours are ADMIN CONFIGURATION per rule R1 — resolved at runtime from the badge type, not declared here. These are fallbacks. */ --bl-badge-default-bg: var(--bl-slate-100); --bl-badge-default-fg: var(--bl-slate-700); } /* Gutter widens on large screens, tightens on phones. The max width is deliberately NOT touched here — it is the one switch. */ @media (min-width: 1600px) { :root { --bl-page-gutter: 2.5rem; } } @media (max-width: 768px) { :root { --bl-page-gutter: 1rem; } } /* ============================================================ RTL — Arabic is a co-equal language, not a mirrored afterthought. Arabic reads smaller and sets tighter at the same nominal size. ============================================================ */ :root[dir="rtl"] { --bl-font-scale: 1.08; /* +8% size */ --bl-leading-scale: 1.15; /* +15% line height */ /* Letter-spacing breaks connected Arabic script. Never applied. */ --bl-tracking-tight: 0; --bl-tracking-snug: 0; --bl-tracking-eyebrow: 0; /* eyebrow distinguishes by weight + colour instead */ --bl-font-display: var(--bl-font-serif-ar); --bl-font-body: var(--bl-font-sans-ar); --bl-font-ui: var(--bl-font-sans-ar); --bl-font-brand: var(--bl-font-sans-ar); } /* ============================================================ Mobile scale. Mobile is the primary target, not a fallback. ============================================================ */ @media (max-width: 768px) { :root { --bl-text-display-xl: 2.5rem; --bl-text-display-lg: 2rem; --bl-text-display-md: 1.75rem; --bl-text-heading-lg: 1.5rem; --bl-text-heading-md: 1.25rem; --bl-text-heading-sm: 1.125rem; } } /* ============================================================ Reduced motion — every duration collapses. No exceptions, including page transitions. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --bl-duration-fast: 0ms; --bl-duration-base: 0ms; --bl-duration-slow: 0ms; --bl-duration-deliberate: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ Base application of the tokens. ============================================================ */ body { font-family: var(--bl-font-body); font-size: calc(var(--bl-text-body-md) * var(--bl-font-scale)); line-height: calc(var(--bl-leading-body-md) * var(--bl-leading-scale)); color: var(--bl-content-primary); background: var(--bl-surface-page); -webkit-font-smoothing: antialiased; } /* Prices, quantities, order numbers, dashboard figures. Proportional figures make a price column jitter between rows. */ .bl-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Display roles. Serif in LTR, the Arabic sans in RTL — handled by the --bl-font-display alias, so markup never branches on direction. */ .bl-display-xl, .bl-display-lg, .bl-display-md, .bl-heading-lg, .bl-heading-md, .bl-heading-sm, .bl-editorial { font-family: var(--bl-font-display); font-weight: var(--bl-weight-semibold); } /* Acting, not deciding: always sans, both directions, no exceptions. */ button, input, select, textarea, label, nav, .bl-price, .bl-breadcrumb, .bl-product-card, .bl-cart, .bl-checkout, .bl-admin { font-family: var(--bl-font-ui); } .bl-eyebrow { font-size: var(--bl-text-eyebrow); line-height: var(--bl-leading-eyebrow); font-weight: var(--bl-weight-semibold); letter-spacing: var(--bl-tracking-eyebrow); text-transform: uppercase; color: var(--bl-content-secondary); } :focus-visible { outline: var(--bl-focus-ring-width) solid var(--bl-focus-ring-color); outline-offset: var(--bl-focus-ring-offset); } /* Minimum touch target (WCAG 2.5.8). Applies to every interactive element unless it opts out. A checkbox or radio is a small square by design; forcing 44px on the control itself makes it visually enormous. The accessible answer is to keep the control small and give the TAP AREA 44px — which is what the surrounding