/* ========================================================================== SDP — Design Tokens Single source of truth for the Salikah Diapers Point brand kit. Every colour, radius, shadow and type step in the theme resolves here. ========================================================================== */ :root { /* --- Brand palette (from the SDP brand kit) ------------------------- */ --sdp-purple: #6D60E7; --sdp-pink: #FF7AAE; --sdp-amber: #FFB84D; --sdp-teal: #22C1A1; --sdp-sky: #A8D5E2; --sdp-mist: #F6F8FB; --sdp-cream: #FFF4E6; /* --- Tints & shades, derived so components never hard-code hex ------ */ --sdp-purple-050: #F0EEFD; --sdp-purple-100: #E2DEFB; --sdp-purple-200: #C7C0F6; --sdp-purple-600: #5B4EDA; --sdp-purple-700: #4A3EBE; --sdp-pink-050: #FFEFF5; --sdp-pink-100: #FFDCE8; --sdp-pink-600: #F4568F; --sdp-amber-050: #FFF6E7; --sdp-amber-100: #FFEACB; --sdp-amber-600: #F0A230; --sdp-teal-050: #E6F8F4; --sdp-teal-100: #C9F0E7; --sdp-teal-600: #16A98B; --sdp-sky-050: #EEF7FA; --sdp-sky-100: #DBEDF3; /* --- Ink ------------------------------------------------------------ */ --sdp-ink: #3B3072; /* headings — the logo indigo */ --sdp-ink-soft: #6E6789; /* body copy */ --sdp-ink-faint: #9A94AD; /* meta, captions, placeholders */ --sdp-white: #FFFFFF; /* --- Semantic surfaces ---------------------------------------------- */ --sdp-bg: var(--sdp-cream); --sdp-surface: #FFFBF4; /* cards on the cream ground */ --sdp-surface-alt: var(--sdp-mist); --sdp-line: rgba(109, 96, 231, .14); --sdp-success: var(--sdp-teal); --sdp-notice: var(--sdp-amber); --sdp-danger: #E8556B; --sdp-whatsapp: #25D366; /* --- Typography ------------------------------------------------------ */ --sdp-font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --sdp-font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --sdp-font-script: "Dancing Script", "Segoe Script", cursive; /* Fluid type scale — clamp(min, preferred, max) */ --sdp-text-xs: 0.75rem; --sdp-text-sm: 0.8125rem; --sdp-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); --sdp-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --sdp-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --sdp-text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --sdp-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --sdp-text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); --sdp-leading-tight: 1.15; --sdp-leading-snug: 1.35; --sdp-leading-body: 1.7; /* --- Spacing (4px base) ---------------------------------------------- */ --sdp-1: 0.25rem; --sdp-2: 0.5rem; --sdp-3: 0.75rem; --sdp-4: 1rem; --sdp-5: 1.25rem; --sdp-6: 1.5rem; --sdp-8: 2rem; --sdp-10: 2.5rem; --sdp-12: 3rem; --sdp-16: 4rem; --sdp-20: 5rem; --sdp-24: 6rem; --sdp-section-y: clamp(2.5rem, 1.5rem + 4vw, 5rem); --sdp-gutter: clamp(1rem, 0.5rem + 2vw, 2rem); --sdp-container: 1240px; /* --- Radii — claymorphism lives on very soft corners ------------------ */ --sdp-r-sm: 12px; --sdp-r-md: 18px; --sdp-r-lg: 26px; --sdp-r-xl: 34px; --sdp-r-2xl: 44px; --sdp-r-pill: 999px; /* --- Clay shadow recipes --------------------------------------------- A clay surface = soft coloured drop shadow (weight) + white bounce light (lift) + inset highlight top-left (the "squish") + inset shade bottom-right (the "roll") --------------------------------------------------------------------- */ --sdp-clay-tint: 109, 96, 231; /* rgb of --sdp-purple, for shadows */ --sdp-clay-sm: 4px 6px 12px rgba(var(--sdp-clay-tint), .13), -3px -3px 9px rgba(255, 255, 255, .85), inset 2px 2px 5px rgba(255, 255, 255, .70), inset -2px -3px 6px rgba(var(--sdp-clay-tint), .10); --sdp-clay-md: 8px 12px 24px rgba(var(--sdp-clay-tint), .16), -6px -6px 16px rgba(255, 255, 255, .92), inset 3px 3px 8px rgba(255, 255, 255, .80), inset -4px -6px 12px rgba(var(--sdp-clay-tint), .12); --sdp-clay-lg: 14px 20px 40px rgba(var(--sdp-clay-tint), .18), -10px -10px 26px rgba(255, 255, 255, .95), inset 5px 5px 14px rgba(255, 255, 255, .85), inset -7px -10px 20px rgba(var(--sdp-clay-tint), .14); /* Pressed / active state — shadows invert inward */ --sdp-clay-pressed: 2px 3px 6px rgba(var(--sdp-clay-tint), .12), inset 4px 6px 12px rgba(var(--sdp-clay-tint), .18), inset -3px -3px 8px rgba(255, 255, 255, .70); /* Clay on a *coloured* body (buttons, filled chips) — highlight sits inside */ --sdp-clay-fill: 6px 10px 20px rgba(var(--sdp-clay-tint), .30), inset 3px 4px 8px rgba(255, 255, 255, .38), inset -4px -6px 12px rgba(0, 0, 0, .13); /* Lifted: the shadow travels further and softens, as if the button has come off the page rather than just grown a darker edge. */ --sdp-clay-fill-hover: 10px 16px 30px rgba(var(--sdp-clay-tint), .38), inset 3px 4px 10px rgba(255, 255, 255, .42), inset -5px -8px 16px rgba(0, 0, 0, .15); /* Pressed: the highlight inverts — light now catches the bottom edge, which is what makes a thumbprint in clay read as pushed in. */ --sdp-clay-fill-pressed: 3px 4px 9px rgba(var(--sdp-clay-tint), .26), inset 4px 6px 12px rgba(0, 0, 0, .18), inset -2px -2px 6px rgba(255, 255, 255, .22); /* Same idea for pale clay surfaces (ghost buttons, icon buttons). */ --sdp-clay-hover: 16px 22px 44px rgba(var(--sdp-clay-tint), .22), -10px -10px 26px rgba(255, 255, 255, .95), inset 4px 4px 10px rgba(255, 255, 255, .85), inset -5px -8px 16px rgba(var(--sdp-clay-tint), .13); /* --- Motion ----------------------------------------------------------- */ --sdp-ease-squish: cubic-bezier(.34, 1.56, .64, 1); /* overshoot = soft clay */ --sdp-ease-out: cubic-bezier(.22, .61, .36, 1); --sdp-dur-fast: .16s; --sdp-dur: .28s; --sdp-dur-slow: .55s; --sdp-z-header: 100; --sdp-z-drawer: 200; --sdp-z-overlay: 190; } /* Colour-scoped clay: drop this class on a section and every clay child inside it casts shadows in that hue instead of purple. */ .sdp-tint-pink { --sdp-clay-tint: 255, 122, 174; } .sdp-tint-teal { --sdp-clay-tint: 34, 193, 161; } .sdp-tint-amber { --sdp-clay-tint: 255, 184, 77; } .sdp-tint-sky { --sdp-clay-tint: 168, 213, 226; } .sdp-tint-purple { --sdp-clay-tint: 109, 96, 231; } @media (prefers-reduced-motion: reduce) { :root { --sdp-dur-fast: .01ms; --sdp-dur: .01ms; --sdp-dur-slow: .01ms; } }