/* ==========================================================================
WonderCast Design Tokens
==========================================================================
A comprehensive set of CSS custom properties (design tokens) for the
WonderCast brand. Import this file at the top of your stylesheet or
include it via a tag to gain access to every token.
Usage:
@import url('./tokens.css');
.my-component {
color: var(--wc-text-primary);
background: var(--wc-bg-warm);
border-radius: var(--wc-radius-lg);
box-shadow: var(--wc-shadow-soft);
font-family: var(--wc-font-body);
padding: var(--wc-space-4) var(--wc-space-6);
transition: all var(--wc-transition-normal);
}
Naming convention:
--wc-{category}-{variant}
wc = WonderCast prefix (avoids collisions with other libraries)
========================================================================== */
/* --------------------------------------------------------------------------
1. COLOR PRIMITIVES
--------------------------------------------------------------------------
Raw color scales. Use these when you need a specific shade regardless
of light/dark mode. For theme-aware colors, prefer the semantic tokens
defined in Section 2.
-------------------------------------------------------------------------- */
:root {
/* --- Brand Purple ---
The primary brand color. Use 500 as the default, lighter shades for
backgrounds/hover states, darker shades for active/pressed states.
*/
--wc-brand-50: #F5F3FF;
--wc-brand-100: #EDE9FE;
--wc-brand-200: #DDD6FE;
--wc-brand-300: #C4B5FD;
--wc-brand-400: #A78BFA;
--wc-brand-500: #7C3AED;
--wc-brand-600: #6D28D9;
--wc-brand-700: #5B21B6;
--wc-brand-800: #4C1D95;
--wc-brand-900: #2E1065;
/* --- Coral Accent ---
Warm accent for CTAs, badges, and attention-grabbing elements.
*/
--wc-coral-50: #FFF1F0;
--wc-coral-100: #FFE4E1;
--wc-coral-200: #FFCAC5;
--wc-coral-300: #FFA39E;
--wc-coral-400: #FF6B6B;
--wc-coral-500: #EF4444;
/* --- Gold Accent ---
Used for highlights, stars, ratings, premium badges, and warm
attention elements.
*/
--wc-gold-50: #FFFBEB;
--wc-gold-100: #FEF3C7;
--wc-gold-200: #FDE68A;
--wc-gold-300: #FFD93D;
--wc-gold-400: #F9C74F;
--wc-gold-500: #F59E0B;
/* --- Neutral / Slate ---
Used for text, borders, and subtle backgrounds. Mapped to Tailwind
slate scale for consistency.
*/
--wc-slate-50: #F8FAFC;
--wc-slate-100: #F1F5F9;
--wc-slate-200: #E2E8F0;
--wc-slate-300: #CBD5E1;
--wc-slate-400: #94A3B8;
--wc-slate-500: #64748B;
--wc-slate-600: #475569;
--wc-slate-700: #334155;
--wc-slate-800: #1E293B;
--wc-slate-900: #0F172A;
/* --------------------------------------------------------------------------
2. SEMANTIC COLORS
--------------------------------------------------------------------------
Theme-aware tokens. These change between light and dark mode.
Always prefer these over raw primitives in components.
-------------------------------------------------------------------------- */
/* Backgrounds */
--wc-bg-warm: #FDFBF7; /* Warm off-white page background */
--wc-bg-white: #FFFFFF; /* Card / surface background */
--wc-bg-subtle: #F8FAFC; /* Subtle alternate background (tables, code) */
--wc-bg-overlay: rgba(0, 0, 0, 0.5); /* Modal/dialog backdrop */
/* Text */
--wc-text-primary: #1E293B; /* slate-800 -- headings, body */
--wc-text-secondary: #64748B; /* slate-500 -- descriptions, labels */
--wc-text-muted: #94A3B8; /* slate-400 -- placeholders, disabled */
--wc-text-inverse: #FFFFFF; /* Text on dark/brand backgrounds */
--wc-text-link: #7C3AED; /* Links (brand-500) */
/* Borders & Dividers */
--wc-border: #E2E8F0; /* slate-200 */
--wc-border-focus: #7C3AED; /* Focus ring color (brand-500) */
/* Status / Feedback */
--wc-success: #22C55E;
--wc-success-bg: #F0FDF4;
--wc-warning: #F59E0B;
--wc-warning-bg: #FFFBEB;
--wc-error: #EF4444;
--wc-error-bg: #FEF2F2;
--wc-info: #3B82F6;
--wc-info-bg: #EFF6FF;
/* --------------------------------------------------------------------------
3. TYPOGRAPHY
--------------------------------------------------------------------------
Font families, sizes, weights, line heights, and letter spacing.
Font loading note:
- Plus Jakarta Sans: Google Fonts (body text)
- Outfit: Google Fonts (display / headings)
- OpenDyslexic: Self-hosted or CDN (accessibility toggle)
-------------------------------------------------------------------------- */
/* Font Families */
--wc-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--wc-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
--wc-font-a11y: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif;
--wc-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
/* Font Sizes
Use these with line-height tokens for consistent vertical rhythm.
Example: font-size: var(--wc-text-lg); line-height: var(--wc-leading-lg);
*/
--wc-text-xs: 0.75rem; /* 12px */
--wc-text-sm: 0.875rem; /* 14px */
--wc-text-base: 1rem; /* 16px */
--wc-text-lg: 1.125rem; /* 18px */
--wc-text-xl: 1.25rem; /* 20px */
--wc-text-2xl: 1.5rem; /* 24px */
--wc-text-3xl: 1.875rem; /* 30px */
--wc-text-4xl: 2.25rem; /* 36px */
--wc-text-5xl: 3rem; /* 48px */
--wc-text-6xl: 3.75rem; /* 60px */
/* Line Heights */
--wc-leading-none: 1;
--wc-leading-tight: 1.25;
--wc-leading-snug: 1.375;
--wc-leading-normal: 1.5;
--wc-leading-relaxed: 1.625;
--wc-leading-loose: 2;
/* Corresponding line heights for each text size */
--wc-leading-xs: 1rem; /* 16px */
--wc-leading-sm: 1.25rem; /* 20px */
--wc-leading-base: 1.5rem; /* 24px */
--wc-leading-lg: 1.75rem; /* 28px */
--wc-leading-xl: 1.75rem; /* 28px */
--wc-leading-2xl: 2rem; /* 32px */
--wc-leading-3xl: 2.25rem; /* 36px */
--wc-leading-4xl: 2.5rem; /* 40px */
--wc-leading-5xl: 3.5rem; /* 56px -- 1 for hero text */
--wc-leading-6xl: 4.25rem; /* 68px */
/* Font Weights */
--wc-font-normal: 400;
--wc-font-medium: 500;
--wc-font-semibold: 600;
--wc-font-bold: 700;
--wc-font-extrabold: 800;
/* Letter Spacing */
--wc-tracking-tighter: -0.05em;
--wc-tracking-tight: -0.025em;
--wc-tracking-normal: 0em;
--wc-tracking-wide: 0.025em;
--wc-tracking-wider: 0.05em;
--wc-tracking-widest: 0.1em;
/* --------------------------------------------------------------------------
4. SPACING
--------------------------------------------------------------------------
Consistent spacing scale based on a 4px grid (0.25rem).
Use for margin, padding, gap, and positioning.
-------------------------------------------------------------------------- */
--wc-space-0: 0;
--wc-space-px: 1px;
--wc-space-0-5: 0.125rem; /* 2px */
--wc-space-1: 0.25rem; /* 4px */
--wc-space-1-5: 0.375rem; /* 6px */
--wc-space-2: 0.5rem; /* 8px */
--wc-space-2-5: 0.625rem; /* 10px */
--wc-space-3: 0.75rem; /* 12px */
--wc-space-3-5: 0.875rem; /* 14px */
--wc-space-4: 1rem; /* 16px */
--wc-space-5: 1.25rem; /* 20px */
--wc-space-6: 1.5rem; /* 24px */
--wc-space-7: 1.75rem; /* 28px */
--wc-space-8: 2rem; /* 32px */
--wc-space-9: 2.25rem; /* 36px */
--wc-space-10: 2.5rem; /* 40px */
--wc-space-11: 2.75rem; /* 44px */
--wc-space-12: 3rem; /* 48px */
--wc-space-14: 3.5rem; /* 56px */
--wc-space-16: 4rem; /* 64px */
--wc-space-20: 5rem; /* 80px */
--wc-space-24: 6rem; /* 96px */
--wc-space-28: 7rem; /* 112px */
--wc-space-32: 8rem; /* 128px */
/* --------------------------------------------------------------------------
5. BORDER RADIUS
--------------------------------------------------------------------------
Rounded corner tokens. The scale goes from subtle rounding to fully
circular (pill shapes, avatars).
-------------------------------------------------------------------------- */
--wc-radius-none: 0;
--wc-radius-sm: 0.375rem; /* 6px -- subtle, input fields */
--wc-radius-md: 0.5rem; /* 8px -- cards, buttons */
--wc-radius-lg: 0.75rem; /* 12px -- larger cards, modals */
--wc-radius-xl: 1rem; /* 16px -- prominent cards */
--wc-radius-2xl: 1.5rem; /* 24px -- hero cards, feature sections */
--wc-radius-3xl: 2rem; /* 32px -- extra prominent rounding */
--wc-radius-full: 9999px; /* Pill shapes, avatars, badges */
/* --------------------------------------------------------------------------
6. SHADOWS
--------------------------------------------------------------------------
Elevation system. Use progressively heavier shadows to indicate
interactive elements and overlays.
shadow-soft -> default card, subtle elevation
shadow-card -> standard card with slight border feel
shadow-glow -> brand-colored glow (buttons, focus)
shadow-glass -> glassmorphism surfaces
shadow-mega -> modals, dropdowns, prominent overlays
-------------------------------------------------------------------------- */
--wc-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--wc-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--wc-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
--wc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--wc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--wc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--wc-shadow-mega: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
--wc-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--wc-shadow-glow: 0 0 40px -10px rgba(124, 58, 237, 0.4);
--wc-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
--wc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
/* Colored glow variants */
--wc-shadow-glow-coral: 0 0 40px -10px rgba(239, 68, 68, 0.4);
--wc-shadow-glow-gold: 0 0 40px -10px rgba(245, 158, 11, 0.4);
--wc-shadow-glow-success: 0 0 40px -10px rgba(34, 197, 94, 0.4);
/* --------------------------------------------------------------------------
7. GRADIENTS
--------------------------------------------------------------------------
Pre-defined gradient values. Apply via `background: var(--wc-gradient-*)`.
-------------------------------------------------------------------------- */
--wc-gradient-brand: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
--wc-gradient-brand-vivid: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A78BFA 100%);
--wc-gradient-hero: linear-gradient(135deg, #6B21A8 0%, #312E81 100%);
--wc-gradient-warm: linear-gradient(135deg, #FDFBF7 0%, #F5F3FF 100%);
--wc-gradient-coral: linear-gradient(135deg, #FF6B6B 0%, #EF4444 100%);
--wc-gradient-gold: linear-gradient(135deg, #FFD93D 0%, #F59E0B 100%);
--wc-gradient-night: linear-gradient(180deg, #2E1065 0%, #1E1B4B 50%, #0F172A 100%);
--wc-gradient-constellation: linear-gradient(135deg, #6B21A8 0%, #4C1D95 50%, #312E81 100%);
--wc-gradient-sunset: linear-gradient(135deg, #7C3AED 0%, #FF6B6B 50%, #FFD93D 100%);
--wc-gradient-ocean: linear-gradient(135deg, #3B82F6 0%, #7C3AED 100%);
--wc-gradient-surface: linear-gradient(180deg, var(--wc-bg-white) 0%, var(--wc-bg-warm) 100%);
/* --------------------------------------------------------------------------
8. TRANSITIONS & ANIMATIONS
--------------------------------------------------------------------------
Consistent motion tokens. The easing curves follow Material Design
principles: ease-out for entrances, ease-in for exits, ease-in-out
for state changes.
-------------------------------------------------------------------------- */
/* Duration + Easing combos */
--wc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--wc-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--wc-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--wc-transition-spring: 800ms cubic-bezier(0.16, 1, 0.3, 1);
/* Raw durations (for use in JS or keyframes) */
--wc-duration-fast: 150ms;
--wc-duration-normal: 300ms;
--wc-duration-slow: 500ms;
/* Raw easing curves */
--wc-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--wc-ease-in: cubic-bezier(0.4, 0, 1, 1);
--wc-ease-out: cubic-bezier(0, 0, 0.2, 1);
--wc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--wc-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
--wc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* --------------------------------------------------------------------------
9. Z-INDEX SCALE
--------------------------------------------------------------------------
Layering system. Avoids z-index wars by providing named layers.
-------------------------------------------------------------------------- */
--wc-z-base: 0;
--wc-z-raised: 1;
--wc-z-dropdown: 10;
--wc-z-sticky: 20;
--wc-z-header: 30;
--wc-z-modal-backdrop: 40;
--wc-z-modal: 50;
--wc-z-toast: 60;
--wc-z-tooltip: 70;
--wc-z-max: 9999;
/* --------------------------------------------------------------------------
10. BREAKPOINTS (Reference Only)
--------------------------------------------------------------------------
CSS custom properties cannot be used in @media queries. These are
documented here for reference and are used in the JSON tokens file
for tooling (Figma, Style Dictionary).
Usage in CSS:
@media (min-width: 640px) { ... } sm
@media (min-width: 768px) { ... } md
@media (min-width: 1024px) { ... } lg
@media (min-width: 1280px) { ... } xl
@media (min-width: 1536px) { ... } 2xl
-------------------------------------------------------------------------- */
--wc-bp-sm: 640px;
--wc-bp-md: 768px;
--wc-bp-lg: 1024px;
--wc-bp-xl: 1280px;
--wc-bp-2xl: 1536px;
/* --------------------------------------------------------------------------
11. SIZING
--------------------------------------------------------------------------
Common component size tokens for buttons, inputs, avatars, icons.
-------------------------------------------------------------------------- */
/* Icon sizes */
--wc-icon-xs: 0.75rem; /* 12px */
--wc-icon-sm: 1rem; /* 16px */
--wc-icon-md: 1.25rem; /* 20px */
--wc-icon-lg: 1.5rem; /* 24px */
--wc-icon-xl: 2rem; /* 32px */
/* Avatar sizes */
--wc-avatar-xs: 1.5rem; /* 24px */
--wc-avatar-sm: 2rem; /* 32px */
--wc-avatar-md: 2.5rem; /* 40px */
--wc-avatar-lg: 3rem; /* 48px */
--wc-avatar-xl: 4rem; /* 64px */
--wc-avatar-2xl: 6rem; /* 96px */
/* Input / Button heights */
--wc-input-sm: 2rem; /* 32px */
--wc-input-md: 2.5rem; /* 40px */
--wc-input-lg: 3rem; /* 48px */
/* Container max-widths */
--wc-container-sm: 640px;
--wc-container-md: 768px;
--wc-container-lg: 1024px;
--wc-container-xl: 1280px;
--wc-container-2xl: 1536px;
--wc-container-prose: 65ch; /* Optimal reading width */
/* --------------------------------------------------------------------------
12. FOCUS & ACCESSIBILITY
--------------------------------------------------------------------------
Tokens for focus indicators, reduced motion, and high contrast.
-------------------------------------------------------------------------- */
--wc-focus-ring-width: 2px;
--wc-focus-ring-offset: 2px;
--wc-focus-ring-color: var(--wc-brand-500);
--wc-focus-ring: var(--wc-focus-ring-width) solid var(--wc-focus-ring-color);
}
/* ==========================================================================
DARK MODE OVERRIDES
==========================================================================
Semantic tokens that adapt to the user's system preference.
To force dark mode, add `data-theme="dark"` to the element
and duplicate these overrides under [data-theme="dark"].
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
/* Backgrounds */
--wc-bg-warm: #0F0A1A;
--wc-bg-white: #1A1525;
--wc-bg-subtle: #221D2E;
--wc-bg-overlay: rgba(0, 0, 0, 0.7);
/* Text */
--wc-text-primary: #F1F5F9;
--wc-text-secondary: #94A3B8;
--wc-text-muted: #64748B;
--wc-text-inverse: #1E293B;
--wc-text-link: #A78BFA;
/* Borders */
--wc-border: #334155;
--wc-border-focus: #A78BFA;
/* Status backgrounds */
--wc-success-bg: #052E16;
--wc-warning-bg: #451A03;
--wc-error-bg: #450A0A;
--wc-info-bg: #172554;
/* Shadows (deeper in dark mode) */
--wc-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
--wc-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
--wc-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
--wc-shadow-mega: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
/* Surface gradient */
--wc-gradient-surface: linear-gradient(180deg, var(--wc-bg-white) 0%, var(--wc-bg-warm) 100%);
}
}
/* Manual dark mode toggle via data attribute */
[data-theme="dark"] {
--wc-bg-warm: #0F0A1A;
--wc-bg-white: #1A1525;
--wc-bg-subtle: #221D2E;
--wc-bg-overlay: rgba(0, 0, 0, 0.7);
--wc-text-primary: #F1F5F9;
--wc-text-secondary: #94A3B8;
--wc-text-muted: #64748B;
--wc-text-inverse: #1E293B;
--wc-text-link: #A78BFA;
--wc-border: #334155;
--wc-border-focus: #A78BFA;
--wc-success-bg: #052E16;
--wc-warning-bg: #451A03;
--wc-error-bg: #450A0A;
--wc-info-bg: #172554;
--wc-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
--wc-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
--wc-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
--wc-shadow-mega: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--wc-gradient-surface: linear-gradient(180deg, var(--wc-bg-white) 0%, var(--wc-bg-warm) 100%);
}
/* ==========================================================================
REDUCED MOTION
==========================================================================
Respect the user's motion preferences by collapsing all transitions
to near-instant values.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--wc-transition-fast: 0ms;
--wc-transition-normal: 0ms;
--wc-transition-slow: 0ms;
--wc-transition-spring: 0ms;
--wc-duration-fast: 0ms;
--wc-duration-normal: 0ms;
--wc-duration-slow: 0ms;
}
}
/* ==========================================================================
UTILITY CLASSES
==========================================================================
Optional convenience classes for quick prototyping. These are NOT
required -- you can always use the custom properties directly.
Prefix: .wc-
========================================================================== */
/* --- Color Utilities --- */
.wc-text-brand { color: var(--wc-brand-500); }
.wc-text-coral { color: var(--wc-coral-400); }
.wc-text-gold { color: var(--wc-gold-400); }
.wc-text-primary { color: var(--wc-text-primary); }
.wc-text-secondary { color: var(--wc-text-secondary); }
.wc-text-muted { color: var(--wc-text-muted); }
.wc-text-success { color: var(--wc-success); }
.wc-text-warning { color: var(--wc-warning); }
.wc-text-error { color: var(--wc-error); }
.wc-text-info { color: var(--wc-info); }
.wc-bg-brand { background-color: var(--wc-brand-500); }
.wc-bg-brand-light { background-color: var(--wc-brand-50); }
.wc-bg-coral { background-color: var(--wc-coral-400); }
.wc-bg-gold { background-color: var(--wc-gold-300); }
.wc-bg-warm { background-color: var(--wc-bg-warm); }
.wc-bg-white { background-color: var(--wc-bg-white); }
.wc-bg-subtle { background-color: var(--wc-bg-subtle); }
/* --- Gradient Text ---
Apply a gradient fill to text. Works on all modern browsers.
Usage: Hello
*/
.wc-gradient-text {
background: var(--wc-gradient-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.wc-gradient-text-coral {
background: var(--wc-gradient-coral);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.wc-gradient-text-gold {
background: var(--wc-gradient-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.wc-gradient-text-sunset {
background: var(--wc-gradient-sunset);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* --- Card ---
A standard elevated surface with rounded corners.
Usage: ...
*/
.wc-card {
background: var(--wc-bg-white);
border: 1px solid var(--wc-border);
border-radius: var(--wc-radius-xl);
box-shadow: var(--wc-shadow-card);
padding: var(--wc-space-6);
transition: box-shadow var(--wc-transition-normal),
transform var(--wc-transition-normal);
}
.wc-card:hover {
box-shadow: var(--wc-shadow-md);
}
.wc-card-elevated {
background: var(--wc-bg-white);
border: 1px solid var(--wc-border);
border-radius: var(--wc-radius-xl);
box-shadow: var(--wc-shadow-lg);
padding: var(--wc-space-6);
}
.wc-card-interactive {
background: var(--wc-bg-white);
border: 1px solid var(--wc-border);
border-radius: var(--wc-radius-xl);
box-shadow: var(--wc-shadow-card);
padding: var(--wc-space-6);
cursor: pointer;
transition: box-shadow var(--wc-transition-normal),
transform var(--wc-transition-normal),
border-color var(--wc-transition-normal);
}
.wc-card-interactive:hover {
box-shadow: var(--wc-shadow-lg);
border-color: var(--wc-brand-200);
transform: translateY(-2px);
}
.wc-card-interactive:active {
transform: translateY(0);
box-shadow: var(--wc-shadow-sm);
}
/* --- Glass ---
Glassmorphism surface with backdrop blur.
Usage: ...
*/
.wc-glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--wc-radius-xl);
box-shadow: var(--wc-shadow-glass);
}
[data-theme="dark"] .wc-glass,
@media (prefers-color-scheme: dark) {
.wc-glass {
background: rgba(26, 21, 37, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
}
}
/* --- Buttons ---
Primary, secondary, and ghost button styles.
Usage:
*/
.wc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wc-space-2);
font-family: var(--wc-font-body);
font-size: var(--wc-text-sm);
font-weight: var(--wc-font-semibold);
line-height: var(--wc-leading-sm);
padding: var(--wc-space-2-5) var(--wc-space-5);
border-radius: var(--wc-radius-lg);
border: none;
cursor: pointer;
transition: all var(--wc-transition-fast);
text-decoration: none;
white-space: nowrap;
min-height: var(--wc-input-md);
}
.wc-btn:focus-visible {
outline: var(--wc-focus-ring);
outline-offset: var(--wc-focus-ring-offset);
}
.wc-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.wc-btn-primary {
background: var(--wc-gradient-brand);
color: var(--wc-text-inverse);
box-shadow: var(--wc-shadow-sm);
}
.wc-btn-primary:hover {
box-shadow: var(--wc-shadow-glow);
transform: translateY(-1px);
}
.wc-btn-primary:active {
transform: translateY(0);
box-shadow: var(--wc-shadow-xs);
}
.wc-btn-secondary {
background: var(--wc-bg-white);
color: var(--wc-brand-600);
border: 1px solid var(--wc-brand-200);
box-shadow: var(--wc-shadow-xs);
}
.wc-btn-secondary:hover {
background: var(--wc-brand-50);
border-color: var(--wc-brand-300);
box-shadow: var(--wc-shadow-sm);
}
.wc-btn-secondary:active {
background: var(--wc-brand-100);
}
.wc-btn-ghost {
background: transparent;
color: var(--wc-text-secondary);
}
.wc-btn-ghost:hover {
background: var(--wc-bg-subtle);
color: var(--wc-text-primary);
}
.wc-btn-coral {
background: var(--wc-gradient-coral);
color: white;
box-shadow: var(--wc-shadow-sm);
}
.wc-btn-coral:hover {
box-shadow: var(--wc-shadow-glow-coral);
transform: translateY(-1px);
}
/* Button sizes */
.wc-btn-sm {
font-size: var(--wc-text-xs);
padding: var(--wc-space-1-5) var(--wc-space-3);
min-height: var(--wc-input-sm);
border-radius: var(--wc-radius-md);
}
.wc-btn-lg {
font-size: var(--wc-text-base);
padding: var(--wc-space-3) var(--wc-space-6);
min-height: var(--wc-input-lg);
border-radius: var(--wc-radius-xl);
}
/* --- Badge ---
Small status indicators and labels.
Usage: New
*/
.wc-badge {
display: inline-flex;
align-items: center;
gap: var(--wc-space-1);
font-family: var(--wc-font-body);
font-size: var(--wc-text-xs);
font-weight: var(--wc-font-semibold);
padding: var(--wc-space-0-5) var(--wc-space-2);
border-radius: var(--wc-radius-full);
line-height: var(--wc-leading-tight);
}
.wc-badge-brand {
background: var(--wc-brand-100);
color: var(--wc-brand-700);
}
.wc-badge-coral {
background: var(--wc-coral-100);
color: var(--wc-coral-500);
}
.wc-badge-gold {
background: var(--wc-gold-100);
color: var(--wc-gold-500);
}
.wc-badge-success {
background: var(--wc-success-bg);
color: var(--wc-success);
}
.wc-badge-warning {
background: var(--wc-warning-bg);
color: var(--wc-warning);
}
.wc-badge-error {
background: var(--wc-error-bg);
color: var(--wc-error);
}
/* --- Input ---
Standard text input styling.
Usage:
*/
.wc-input {
font-family: var(--wc-font-body);
font-size: var(--wc-text-sm);
color: var(--wc-text-primary);
background: var(--wc-bg-white);
border: 1px solid var(--wc-border);
border-radius: var(--wc-radius-md);
padding: var(--wc-space-2) var(--wc-space-3);
min-height: var(--wc-input-md);
width: 100%;
transition: border-color var(--wc-transition-fast),
box-shadow var(--wc-transition-fast);
}
.wc-input::placeholder {
color: var(--wc-text-muted);
}
.wc-input:focus {
outline: none;
border-color: var(--wc-border-focus);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.wc-input:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--wc-bg-subtle);
}
/* --- Typography Utilities --- */
.wc-font-body { font-family: var(--wc-font-body); }
.wc-font-display { font-family: var(--wc-font-display); }
.wc-font-a11y { font-family: var(--wc-font-a11y); }
.wc-font-mono { font-family: var(--wc-font-mono); }
.wc-heading-1 {
font-family: var(--wc-font-display);
font-size: var(--wc-text-5xl);
font-weight: var(--wc-font-extrabold);
line-height: var(--wc-leading-5xl);
letter-spacing: var(--wc-tracking-tight);
color: var(--wc-text-primary);
}
.wc-heading-2 {
font-family: var(--wc-font-display);
font-size: var(--wc-text-4xl);
font-weight: var(--wc-font-bold);
line-height: var(--wc-leading-4xl);
letter-spacing: var(--wc-tracking-tight);
color: var(--wc-text-primary);
}
.wc-heading-3 {
font-family: var(--wc-font-display);
font-size: var(--wc-text-3xl);
font-weight: var(--wc-font-bold);
line-height: var(--wc-leading-3xl);
color: var(--wc-text-primary);
}
.wc-heading-4 {
font-family: var(--wc-font-display);
font-size: var(--wc-text-2xl);
font-weight: var(--wc-font-semibold);
line-height: var(--wc-leading-2xl);
color: var(--wc-text-primary);
}
.wc-body {
font-family: var(--wc-font-body);
font-size: var(--wc-text-base);
font-weight: var(--wc-font-normal);
line-height: var(--wc-leading-normal);
color: var(--wc-text-primary);
}
.wc-body-sm {
font-family: var(--wc-font-body);
font-size: var(--wc-text-sm);
font-weight: var(--wc-font-normal);
line-height: var(--wc-leading-normal);
color: var(--wc-text-secondary);
}
.wc-caption {
font-family: var(--wc-font-body);
font-size: var(--wc-text-xs);
font-weight: var(--wc-font-medium);
line-height: var(--wc-leading-tight);
color: var(--wc-text-muted);
text-transform: uppercase;
letter-spacing: var(--wc-tracking-wider);
}
/* --- Layout Utilities --- */
.wc-container {
width: 100%;
max-width: var(--wc-container-xl);
margin-left: auto;
margin-right: auto;
padding-left: var(--wc-space-4);
padding-right: var(--wc-space-4);
}
@media (min-width: 640px) {
.wc-container {
padding-left: var(--wc-space-6);
padding-right: var(--wc-space-6);
}
}
@media (min-width: 1024px) {
.wc-container {
padding-left: var(--wc-space-8);
padding-right: var(--wc-space-8);
}
}
.wc-prose {
max-width: var(--wc-container-prose);
}
.wc-section {
padding-top: var(--wc-space-16);
padding-bottom: var(--wc-space-16);
}
@media (min-width: 768px) {
.wc-section {
padding-top: var(--wc-space-24);
padding-bottom: var(--wc-space-24);
}
}
/* --- Focus Ring Utility ---
Usage: Add .wc-focus-ring to any interactive element that needs
a visible focus indicator.
*/
.wc-focus-ring:focus-visible {
outline: var(--wc-focus-ring);
outline-offset: var(--wc-focus-ring-offset);
}
/* --- Screen Reader Only ---
Visually hidden but accessible to screen readers.
*/
.wc-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}