/* ───────────────────────────────────────────────────────────────── Glidewell Design System (GDS) Tokens — colors + typography + radii + shadows Adapted from the GDS shadcn Figma kit (Tailwind v4 / shadcn/ui base) ───────────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap"); :root { /* ─── Brand: Glidewell (default) ─────────────────────────────── */ --gds-brand-bg: #EB0045; /* primary — Glidewell red */ --gds-brand-bg-hover: #D3003E; /* hover (darker) */ --gds-brand-bg-active: #B30035; --gds-brand-fg: #EB0045; /* brand red on neutral bg */ --gds-brand-on-bg: #FFFFFF; /* text/icon on brand bg */ --gds-brand-border: #EB0045; /* ─── Sister-lab brand tokens ───────────────────────────────── Each sister-lab swaps --gds-brand-bg (and on-bg stays white) via a [data-theme] attribute on or any scoping wrapper. ───────────────────────────────────────────────────────────── */ --gds-lab-glidewell: #EB0045; --gds-lab-crownworld: #1E51A4; --gds-lab-bruxzirexpress: #224C8A; --gds-lab-riverside: #059BD7; --gds-lab-newwest: #008C95; --gds-lab-lvdds: #CE0E2D; --gds-lab-pacificedge: #1B5A7D; --gds-lab-smithsterling: #F57D20; --gds-lab-digitech: #113157; /* Accent — secondary brand teal used in ghost buttons / labels */ --gds-accent: #3C8480; --gds-accent-hover: #2F6A66; /* ─── Neutrals (Tailwind v4 neutral scale) ───────────────────── */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F5F5F5; --neutral-200: #E5E5E5; --neutral-300: #D4D4D4; --neutral-400: #A3A3A3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0A0A0A; /* ─── Semantic — Background ──────────────────────────────────── */ --bg-base: var(--neutral-0); /* page bg */ --bg-surface: var(--neutral-50); /* cards, panels */ --bg-muted: var(--neutral-100); /* subtle fills, hovers */ --bg-overlay: rgba(10, 10, 10, 0.50); /* ─── Semantic — Foreground ──────────────────────────────────── */ --fg-default: var(--neutral-950); --fg-alt: var(--neutral-800); /* unofficial — preferred for body */ --fg-muted: var(--neutral-500); --fg-subtle: var(--neutral-400); /* placeholder / disabled-ish */ --fg-inverse: var(--neutral-0); /* Production-app neutrals seen in Glidewell footer / wordmark */ --fg-marketing: #54575A; /* footer text */ --fg-wordmark: #808285; /* greyscale wordmark */ /* ─── Semantic — Border ──────────────────────────────────────── */ --border-subtle: var(--neutral-100); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-disabled: var(--neutral-200); /* ─── Secondary (neutral button) ─────────────────────────────── */ --secondary-bg: var(--neutral-100); --secondary-bg-hover: var(--neutral-200); --secondary-fg: var(--neutral-600); --secondary-on-bg: var(--neutral-900); --secondary-border: var(--neutral-200); /* ─── States — Success / Warning / Danger / Info ─────────────── */ --success-fg: #15803D; --success-bg: #DCFCE7; --success-border: #86EFAC; --warning-fg: #B45309; --warning-bg: #FEF3C7; --warning-border: #FCD34D; --danger-fg: #B91C1C; --danger-bg: #DC2626; /* destructive button bg */ --danger-on-bg: #FFFFFF; --danger-subtle: #FEE2E2; /* toast / inline bg */ --danger-border: #FCA5A5; --info-fg: #1E40AF; --info-bg: #DBEAFE; --info-border: #93C5FD; /* ─── Utility ────────────────────────────────────────────────── */ --focus-ring: rgba(235, 0, 69, 0.35); /* brand at 35% */ --focus-ring-error: rgba(220, 38, 38, 0.35); --focus-ring-width: 3px; /* ─── Typography — Font stacks ───────────────────────────────── */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Poppins", "Inter", system-ui, sans-serif; /* large headings, hero */ --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* ─── Headings (semantic) ──────────────────────────────────── All Poppins. 300 weight for h1/h2, 400 for h3/h4. -1.5px tracking. */ --text-h1: 300 48px/64px var(--font-display); --text-h2: 300 32px/40px var(--font-display); --text-h3: 400 24px/32px var(--font-display); --text-h4: 400 20px/24px var(--font-display); /* ─── Body / UI scale (4 sizes × 3 weights, 0px tracking) ───── */ --text-body-lg: 400 18px/28px var(--font-sans); --text-body-lg-med: 500 18px/28px var(--font-sans); --text-body-lg-bold: 600 18px/28px var(--font-sans); --text-body: 400 16px/24px var(--font-sans); /* default */ --text-body-med: 500 16px/24px var(--font-sans); --text-body-bold: 600 16px/24px var(--font-sans); --text-body-sm: 400 14px/20px var(--font-sans); --text-body-sm-med: 500 14px/20px var(--font-sans); --text-body-sm-bold: 600 14px/20px var(--font-sans); --text-body-mini: 400 12px/16px var(--font-sans); --text-body-mini-med: 500 12px/16px var(--font-sans); --text-body-mini-bold: 600 12px/16px var(--font-sans); --text-mono: 400 14px/20px var(--font-mono); --letter-tight: -1.5px; /* headings only */ --letter-loose: 0.005em; /* ─── Radii ──────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; /* default — buttons, cards, inputs */ --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ─── Shadows (Tailwind v4) ──────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10); --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25); --shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus-ring); /* ─── Spacing rhythm ─────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ─── Motion ─────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; } /* ─── Theme switches (sister labs) ─────────────────────────────── Apply to or any wrapper:
… ───────────────────────────────────────────────────────────────── */ [data-theme="crownworld"] { --gds-brand-bg: var(--gds-lab-crownworld); --gds-brand-bg-hover: #194380; --gds-brand-fg: var(--gds-lab-crownworld); --gds-brand-border: var(--gds-lab-crownworld); --focus-ring: rgba(30, 81, 164, 0.35); } [data-theme="bruxzirexpress"] { --gds-brand-bg: var(--gds-lab-bruxzirexpress); --gds-brand-bg-hover: #1B3E6F; --gds-brand-fg: var(--gds-lab-bruxzirexpress); --gds-brand-border: var(--gds-lab-bruxzirexpress); --focus-ring: rgba(34, 76, 138, 0.35); } [data-theme="riverside"] { --gds-brand-bg: var(--gds-lab-riverside); --gds-brand-bg-hover: #047CAE; --gds-brand-fg: var(--gds-lab-riverside); --gds-brand-border: var(--gds-lab-riverside); --focus-ring: rgba(5, 155, 215, 0.35); } [data-theme="newwest"] { --gds-brand-bg: var(--gds-lab-newwest); --gds-brand-bg-hover: #006F76; --gds-brand-fg: var(--gds-lab-newwest); --gds-brand-border: var(--gds-lab-newwest); --focus-ring: rgba(0, 140, 149, 0.35); } [data-theme="lvdds"] { --gds-brand-bg: var(--gds-lab-lvdds); --gds-brand-bg-hover: #A50A23; --gds-brand-fg: var(--gds-lab-lvdds); --gds-brand-border: var(--gds-lab-lvdds); --focus-ring: rgba(206, 14, 45, 0.35); } [data-theme="pacificedge"] { --gds-brand-bg: var(--gds-lab-pacificedge); --gds-brand-bg-hover: #154862; --gds-brand-fg: var(--gds-lab-pacificedge); --gds-brand-border: var(--gds-lab-pacificedge); --focus-ring: rgba(27, 90, 125, 0.35); } [data-theme="smithsterling"] { --gds-brand-bg: var(--gds-lab-smithsterling); --gds-brand-bg-hover: #C46219; --gds-brand-fg: var(--gds-lab-smithsterling); --gds-brand-border: var(--gds-lab-smithsterling); --focus-ring: rgba(245, 125, 32, 0.35); } [data-theme="digitech"] { --gds-brand-bg: var(--gds-lab-digitech); --gds-brand-bg-hover: #0C2543; --gds-brand-fg: var(--gds-lab-digitech); --gds-brand-border: var(--gds-lab-digitech); --focus-ring: rgba(17, 49, 87, 0.35); } /* ─── Element-level resets / defaults ────────────────────────── */ html { font-family: var(--font-sans); color: var(--fg-default); -webkit-font-smoothing: antialiased; } body { font: var(--text-body); color: var(--fg-alt); } h1 { font: var(--text-h1); color: var(--fg-default); letter-spacing: var(--letter-tight); } h2 { font: var(--text-h2); color: var(--fg-default); letter-spacing: var(--letter-tight); } h3 { font: var(--text-h3); color: var(--fg-default); letter-spacing: var(--letter-tight); } h4 { font: var(--text-h4); color: var(--fg-default); letter-spacing: var(--letter-tight); } code, pre, kbd { font: var(--text-mono); }