/* ==========================================================================
BOKAJA DESIGN SYSTEM — tokens.css
"Clean Canvas, Bold Products"
Warm, inviting gallery aesthetic where colorful clipart products pop.
--------------------------------------------------------------------------
Foundation layer: design tokens, base styles, and core utilities.
Load this file first, before any component or page styles.
========================================================================== */
/* ==========================================================================
1. FONT FACES / IMPORTS
Fonts are expected to be loaded via in for performance:
Poppins (600,700), Inter (400,500,600), Pacifico, JetBrains Mono (400,500)
The @import below is a fallback for environments without preloading.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Pacifico&family=Poppins:wght@600;700&display=swap');
/* ==========================================================================
2. DESIGN TOKENS — :root
========================================================================== */
:root {
/* ----------------------------------------------------------------------
2.1 BRAND COLORS — "Creative Warm"
Raw palette values. Reference via semantic tokens below where possible.
---------------------------------------------------------------------- */
--color-coral: #FF6B6B; /* Primary — CTAs */
--color-coral-600: #F2554F; /* Primary hover/active (darker, AA on white) */
--color-coral-700: #D8423C; /* Primary pressed */
--color-coral-100: #FFE3E0; /* Tint */
--color-plum: #4A4063; /* Secondary — headers / dark sections */
--color-plum-700: #3A3250; /* Deeper plum */
--color-plum-300: #8C82A6; /* Muted plum */
--color-plum-100: #E7E3EF; /* Plum tint */
--color-gold: #FFB74D; /* Accent — badges / highlights */
--color-gold-600: #E89A2B; /* Gold hover (AA on white for text) */
--color-gold-700: #B9760F; /* Gold text-safe on light bg */
--color-gold-100: #FFEFD6; /* Gold tint */
--color-warm-white: #FFF9F5; /* Background */
--color-blush: #FFE8E8; /* Surface — cards */
--color-blush-deep: #FFDADA; /* Surface raised */
--color-charcoal: #2D2D2D; /* Text primary */
--color-warm-gray: #6B6B6B; /* Text secondary */
--color-warm-gray-light: #9A9A9A; /* Text tertiary / disabled */
--color-sage: #7CB342; /* Success */
--color-sage-700: #5A8A2C; /* Success text-safe on light bg (AA) */
--color-soft-red: #E53935; /* Error */
--color-soft-red-700: #C62828; /* Error text-safe on light bg (AA) */
--color-info: #3A8DDE; /* Info */
--color-info-700: #1F6FBF; /* Info text-safe */
--color-white: #FFFFFF;
--color-black: #000000;
/* ----------------------------------------------------------------------
2.2 SEMANTIC COLOR TOKENS (light theme — default)
Use these everywhere in components, not the raw palette above.
---------------------------------------------------------------------- */
--color-primary: var(--color-coral);
--color-primary-hover: var(--color-coral-600);
--color-primary-active: var(--color-coral-700);
--color-primary-subtle: var(--color-coral-100);
--color-on-primary: #FFFFFF; /* white on coral — AA for large/bold */
--color-secondary: var(--color-plum);
--color-secondary-hover: var(--color-plum-700);
--color-secondary-subtle: var(--color-plum-100);
--color-on-secondary: #FFFFFF; /* white on plum — AAA */
--color-accent: var(--color-gold);
--color-accent-strong: var(--color-gold-700);
--color-accent-subtle: var(--color-gold-100);
--color-on-accent: #2D2D2D; /* charcoal on gold — AA */
/* Background levels */
--color-bg: var(--color-warm-white);
--color-bg-raised: #FFFFFF;
--color-bg-sunken: #FBEFE8;
--color-bg-inverse: var(--color-plum);
/* Surface levels (cards, sheets, panels) */
--color-surface: var(--color-blush);
--color-surface-raised: var(--color-blush-deep);
--color-surface-muted: #FFF1F1;
--color-on-surface: var(--color-charcoal);
/* Text levels */
--color-text: var(--color-charcoal); /* on bg: 12.6:1 — AAA */
--color-text-secondary: var(--color-warm-gray); /* on bg: 5.1:1 — AA */
--color-text-tertiary: var(--color-warm-gray-light);
--color-text-inverse: #FFF9F5; /* on plum sections */
--color-text-link: var(--color-coral-700); /* AA on warm-white */
--color-text-link-hover: var(--color-coral-600);
/* Borders & dividers */
--color-border: #F2D9D9;
--color-border-strong: #E6C2C2;
--color-border-focus: var(--color-coral-700);
--color-divider: #F4E4E0;
/* Semantic state colors (text-safe variants for foreground use) */
--color-success: var(--color-sage);
--color-success-text: var(--color-sage-700);
--color-success-subtle: #EAF3DE;
--color-error: var(--color-soft-red);
--color-error-text: var(--color-soft-red-700);
--color-error-subtle: #FCE4E3;
--color-warning: var(--color-gold-700);
--color-warning-subtle: var(--color-gold-100);
--color-info-text: var(--color-info-700);
--color-info-subtle: #E3F0FB;
/* Overlay / scrim */
--color-overlay: rgba(45, 45, 45, 0.55);
--color-scrim: rgba(74, 64, 99, 0.40);
/* Glass surfaces */
--glass-bg: rgba(255, 255, 255, 0.55);
--glass-border: rgba(255, 255, 255, 0.65);
--glass-blur: 14px;
/* ----------------------------------------------------------------------
2.3 TYPOGRAPHY — Font families
---------------------------------------------------------------------- */
--font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-decorative: 'Pacifico', cursive;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', ui-monospace, monospace;
/* Font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ----------------------------------------------------------------------
2.4 TYPOGRAPHY — Fluid type scale (clamp: min, fluid, max)
Base 16px. Scale ~1.250 (major third) tightened for UI density.
---------------------------------------------------------------------- */
--font-size-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11 → 12 */
--font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 */
--font-size-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem); /* 13 → 14 */
--font-size-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* 15 → 16 */
--font-size-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 */
--font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18 → 22 */
--font-size-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); /* 22 → 28 */
--font-size-2xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); /* 26 → 36 */
--font-size-3xl: clamp(2rem, 1.6rem + 1.9vw, 3rem); /* 32 → 48 */
--font-size-4xl: clamp(2.5rem, 1.9rem + 2.9vw, 4rem); /* 40 → 64 */
--font-size-display: clamp(3rem, 2rem + 4.6vw, 5.5rem); /* 48 → 88 */
/* Line heights */
--line-height-tight: 1.1;
--line-height-snug: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* Letter spacing */
--letter-spacing-tighter: -0.03em;
--letter-spacing-tight: -0.015em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.02em;
--letter-spacing-wider: 0.06em;
--letter-spacing-widest: 0.12em;
/* ----------------------------------------------------------------------
2.5 SPACING SCALE — 4px base
---------------------------------------------------------------------- */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
/* ----------------------------------------------------------------------
2.6 BORDER RADIUS SCALE
---------------------------------------------------------------------- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-pill: 999px;
--radius-circle: 50%;
/* ----------------------------------------------------------------------
2.7 SHADOW / ELEVATION SCALE
Tinted with plum for a warm, cohesive depth feel.
---------------------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(74, 64, 99, 0.06);
--shadow-sm: 0 2px 6px rgba(74, 64, 99, 0.08), 0 1px 2px rgba(74, 64, 99, 0.06);
--shadow-md: 0 6px 16px rgba(74, 64, 99, 0.10), 0 2px 4px rgba(74, 64, 99, 0.06);
--shadow-lg: 0 14px 32px rgba(74, 64, 99, 0.14), 0 4px 8px rgba(74, 64, 99, 0.08);
--shadow-xl: 0 28px 60px rgba(74, 64, 99, 0.18), 0 8px 16px rgba(74, 64, 99, 0.10);
--shadow-focus: 0 0 0 3px rgba(255, 107, 107, 0.45);
--shadow-inner: inset 0 1px 3px rgba(74, 64, 99, 0.10);
/* Premium glow accents — for hover lifts, badges, and focal CTAs */
--shadow-glow-primary: 0 0 0 1px rgba(255, 107, 107, 0.18),
0 8px 24px rgba(255, 107, 107, 0.32),
0 2px 6px rgba(255, 107, 107, 0.24);
--shadow-glow-accent: 0 0 0 1px rgba(255, 183, 77, 0.20),
0 8px 24px rgba(255, 183, 77, 0.34),
0 2px 6px rgba(232, 154, 43, 0.22);
/* ----------------------------------------------------------------------
2.8 GRADIENTS
---------------------------------------------------------------------- */
--gradient-brand: linear-gradient(135deg, #FF6B6B 0%, #FFB74D 100%);
--gradient-brand-soft: linear-gradient(135deg, #FF8E8E 0%, #FFCB7D 100%);
--gradient-hero: linear-gradient(160deg, #FFF9F5 0%, #FFE8E8 55%, #FFEFD6 100%);
--gradient-plum: linear-gradient(135deg, #4A4063 0%, #3A3250 100%);
--gradient-card-overlay: linear-gradient(180deg, rgba(45, 45, 45, 0) 35%, rgba(45, 45, 45, 0.72) 100%);
--gradient-sheen: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
--gradient-profit: linear-gradient(135deg, #7CB342 0%, #A7D26A 100%);
--gradient-loss: linear-gradient(135deg, #E53935 0%, #FF7A6E 100%);
/* Multi-point radial mesh for hero / decorative backgrounds.
Soft coral, gold, and blush blooms over the warm-white base. */
--gradient-mesh:
radial-gradient(at 18% 22%, rgba(255, 107, 107, 0.22) 0px, transparent 48%),
radial-gradient(at 82% 12%, rgba(255, 183, 77, 0.20) 0px, transparent 46%),
radial-gradient(at 70% 80%, rgba(255, 142, 142, 0.16) 0px, transparent 52%),
radial-gradient(at 10% 88%, rgba(255, 203, 125, 0.14) 0px, transparent 50%);
/* ----------------------------------------------------------------------
2.9 TRANSITIONS & MOTION
---------------------------------------------------------------------- */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-instant: 80ms;
--duration-fast: 140ms;
--duration-normal: 220ms;
--duration-slow: 360ms;
--duration-slower: 600ms;
--transition-base: all var(--duration-normal) var(--ease-standard);
--transition-colors: color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
--transition-transform: transform var(--duration-normal) var(--ease-emphasized);
/* ----------------------------------------------------------------------
2.10 Z-INDEX SCALE
---------------------------------------------------------------------- */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-header: 1200;
--z-overlay: 1300;
--z-drawer: 1400;
--z-modal: 1500;
--z-popover: 1600;
--z-toast: 1700;
--z-tooltip: 1800;
--z-max: 2147483647;
/* ----------------------------------------------------------------------
2.11 LAYOUT — Container max-widths & section rhythm
---------------------------------------------------------------------- */
--container-xs: 30rem; /* 480 */
--container-sm: 40rem; /* 640 */
--container-md: 48rem; /* 768 */
--container-lg: 64rem; /* 1024 */
--container-xl: 75rem; /* 1200 */
--container-2xl: 87.5rem; /* 1400 */
--container-max: var(--container-xl);
--container-padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
--section-padding-y: clamp(3rem, 2rem + 5vw, 6rem);
/* Header height (for scroll-padding & sticky offsets) */
--header-height: 4.5rem;
}
/* ==========================================================================
3. DARK MODE OVERRIDES
Activated by [data-theme="dark"] on or any ancestor.
========================================================================== */
[data-theme="dark"] {
/* Brand stays vibrant; lighten for contrast on dark surfaces */
--color-primary: #FF8585;
--color-primary-hover: #FF9C9C;
--color-primary-active: #FFB3B3;
--color-primary-subtle: #3A2E33;
--color-on-primary: #2A1010;
--color-secondary: #B7AED1;
--color-secondary-hover: #CBC4DF;
--color-secondary-subtle: #2C2740;
--color-on-secondary: #1A1626;
--color-accent: #FFC36B;
--color-accent-strong: #FFD494;
--color-accent-subtle: #3A2F1E;
--color-on-accent: #2A1D08;
/* Backgrounds — deep plum-charcoal, warm-tinted */
--color-bg: #1B1722;
--color-bg-raised: #241F30;
--color-bg-sunken: #141019;
--color-bg-inverse: #FFF9F5;
/* Surfaces */
--color-surface: #2A2436;
--color-surface-raised: #332C42;
--color-surface-muted: #221D2E;
--color-on-surface: #F3EEF6;
/* Text */
--color-text: #F3EEF6; /* ~14:1 on bg */
--color-text-secondary: #C2BAD0; /* AA on bg */
--color-text-tertiary: #8C84A0;
--color-text-inverse: #2D2D2D;
--color-text-link: #FF9C9C;
--color-text-link-hover: #FFB3B3;
/* Borders */
--color-border: #3A3350;
--color-border-strong: #4A4264;
--color-border-focus: #FF9C9C;
--color-divider: #322B45;
/* States — lightened for dark bg legibility */
--color-success: #9CCC65;
--color-success-text: #B6DD8A;
--color-success-subtle: #25301A;
--color-error: #FF6F6A;
--color-error-text: #FF9C97;
--color-error-subtle: #3A1E1D;
--color-warning: #FFC36B;
--color-warning-subtle: #352A18;
--color-info-text: #8FC2F0;
--color-info-subtle: #1B2A3A;
/* Overlays & glass */
--color-overlay: rgba(10, 8, 14, 0.66);
--color-scrim: rgba(10, 8, 14, 0.55);
--glass-bg: rgba(36, 31, 48, 0.55);
--glass-border: rgba(255, 255, 255, 0.10);
/* Shadows — deeper, black-based for dark UI */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.34);
--shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.58), 0 8px 16px rgba(0, 0, 0, 0.40);
--shadow-focus: 0 0 0 3px rgba(255, 133, 133, 0.50);
/* Hero / overlay gradients retuned for dark */
--gradient-hero: linear-gradient(160deg, #1B1722 0%, #2A2436 60%, #332416 100%);
--gradient-card-overlay: linear-gradient(180deg, rgba(10, 8, 14, 0) 30%, rgba(10, 8, 14, 0.85) 100%);
/* Premium mesh + glows retuned for the dark canvas */
--gradient-mesh:
radial-gradient(at 18% 22%, rgba(255, 133, 133, 0.20) 0px, transparent 50%),
radial-gradient(at 82% 12%, rgba(255, 195, 107, 0.16) 0px, transparent 48%),
radial-gradient(at 70% 80%, rgba(183, 174, 209, 0.14) 0px, transparent 54%),
radial-gradient(at 10% 88%, rgba(255, 133, 133, 0.12) 0px, transparent 52%);
--shadow-glow-primary: 0 0 0 1px rgba(255, 133, 133, 0.24),
0 10px 30px rgba(255, 133, 133, 0.30),
0 2px 8px rgba(0, 0, 0, 0.40);
--shadow-glow-accent: 0 0 0 1px rgba(255, 195, 107, 0.26),
0 10px 30px rgba(255, 195, 107, 0.28),
0 2px 8px rgba(0, 0, 0, 0.40);
}
/* /* Dark mode is OPT-IN only via [data-theme="dark"] toggle.
Do NOT auto-trigger via prefers-color-scheme to avoid cascading override conflicts.
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { DISABLED
/* Auto dark mode disabled to prevent cascading override conflicts */
--color-primary: #FF8585;
--color-primary-hover: #FF9C9C;
--color-primary-active: #FFB3B3;
--color-primary-subtle: #3A2E33;
--color-on-primary: #2A1010;
--color-secondary: #B7AED1;
--color-secondary-hover: #CBC4DF;
--color-secondary-subtle: #2C2740;
--color-on-secondary: #1A1626;
--color-accent: #FFC36B;
--color-accent-strong: #FFD494;
--color-accent-subtle: #3A2F1E;
--color-on-accent: #2A1D08;
--color-bg: #1B1722;
--color-bg-raised: #241F30;
--color-bg-sunken: #141019;
--color-bg-inverse: #FFF9F5;
--color-surface: #2A2436;
--color-surface-raised: #332C42;
--color-surface-muted: #221D2E;
--color-on-surface: #F3EEF6;
--color-text: #F3EEF6;
--color-text-secondary: #C2BAD0;
--color-text-tertiary: #8C84A0;
--color-text-inverse: #2D2D2D;
--color-text-link: #FF9C9C;
--color-text-link-hover: #FFB3B3;
--color-border: #3A3350;
--color-border-strong: #4A4264;
--color-border-focus: #FF9C9C;
--color-divider: #322B45;
--color-success: #9CCC65;
--color-success-text: #B6DD8A;
--color-success-subtle: #25301A;
--color-error: #FF6F6A;
--color-error-text: #FF9C97;
--color-error-subtle: #3A1E1D;
--color-warning: #FFC36B;
--color-warning-subtle: #352A18;
--color-info-text: #8FC2F0;
--color-info-subtle: #1B2A3A;
--color-overlay: rgba(10, 8, 14, 0.66);
--color-scrim: rgba(10, 8, 14, 0.55);
--glass-bg: rgba(36, 31, 48, 0.55);
--glass-border: rgba(255, 255, 255, 0.10);
--gradient-hero: linear-gradient(160deg, #1B1722 0%, #2A2436 60%, #332416 100%);
--gradient-card-overlay: linear-gradient(180deg, rgba(10, 8, 14, 0) 30%, rgba(10, 8, 14, 0.85) 100%);
--gradient-mesh:
radial-gradient(at 18% 22%, rgba(255, 133, 133, 0.20) 0px, transparent 50%),
radial-gradient(at 82% 12%, rgba(255, 195, 107, 0.16) 0px, transparent 48%),
radial-gradient(at 70% 80%, rgba(183, 174, 209, 0.14) 0px, transparent 54%),
radial-gradient(at 10% 88%, rgba(255, 133, 133, 0.12) 0px, transparent 52%);
--shadow-glow-primary: 0 0 0 1px rgba(255, 133, 133, 0.24),
0 10px 30px rgba(255, 133, 133, 0.30),
0 2px 8px rgba(0, 0, 0, 0.40);
--shadow-glow-accent: 0 0 0 1px rgba(255, 195, 107, 0.26),
0 10px 30px rgba(255, 195, 107, 0.28),
0 2px 8px rgba(0, 0, 0, 0.40);
}
} */ */
/* ==========================================================================
4. MODERN RESET (scoped, minimal)
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
-webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
5. BASE STYLES — html / body
========================================================================== */
body {
min-height: 100dvh;
font-family: var(--font-body);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal);
color: var(--color-text);
background-color: var(--color-bg);
background-image: var(--gradient-hero);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none;
-webkit-font-feature-settings: "kern", "liga", "calt";
font-feature-settings: "kern", "liga", "calt";
color-scheme: light dark;
transition: background-color var(--duration-normal) var(--ease-standard),
color var(--duration-normal) var(--ease-standard);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text);
text-wrap: balance;
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
h6 {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--color-text-secondary);
}
p {
text-wrap: pretty;
max-width: 70ch;
}
/* Links */
a {
color: var(--color-text-link);
text-decoration: none;
text-underline-offset: 0.18em;
transition: var(--transition-colors);
}
a:hover {
color: var(--color-text-link-hover);
text-decoration: underline;
}
/* Media defaults */
img, picture, svg, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
/* Forms inherit type */
input, button, textarea, select {
font: inherit;
color: inherit;
}
/* Monospace contexts (file sizes, formats, dimensions) */
code, kbd, samp, pre, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
ul, ol {
padding-left: var(--space-5);
}
hr {
border: none;
border-top: 1px solid var(--color-divider);
margin-block: var(--space-6);
}
::selection {
background-color: var(--color-coral-100);
color: var(--color-charcoal);
}
[data-theme="dark"] ::selection {
background-color: var(--color-primary-subtle);
color: var(--color-text);
}
/* ==========================================================================
6. ACCESSIBILITY — focus, skip link, reduced data
========================================================================== */
:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Remove default outline only when focus-visible is supported & not active */
:focus:not(:focus-visible) {
outline: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: var(--z-max);
padding: var(--space-2) var(--space-4);
background-color: var(--color-primary);
color: var(--color-on-primary);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
transform: translateY(-150%);
transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
transform: translateY(0);
}
/* ==========================================================================
7. CORE UTILITIES
========================================================================== */
/* 7.1 Container ---------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.container--narrow { max-width: var(--container-md); }
.container--wide { max-width: var(--container-2xl); }
/* 7.2 Section rhythm ----------------------------------------------------- */
.section {
padding-block: var(--section-padding-y);
}
.section--tight { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.section--plum {
background: var(--gradient-plum);
color: var(--color-text-inverse);
}
.section--plum h1,
.section--plum h2,
.section--plum h3,
.section--plum h4,
.section--plum h5 {
color: var(--color-text-inverse);
}
/* 7.3 Brand gradient text ------------------------------------------------ */
.text-gradient {
background-image: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Fallback for browsers without background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.text-gradient { color: var(--color-primary); }
}
/* Decorative script accent */
.text-script {
font-family: var(--font-decorative);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-snug);
}
/* 7.4 Frosted glass ------------------------------------------------------ */
.glass {
background-color: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
/* Opaque fallback if backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.glass { background-color: var(--color-bg-raised); }
}
/* 7.5 Card --------------------------------------------------------------- */
.card {
background-color: var(--color-surface);
color: var(--color-on-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: clip;
transition: transform var(--duration-normal) var(--ease-emphasized),
box-shadow var(--duration-normal) var(--ease-standard);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
/* 7.6 Skeleton shimmer loading ------------------------------------------ */
.skeleton {
position: relative;
overflow: hidden;
background-color: var(--color-surface-raised);
border-radius: var(--radius-sm);
color: transparent !important;
user-select: none;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background-image: var(--gradient-sheen);
animation: skeleton-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes skeleton-shimmer {
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; }
}
/* 7.7 Badges ------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
font-family: var(--font-body);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
line-height: 1;
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
border-radius: var(--radius-pill);
white-space: nowrap;
vertical-align: middle;
}
/* Sale — coral primary, white text (bold/small = AA) */
.badge--sale {
background-color: var(--color-primary);
color: var(--color-on-primary);
}
/* New — sage success, dark text for AA */
.badge--new {
background-color: var(--color-success-subtle);
color: var(--color-success-text);
}
/* Bestseller — gold accent, charcoal text (AA) */
.badge--bestseller {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
/* Neutral / category */
.badge--neutral {
background-color: var(--color-secondary-subtle);
color: var(--color-secondary);
}
/* 7.8 Pill / chip helpers ------------------------------------------------ */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-pill);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
}
/* 7.9 Misc helpers ------------------------------------------------------- */
.elevate-sm { box-shadow: var(--shadow-sm); }
.elevate-md { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.muted { color: var(--color-text-secondary); }
.center { text-align: center; }
.flow > * + * { margin-block-start: var(--space-4); }
.no-scroll { overflow: hidden; }