/* ============================================================ SearchDentist Design Tokens v0.1 — Warm Professional All tokens prefixed sd- to avoid Astra parent-theme collisions. ============================================================ */ /* ---------- Webfont imports ---------- Loaded from Google Fonts CDN. If self-hosting later, drop into /fonts and replace with @font-face blocks. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ============================================================ COLOR PRIMITIVES Raw colour values. Do not reference these directly in components — use the semantic tokens further down. ============================================================ */ /* Surface — warm cream backgrounds */ --sd-cream-50: #FDFBF7; /* lightest — page background-alt */ --sd-cream-100: #FBF8F3; /* page background DEFAULT */ --sd-cream-200: #F5F0E6; /* recessed surfaces */ --sd-cream-300: #EDE7DC; /* dividers, soft borders */ --sd-cream-400: #E8E1D5; /* default border */ /* Sage — primary brand */ --sd-sage-50: #F2F6F4; --sd-sage-100: #E8F0EB; /* verification chip background */ --sd-sage-200: #C9DAD0; --sd-sage-300: #A4BDB0; --sd-sage-400: #84A492; --sd-sage-500: #6B8E7F; /* PRIMARY — wordmark, accents */ --sd-sage-600: #587667; /* hover */ --sd-sage-700: #4A6E61; /* verification chip text */ --sd-sage-800: #354F46; --sd-sage-900: #243831; /* Terracotta — accent / primary CTA */ --sd-terracotta-50: #FBF1ED; --sd-terracotta-100: #F5DDD2; --sd-terracotta-200: #ECB9A4; --sd-terracotta-300: #DD8E70; --sd-terracotta-400: #C66B4D; /* ACCENT — primary CTA */ --sd-terracotta-500: #B85F43; /* hover */ --sd-terracotta-600: #9C4F38; /* active */ --sd-terracotta-700: #7E3F2D; --sd-terracotta-800: #5C2D20; /* Amber — secondary accent (used very sparingly — highlights, "open now" badge) */ --sd-amber-100: #FAEBD0; --sd-amber-200: #F0CF8E; --sd-amber-400: #D9A24A; --sd-amber-600: #A8761F; /* Warm neutrals — text, secondary surfaces */ --sd-warm-50: #FAF8F5; --sd-warm-100: #F2EEE8; --sd-warm-200: #DCD6CC; --sd-warm-300: #BDB5A8; --sd-warm-400: #948A7C; --sd-warm-500: #6E665B; /* muted text */ --sd-warm-600: #574F46; --sd-warm-700: #3F3A33; /* body text */ --sd-warm-800: #2A2520; /* headings — warm near-black */ --sd-warm-900: #1A1612; /* Semantic feedback — desaturated to fit the warm palette. Avoid bright reds / harsh greens. */ --sd-success-bg: #E8F0EB; /* same as sage-100 */ --sd-success-fg: #4A6E61; /* same as sage-700 */ --sd-warning-bg: #FAEBD0; --sd-warning-fg: #8B5E16; --sd-danger-bg: #F5DDD2; --sd-danger-fg: #8C3A22; --sd-info-bg: #E8EEEF; --sd-info-fg: #3F5A60; /* Pure white — for content cards floating over the cream surface */ --sd-white: #FFFFFF; /* ============================================================ COLOR — SEMANTIC TOKENS Components reference these names, not the primitives above. ============================================================ */ /* Backgrounds */ --sd-color-bg: var(--sd-cream-100); /* page */ --sd-color-bg-alt: var(--sd-cream-50); /* alternate page sections */ --sd-color-bg-recessed: var(--sd-cream-200); /* sunken areas, code blocks */ --sd-color-surface: var(--sd-white); /* cards floating on bg */ --sd-color-surface-alt: var(--sd-cream-100); /* secondary cards */ --sd-color-surface-elevated: var(--sd-white); /* modals, popovers, dropdowns */ --sd-color-surface-interactive: var(--sd-white); /* clickable cards (rest state) */ --sd-color-surface-interactive-hover: var(--sd-cream-50); /* clickable cards on hover */ --sd-color-surface-interactive-active: var(--sd-cream-200); /* clickable cards on press */ /* Text */ --sd-color-text: var(--sd-warm-700); /* body */ --sd-color-text-strong: var(--sd-warm-800); /* headings */ --sd-color-text-muted: var(--sd-warm-500); /* meta, captions */ --sd-color-text-subtle: var(--sd-warm-400); /* placeholders, disabled */ --sd-color-text-on-primary: var(--sd-white); --sd-color-text-on-accent: var(--sd-white); --sd-color-text-link: var(--sd-sage-700); --sd-color-text-link-hover: var(--sd-sage-800); /* Borders */ --sd-color-border: var(--sd-cream-400); /* default */ --sd-color-border-subtle: var(--sd-cream-300); /* dividers */ --sd-color-border-strong: var(--sd-warm-300); --sd-color-border-focus: var(--sd-sage-500); /* Brand */ --sd-color-primary: var(--sd-sage-500); /* wordmark, links */ --sd-color-primary-hover: var(--sd-sage-600); --sd-color-primary-soft: var(--sd-sage-100); /* tinted backgrounds */ --sd-color-primary-strong: var(--sd-sage-700); --sd-color-accent: var(--sd-terracotta-400); /* primary CTA */ --sd-color-accent-hover: var(--sd-terracotta-500); --sd-color-accent-active: var(--sd-terracotta-600); --sd-color-accent-soft: var(--sd-terracotta-50); /* Trust signals */ --sd-color-verified-bg: var(--sd-sage-100); --sd-color-verified-fg: var(--sd-sage-700); --sd-color-listed-bg: transparent; --sd-color-listed-fg: var(--sd-warm-500); --sd-color-listed-border: var(--sd-warm-300); /* Feedback — bg / fg / and bare "semantic name" for borders or icon fills */ --sd-color-success: var(--sd-success-fg); --sd-color-success-bg: var(--sd-success-bg); --sd-color-success-fg: var(--sd-success-fg); --sd-color-warning: var(--sd-warning-fg); --sd-color-warning-bg: var(--sd-warning-bg); --sd-color-warning-fg: var(--sd-warning-fg); --sd-color-danger: var(--sd-danger-fg); --sd-color-danger-bg: var(--sd-danger-bg); --sd-color-danger-fg: var(--sd-danger-fg); --sd-color-error: var(--sd-danger-fg); /* alias */ --sd-color-error-bg: var(--sd-danger-bg); --sd-color-error-fg: var(--sd-danger-fg); --sd-color-info: var(--sd-info-fg); --sd-color-info-bg: var(--sd-info-bg); --sd-color-info-fg: var(--sd-info-fg); /* Scrim (modals) */ --sd-color-scrim: rgba(58, 42, 28, 0.45); /* ============================================================ INTERACTION STATE TOKENS Shared across buttons, cards, list items, links so behaviour is uniform. Overlays are translucent so they layer over ANY base colour. ============================================================ */ /* Light-surface overlays — for cards, ghost buttons, list items. Warm-brown ink so it tints in the brand palette, not a flat grey. */ --sd-overlay-hover: rgba(58, 42, 28, 0.04); /* +4% darken on light bgs */ --sd-overlay-active: rgba(58, 42, 28, 0.08); /* +8% darken on press */ /* Dark-surface overlays — for filled buttons (terracotta / sage / dark cards). White ink LIGHTENS the underlying colour, communicating "lifted" rather than "pressed" on hover. Active state inverts to a darken to feel "clicked". */ --sd-overlay-hover-dark: rgba(255, 255, 255, 0.10); /* lighten on hover */ --sd-overlay-active-dark: rgba(0, 0, 0, 0.12); /* darken on press */ /* Focus ring — keyboard nav. Use ACCENT colour (terracotta) as the universal focus indicator so it's visible against either sage- or terracotta-filled buttons (a sage ring on a sage button vanishes). 2px ring + 2px offset for WCAG. */ --sd-focus-ring-color: var(--sd-terracotta-400); --sd-focus-ring-width: 2px; --sd-focus-ring-offset: 2px; --sd-focus-ring: 0 0 0 var(--sd-focus-ring-offset) var(--sd-color-bg), 0 0 0 calc(var(--sd-focus-ring-offset) + var(--sd-focus-ring-width)) var(--sd-focus-ring-color); /* Press scale — tiny, just enough to register as "clicked" */ --sd-press-scale: 0.98; /* ============================================================ TYPOGRAPHY ============================================================ */ /* Font families */ --sd-font-serif: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif; --sd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --sd-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale — modular, mobile-comfortable. Display sizes scale up on desktop via media queries (see semantic styles). */ --sd-fs-3xs: 11px; /* tiny labels, registration numbers */ --sd-fs-2xs: 12px; /* badges, captions */ --sd-fs-xs: 13px; /* meta */ --sd-fs-sm: 14px; /* secondary UI */ --sd-fs-md: 16px; /* body DEFAULT (mobile) */ --sd-fs-lg: 18px; /* large body, profile names */ --sd-fs-xl: 20px; /* h4 / sub-heading */ --sd-fs-2xl: 24px; /* h3 */ --sd-fs-3xl: 30px; /* h2 mobile */ --sd-fs-4xl: 36px; /* h2 desktop / h1 mobile */ --sd-fs-5xl: 44px; /* h1 desktop / hero */ --sd-fs-6xl: 56px; /* display */ /* Font weights */ --sd-fw-regular: 400; --sd-fw-medium: 500; --sd-fw-semibold: 600; --sd-fw-bold: 700; /* Line heights */ --sd-lh-tight: 1.15; /* display, h1, h2 */ --sd-lh-snug: 1.30; /* h3, h4 */ --sd-lh-normal: 1.55; /* body */ --sd-lh-relaxed: 1.70; /* long-form articles */ /* Letter spacing */ --sd-ls-tight: -0.02em; /* large display sizes */ --sd-ls-normal: 0; --sd-ls-wide: 0.04em; /* small caps labels */ --sd-ls-wider: 0.08em; /* eyebrows */ /* ============================================================ SPACING — 4px base, 9-step modular scale ============================================================ */ --sd-space-0: 0; --sd-space-1: 4px; --sd-space-2: 8px; --sd-space-3: 12px; --sd-space-4: 16px; --sd-space-5: 20px; --sd-space-6: 24px; --sd-space-8: 32px; --sd-space-10: 40px; --sd-space-12: 48px; --sd-space-16: 64px; --sd-space-20: 80px; --sd-space-24: 96px; --sd-space-32: 128px; /* Container padding (responsive — recipients adjust per breakpoint) */ --sd-container-pad-mobile: 20px; --sd-container-pad-tablet: 32px; --sd-container-pad-desktop: 48px; /* Content max-widths */ --sd-max-article: 1080px; --sd-max-search: 1200px; --sd-max-hero: 1280px; --sd-max-prose: 680px; /* long-form treatment guide column */ /* ============================================================ BORDER RADII ============================================================ */ --sd-radius-xs: 4px; --sd-radius-sm: 8px; /* default UI */ --sd-radius-md: 12px; /* cards */ --sd-radius-lg: 16px; /* hero containers */ --sd-radius-full: 999px; /* pills, badges, avatar */ /* ============================================================ SHADOWS — warm-brown ink, never grey ============================================================ */ --sd-shadow-xs: 0 1px 2px rgba(58, 42, 28, 0.05); --sd-shadow-sm: 0 2px 4px rgba(58, 42, 28, 0.06), 0 1px 2px rgba(58, 42, 28, 0.04); --sd-shadow-md: 0 6px 16px rgba(58, 42, 28, 0.08), 0 2px 4px rgba(58, 42, 28, 0.04); --sd-shadow-lg: 0 16px 32px rgba(58, 42, 28, 0.10), 0 4px 8px rgba(58, 42, 28, 0.05); --sd-shadow-xl: 0 24px 48px rgba(58, 42, 28, 0.14), 0 8px 16px rgba(58, 42, 28, 0.06); --sd-shadow-inner: inset 0 1px 2px rgba(58, 42, 28, 0.06); /* Focus ring as soft halo — alternative to the hard ring, used inside dense forms */ --sd-shadow-focus: 0 0 0 3px rgba(198, 107, 77, 0.30); --sd-shadow-focus-sage: 0 0 0 3px rgba(107, 142, 127, 0.30); /* "Lifted" hover shadow — slightly stronger than rest, used on dark filled buttons */ --sd-shadow-lift: 0 4px 10px rgba(58, 42, 28, 0.14), 0 1px 3px rgba(58, 42, 28, 0.08); /* "Pressed" inset — used on active state of dark buttons + recessed inputs */ --sd-shadow-press: inset 0 2px 4px rgba(0, 0, 0, 0.18); /* ============================================================ MOTION Named durations + easing curves. Components reference these instead of hardcoding ms / cubic-beziers. ============================================================ */ --sd-motion-duration-instant: 80ms; /* state flips that should feel immediate (checkbox tick, tab switch) */ --sd-motion-duration-fast: 180ms; /* DEFAULT — hover, press, focus, most UI */ --sd-motion-duration-medium: 280ms; /* dropdown / popover open, accordion expand */ --sd-motion-duration-slow: 400ms; /* page-level transitions, modal open */ --sd-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* DEFAULT — in & out, balanced */ --sd-motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* entering elements (slow finish) */ --sd-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* exiting elements (fast finish) */ /* Legacy aliases — keep working until existing components migrate */ --sd-easing: var(--sd-motion-ease-standard); --sd-duration-fast: var(--sd-motion-duration-fast); --sd-duration-mid: var(--sd-motion-duration-medium); --sd-duration-slow: var(--sd-motion-duration-slow); /* ============================================================ Z-INDEX ============================================================ */ --sd-z-base: 0; --sd-z-card: 1; --sd-z-sticky: 10; --sd-z-overlay: 20; --sd-z-modal: 30; --sd-z-toast: 40; /* ============================================================ LAYOUT — touch targets, breakpoints Mobile-first: write base styles for 375px, scale up at sm → xl. The :root vars below are exposed for use in JS / matchMedia, and mirrored as concrete numbers so media queries can use them directly. CSS doesn't (yet) allow custom properties inside @media queries, so the canonical breakpoints live in the comment + the SCSS-style map below — use the px values verbatim in @media rules. ============================================================ */ --sd-tap-min: 44px; /* WCAG / iOS HIG minimum */ --sd-input-h: 48px; /* default input height — comfortable on mobile */ --sd-input-h-compact: 40px; /* Breakpoints — mobile-first. sm 480px — large phone / phablet md 768px — tablet portrait lg 1024px — tablet landscape / small desktop xl 1280px — desktop The vars below are for JS access (matchMedia, IntersectionObserver root, ResizeObserver thresholds). For @media queries, use the px values directly. */ --sd-bp-sm: 480px; --sd-bp-md: 768px; --sd-bp-lg: 1024px; --sd-bp-xl: 1280px; } /* ============================================================ SEMANTIC TYPE STYLES Apply these classes (or @extend in PHP/CSS) — don't restyle headings inline. ============================================================ */ .sd-display, .sd-h1, .sd-h2, .sd-h3, .sd-h4 { font-family: var(--sd-font-serif); color: var(--sd-color-text-strong); font-weight: var(--sd-fw-semibold); letter-spacing: var(--sd-ls-tight); text-wrap: balance; margin: 0; } .sd-display { font-size: var(--sd-fs-5xl); line-height: var(--sd-lh-tight); } @media (min-width: 768px) { .sd-display { font-size: var(--sd-fs-6xl); } } .sd-h1 { font-size: var(--sd-fs-4xl); line-height: var(--sd-lh-tight); } @media (min-width: 768px) { .sd-h1 { font-size: var(--sd-fs-5xl); } } .sd-h2 { font-size: var(--sd-fs-3xl); line-height: var(--sd-lh-tight); } @media (min-width: 768px) { .sd-h2 { font-size: var(--sd-fs-4xl); } } .sd-h3 { font-size: var(--sd-fs-2xl); line-height: var(--sd-lh-snug); } .sd-h4 { font-size: var(--sd-fs-xl); line-height: var(--sd-lh-snug); } /* Body — sans */ .sd-body, .sd-p { font-family: var(--sd-font-sans); font-size: var(--sd-fs-md); line-height: var(--sd-lh-normal); color: var(--sd-color-text); font-weight: var(--sd-fw-regular); margin: 0; text-wrap: pretty; } .sd-body--lg { font-size: var(--sd-fs-lg); } .sd-body--sm { font-size: var(--sd-fs-sm); } /* Long-form prose — used inside .sd-prose wrapper for treatment guides */ .sd-prose { font-family: var(--sd-font-sans); font-size: var(--sd-fs-lg); line-height: var(--sd-lh-relaxed); color: var(--sd-color-text); max-width: var(--sd-max-prose); } .sd-prose h2 { font-family: var(--sd-font-serif); font-size: var(--sd-fs-3xl); margin: var(--sd-space-12) 0 var(--sd-space-4); color: var(--sd-color-text-strong); } .sd-prose h3 { font-family: var(--sd-font-serif); font-size: var(--sd-fs-2xl); margin: var(--sd-space-8) 0 var(--sd-space-3); color: var(--sd-color-text-strong); } .sd-prose p { margin: 0 0 var(--sd-space-5); } .sd-prose ul, .sd-prose ol { margin: 0 0 var(--sd-space-5) var(--sd-space-5); } .sd-prose li { margin-bottom: var(--sd-space-2); } .sd-prose a { color: var(--sd-color-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .sd-prose a:hover { color: var(--sd-color-text-link-hover); text-decoration-thickness: 2px; } /* Caption / meta */ .sd-caption { font-family: var(--sd-font-sans); font-size: var(--sd-fs-xs); line-height: var(--sd-lh-normal); color: var(--sd-color-text-muted); font-weight: var(--sd-fw-regular); } /* Eyebrow — small caps label above section headings */ .sd-eyebrow { font-family: var(--sd-font-sans); font-size: var(--sd-fs-2xs); font-weight: var(--sd-fw-semibold); letter-spacing: var(--sd-ls-wider); text-transform: uppercase; color: var(--sd-color-primary-strong); } /* Mono — registration numbers, pincodes */ .sd-mono { font-family: var(--sd-font-mono); font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); letter-spacing: 0; color: var(--sd-color-text); } /* Link */ .sd-link { color: var(--sd-color-text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--sd-duration-fast) var(--sd-easing), text-decoration-thickness var(--sd-duration-fast) var(--sd-easing); } .sd-link:hover { color: var(--sd-color-text-link-hover); text-decoration-thickness: 2px; } /* Utility — applies the page background + base type to the document */ .sd-page { background: var(--sd-color-bg); color: var(--sd-color-text); font-family: var(--sd-font-sans); font-size: var(--sd-fs-md); line-height: var(--sd-lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }