/* ============================================================================ Sukoon — Design Tokens (CSS custom properties) Source of truth: docs/06-DESIGN-SYSTEM.md (front-matter token set) Loaded first on every page; consumed by components.css, page CSS and inline styles. tailwind.config.js mirrors these so utilities (bg-primary, text-gold…) resolve to the same values. ============================================================================ */ :root { /* ── Brand ───────────────────────────────────────────────────────────── */ --sk-primary: #4B1E6D; /* Deep Purple */ --sk-primary-deep: #371552; --sk-primary-soft: #6E3C92; --sk-primary-50: #F4EEF9; --sk-on-primary: #FFFFFF; --sk-gold: #D4AF37; /* Royal Gold */ --sk-gold-deep: #B8941F; --sk-gold-soft: #E7CE72; /* Gold that is legible as TEXT. --sk-gold-deep is a decorative gold and only reaches 2.69:1 on --sk-cream, which is what the eyebrow sits on — well under the 4.5:1 AA needs. Kept as a separate token so borders, rules and gradients stay the brand gold; only type moves. 5.48:1 on --sk-cream, 5.60:1 on --sk-surface, and still 4.91:1 on --sk-cream-deep. */ --sk-gold-ink: #7a6214; --sk-saffron: #F59E0B; /* Saffron — primary action / energy */ --sk-saffron-deep: #D97706; --sk-saffron-soft: #FCD68A; --sk-on-saffron: #3A2A06; /* ── Surfaces ────────────────────────────────────────────────────────── */ --sk-canvas: #FFFFFF; --sk-surface: #FAFAF7; /* off-white page base */ --sk-cream: #FBF7EF; /* light cream sections */ --sk-cream-deep: #F3EADC; /* ── Text ────────────────────────────────────────────────────────────── */ /* Contrast against --sk-canvas / --sk-cream, WCAG 2.2: ink 14.1:1 · ink-soft 7.2:1 · ink-muted 5.2:1 — all AA for body text. ink-faint is decorative only (placeholders, separators): never body copy. */ --sk-ink: #2D2A32; --sk-ink-soft: #5A5560; --sk-ink-muted: #6E6875; /* was #8A8590 — 3.60:1, failed 1.4.3 */ --sk-ink-faint: #8A8590; /* was #B8B4BE — 2.04:1, unreadable */ /* ── Lines / borders ─────────────────────────────────────────────────── */ --sk-hairline: #ECE8F0; --sk-hairline-strong: #D9D3E2; /* ── Semantic ────────────────────────────────────────────────────────── */ /* Semantic colours come in two forms, because one value cannot do both jobs. `-fill` is the saturated brand-ish tone for backgrounds, borders, icons and bars; the plain token is the AA-compliant text tone for the same meaning on a light surface. Use the plain one for any word a user has to read. */ --sk-success: #1E7A44; /* text 4.9:1 — was #2E9E5B (3.41:1) */ --sk-success-fill: #2E9E5B; --sk-warning: #8A6206; /* text 5.6:1 — was #E0A100 (2.27:1) */ --sk-warning-fill: #E0A100; --sk-danger: #D14343; /* text 4.6:1 — already AA */ --sk-danger-fill: #D14343; --sk-info: #1D64D8; /* text 5.1:1 — was #3B82F6 (3.68:1) */ --sk-info-fill: #3B82F6; --sk-link: #6E3C92; /* Stars carry meaning, so WCAG 1.4.11 applies: needs 3:1, not 2.15:1. */ --sk-rating-star: #D97706; /* was #F59E0B */ /* ── Glass ───────────────────────────────────────────────────────────── */ --sk-glass-fill: rgba(255, 255, 255, 0.65); --sk-glass-fill-dark: rgba(75, 30, 109, 0.55); --sk-glass-border: rgba(255, 255, 255, 0.40); /* ── Gradients ───────────────────────────────────────────────────────── */ /* The saffron stop sits at 100%, not 130%. Past 100% the warm end is clipped outside the painted box, so every surface using this — the About and legal heroes, the auth panel, the dashboard and astrologer headers — rendered as purple-into-purple and the third stop did no work at all. */ --sk-grad-hero: linear-gradient(135deg, var(--sk-primary) 0%, var(--sk-primary-soft) 60%, var(--sk-saffron-deep) 100%); --sk-grad-gold: linear-gradient(90deg, transparent, var(--sk-gold), transparent); /* ── Cosmic hero (.sk-chero) ────────────────────────────────────────────── The homepage hero is a night sky, so it cannot be built from the daylight brand ramp — but it was previously six literal hex/rgba values repeated inline across index.php with no name anywhere. Declared here so the palette is nameable, auditable and reusable, and so the census in the design audit stops counting them as off-system one-offs. Channel triples (not hex) where the value is used at several alphas. */ --sk-cosmic-ground: #050816; /* near-black navy the whole hero sits on */ --sk-cosmic-violet: 106, 61, 232; --sk-cosmic-fuchsia: 217, 70, 239; --sk-cosmic-deepblue: 30, 58, 138; /* Lighter than --sk-gold; --sk-gold is tuned for cream, this for navy. Held as channels because the hero uses it at seven different alphas. */ --sk-cosmic-gold-rgb: 247, 215, 116; --sk-cosmic-gold: rgb(var(--sk-cosmic-gold-rgb)); --sk-cosmic-cyan: #38BDF8; --sk-grad-cosmic: radial-gradient(ellipse 70% 55% at 18% 8%, rgba(var(--sk-cosmic-violet), .20), transparent 60%), radial-gradient(ellipse 65% 50% at 88% 78%, rgba(var(--sk-cosmic-fuchsia), .16), transparent 60%), radial-gradient(ellipse 90% 70% at 50% 45%, rgba(var(--sk-cosmic-deepblue), .14), transparent 72%), var(--sk-cosmic-ground); /* ── Typography ──────────────────────────────────────────────────────── */ --sk-font-en: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --sk-font-hi: "Noto Sans Devanagari", "Poppins", ui-sans-serif, system-ui, sans-serif; /* Display face. Declared rather than inlined: Cormorant Garamond was used in four places on the homepage as a raw font stack and appeared in no token, which is what made it invisible to the type system. Scoped to hero display type for now — promoting it to every heading site-wide is a separate, visible call, and --sk-font-en still owns headings until that is made. */ --sk-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* Type scale — fluid via clamp(min, preferred, max). Scales smoothly 320px → 2560px with no fixed jumps. Min = mobile, max = desktop value. Weight pairing (BMW-discipline applied to Poppins): display 700, body 400. */ --sk-fs-hero: clamp(36px, 6.2vw, 64px); --sk-lh-hero: 1.08; --sk-fs-display: clamp(30px, 4.6vw, 48px); --sk-lh-display: 1.12; --sk-fs-h1: clamp(27px, 3.4vw, 36px); --sk-lh-h1: 1.18; --sk-fs-h2: clamp(23px, 2.6vw, 28px); --sk-lh-h2: 1.22; --sk-fs-h3: clamp(20px, 1.9vw, 22px); --sk-lh-h3: 1.30; --sk-fs-h4: clamp(17px, 1.4vw, 18px); --sk-lh-h4: 1.35; --sk-fs-subtitle: clamp(16px, 1.4vw, 18px); --sk-lh-subtitle:1.55; --sk-fs-body-lg: clamp(16px, 1.2vw, 17px); --sk-lh-body-lg: 1.60; --sk-fs-body: 15px; --sk-lh-body: 1.60; --sk-fs-sm: 13px; --sk-lh-sm: 1.50; --sk-fs-caption: 12px; --sk-lh-caption: 1.40; --sk-fs-price: clamp(20px, 1.8vw, 22px); /* Display/body weight pair — use these so the contrast stays consistent. */ --sk-fw-display: 700; --sk-fw-heading: 600; --sk-fw-medium: 500; --sk-fw-body: 400; /* Tracking for machined uppercase labels (BMW signature, brand-adapted). */ --sk-tracking-label: 1.2px; /* ── Radius ──────────────────────────────────────────────────────────── */ --sk-r-xs: 6px; --sk-r-sm: 10px; --sk-r-md: 14px; --sk-r-lg: 18px; /* default card radius */ --sk-r-xl: 24px; --sk-r-xxl: 32px; --sk-r-full: 9999px; /* ── Spacing ─────────────────────────────────────────────────────────── */ --sk-sp-xxs: 4px; --sk-sp-xs: 8px; --sk-sp-sm: 12px; --sk-sp-md: 16px; --sk-sp-lg: 20px; --sk-sp-xl: 24px; --sk-sp-xxl: 32px; --sk-sp-xxxl: 48px; --sk-sp-section: 80px; --sk-sp-section-lg: 120px; /* ── Shadow / elevation ──────────────────────────────────────────────── */ /* Layered, low-opacity shadows (Stripe/Linear feel): a tight contact shadow plus a soft ambient one. Reads premium without the "heavy drop-shadow" look. */ --sk-shadow-xs: 0 1px 2px rgba(45, 42, 50, 0.05); --sk-shadow-sm: 0 1px 2px rgba(45, 42, 50, 0.05), 0 2px 6px rgba(45, 42, 50, 0.05); --sk-shadow-md: 0 2px 4px rgba(45, 42, 50, 0.04), 0 8px 20px rgba(45, 42, 50, 0.07); --sk-shadow-lg: 0 4px 10px rgba(45, 42, 50, 0.05), 0 18px 40px rgba(75, 30, 109, 0.12); --sk-shadow-xl: 0 8px 20px rgba(45, 42, 50, 0.06), 0 28px 60px rgba(75, 30, 109, 0.16); --sk-shadow-gold: 0 6px 24px rgba(212, 175, 55, 0.26); --sk-shadow-purple: 0 10px 30px rgba(75, 30, 109, 0.28); /* ── Focus ring (WCAG AA visible focus) ──────────────────────────────── */ --sk-focus-ring: 0 0 0 3px var(--sk-primary-50), 0 0 0 4px var(--sk-primary-soft); --sk-focus-outline: 2px solid var(--sk-primary); /* ── Motion ──────────────────────────────────────────────────────────── */ --sk-motion-fast: 150ms ease; --sk-motion-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); --sk-motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ──────────────────────────────────────────────────────────── */ --sk-container: 1200px; --sk-navbar-h: 72px; --sk-bottomnav-h: 56px; /* mobile sticky bottom nav (≤768px); drives content clearance */ --sk-bk-cta-h: 64px; /* booking wizard's sticky total+action bar (≤880px); stacks above the bottom nav */ } /* Phones (<768px, same boundary as the sticky bottom nav): a shorter bar. 56px around the 40px brand logo leaves 8px of breathing room top and bottom, against 16px on desktop — the vertical space is derived from the centring, so only the height is set here. Overriding the token rather than .sk-navbar keeps the sticky offsets that read calc(var(--sk-navbar-h) + …) in step. Bound moved off 768 with the rest of the phone shell — see the note above .sk-bottomnav in components.css. */ @media (max-width: 767.98px) { :root { --sk-navbar-h: 56px; } } /* Respect reduced-motion globally (design system requirement). */ @media (prefers-reduced-motion: reduce) { :root { --sk-motion-fast: 0ms; --sk-motion-base: 0ms; --sk-motion-slow: 0ms; } }