/* ========================================================================== boudoir Frontend — Design Tokens Single source of truth for the entire frontend UI. /css/tokens-theme.css (symlink → frontend/tokens.css) 2026-10-08: structural token schema shared across the network, with boudoir's OWN identity substituted in (spec: docs/DESIGN.md). Accent is "Champagne" #d9c7a3 — a NEUTRAL, deliberately not a saturated hue, so it collides with none of the network's accents (honey, amber, peach, orange, rose, violet, ...). Background is a warm "Espresso" #0e0b0a instead of the network's cool #08080c — same dark-only rule, warmer tone (badmilfs.top set the precedent for a tinted dark). All component files reference these variables. No hardcoded colors, spacing, or sizes in component files. ========================================================================== */ :root { /* ====================== COLORS — Base ====================== */ --color-white: rgba(255, 255, 255, 1); /* ====================== COLORS — Surface & Background ====================== */ --color-bg-primary: rgba(14, 11, 10, 1); /* Espresso #0e0b0a - page background */ --color-bg-surface: rgba(23, 18, 15, 1); /* Cocoa #17120f - cards, panels */ --color-bg-elevated: rgba(33, 26, 22, 1); /* #211a16 - hover states, raised elements */ --color-bg-subtle: rgba(255, 255, 255, 0.05); /* Chip/stat backgrounds inside cards */ --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Overlay backdrops */ /* ====================== COLORS — Border ====================== */ --color-border: rgba(46, 37, 32, 1); /* Line #2e2520 - subtle borders */ --color-border-strong: rgba(74, 61, 51, 1); /* #4a3d33 - outlined buttons */ --color-border-hover: rgba(217, 199, 163, 1); /* Champagne - accent borders on hover */ /* ====================== COLORS — Text ====================== */ --color-text-primary: rgba(241, 233, 223, 1); /* Ivory #f1e9df - headings, primary text */ --color-text-secondary: rgba(205, 191, 177, 1); /* #cdbfb1 - body copy, descriptions */ --color-text-muted: rgba(169, 154, 140, 1); /* Stone #a99a8c - secondary info (about 7:1 on espresso) */ --color-text-faint: rgba(125, 111, 99, 1); /* #7d6f63 - fine print only, never for content */ /* The accent is light enough to read as text on espresso (about 11:1). */ --color-text-accent: rgba(217, 199, 163, 1); /* Champagne #d9c7a3 - links, small accent text */ /* ====================== COLORS — Accent / Interactive ====================== */ --color-accent: rgba(217, 199, 163, 1); /* Champagne #d9c7a3 - primary accent */ --color-accent-hover: rgba(232, 218, 188, 1); /* #e8dabc - hover state (lighter on dark) */ --color-accent-active: rgba(185, 167, 127, 1); /* #b9a77f - active/pressed */ --color-accent-subtle: rgba(217, 199, 163, 0.15); /* Champagne @ 15% - subtle backgrounds */ /* ====================== COLORS — CTA / Conversion ====================== */ /* Champagne button, ink label: #1a1410 on #d9c7a3 is about 11:1 (AA/AAA). Hover darkens slightly (network rule for filled buttons). */ --color-cta-bg: rgba(217, 199, 163, 1); /* Champagne - CTA button background */ --color-cta-bg-hover: rgba(201, 182, 143, 1); /* #c9b68f - CTA hover, darkened */ --color-cta-text: rgba(26, 20, 16, 1); /* Ink #1a1410 */ /* ====================== COLORS — Model status + badges (boudoir-specific) ====================== */ --color-status-free: rgba(127, 184, 143, 1); /* #7fb88f - free chat */ --color-status-private: rgba(217, 163, 95, 1); /* #d9a35f - private show */ --color-status-members: rgba(183, 154, 214, 1); /* #b79ad6 - members only */ --color-badge-deal-bg: rgba(122, 46, 59, 1); /* Wine #7a2e3b - "Hot deal" */ --color-badge-deal-text: rgba(251, 233, 234, 1); /* #fbe9ea */ --color-info: #3b82f6; /* informational state — blue (alerts, hover highlights) */ --color-info-subtle: rgba(59, 130, 246, 0.1); --color-info-border: rgba(59, 130, 246, 0.2); --color-warning: #f59e0b; /* warning state — amber (alerts, badges) */ --color-warning-subtle: rgba(245, 158, 11, 0.1); --color-warning-border: rgba(245, 158, 11, 0.2); --color-success: #22c55e; /* success state — green (alerts, badges) */ --color-success-subtle: rgba(34, 197, 94, 0.1); --color-success-border: rgba(34, 197, 94, 0.2); --color-danger: #ef4444; /* error/danger state — red (alerts, badges) */ --color-danger-subtle: rgba(239, 68, 68, 0.1); --color-danger-border: rgba(239, 68, 68, 0.2); /* ====================== COLORS — Overlays ====================== */ --color-overlay-dark: rgba(0, 0, 0, 0.92); /* lightbox backdrop, end-screen overlay */ --color-overlay-age-gate: rgba(8, 6, 5, 0.97); /* age gate full-viewport backdrop (espresso-tinted) */ --color-bg-footer: rgba(10, 8, 7, 1); /* #0a0807 - footer ground, darker than the page */ /* Look tiles — warm one-way gradients from DESIGN.md (2-up mobile). */ --gradient-look-asian: linear-gradient(160deg, #3a2a24 0%, #17120f 70%); --gradient-look-white: linear-gradient(160deg, #2d2a2e 0%, #17120f 70%); --gradient-look-latina: linear-gradient(160deg, #47301f 0%, #17120f 70%); --gradient-look-ebony: linear-gradient(160deg, #2b2018 0%, #17120f 70%); /* ====================== COLORS — White Opacity Variants ====================== */ --color-white-04: rgba(255, 255, 255, 0.04); /* search suggestion divider */ --color-white-08: rgba(255, 255, 255, 0.08); /* age gate card border */ --color-white-10: rgba(255, 255, 255, 0.1); /* spinner track */ --color-white-50: rgba(255, 255, 255, 0.5); /* muted on-dark text (close button) */ --color-white-65: rgba(255, 255, 255, 0.65); /* lightbox counter, photo viewer labels */ --color-white-75: rgba(255, 255, 255, 0.75); /* gallery card count */ --color-white-90: rgba(255, 255, 255, 0.9); /* close button hover */ --color-black-75: rgba(0, 0, 0, 0.75); /* card content overlay gradient */ --color-bg-primary-fade: rgba(14, 11, 10, 0.85); /* espresso @ 85% - bottom fade on model cards */ /* ====================== TYPOGRAPHY — Font Families Self-host both families (woff2 under /fonts, font-display: swap, preload the two used above the fold). No Google Fonts request at runtime. ====================== */ --font-family-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* headlines, logo, model names */ --font-family-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* body + UI */ --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-family-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace; /* ====================== TYPOGRAPHY — Font Sizes ====================== */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 2.875rem; /* 46px - mobile hero */ --text-6xl: 4.5rem; /* 72px - desktop hero */ /* ====================== TYPOGRAPHY — Font Weights ====================== */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ====================== TYPOGRAPHY — Line Heights ====================== */ --leading-display: 1.02; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ====================== SPACING ====================== */ --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* ====================== BORDER RADIUS ====================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px - model cards */ --radius-3xl: 1.125rem; /* 18px - desktop cards */ --radius-full: 9999px; /* pill shape - buttons, chips, badges */ /* ====================== SIZING ====================== */ --size-focus-ring: 3px; /* focus outline thickness */ --size-tap-target: 44px; /* minimum touch target */ --size-button-height: 48px; /* pill button height (mobile) */ --width-container: 1200px; /* max-width for main container */ --width-sidebar: 350px; /* fixed sidebar width */ --width-sidebar-mobile: 100%; /* sidebar width on mobile */ --content-max-width-prose: 680px; /* static page content (privacy, about) */ --content-max-width-modal: 440px; /* age-gate card, modal dialogs */ --card-min-width: 210px; /* model grid: auto-fill minmax(var(--card-min-width), 1fr) on wide screens */ --card-aspect: 3 / 4; /* portrait cards */ /* ====================== SHADOWS ====================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6); --shadow-ring-accent: 0 0 0 3px rgba(217, 199, 163, 0.3); /* champagne accent ring */ --shadow-modal: 0 32px 64px rgba(0, 0, 0, 0.6); /* age-gate card — large floating modal */ --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.45); /* search dropdown panel */ /* ====================== TRANSITIONS ====================== */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-normal: 0.25s ease; --transition-slow: 0.3s ease-out; /* ====================== LAYOUT ====================== */ --header-height: 56px; /* ====================== Z-INDEX SCALE ====================== */ --z-dropdown: 100; --z-header: 200; --z-sidebar: 200; --z-overlay: 300; --z-modal: 400; --z-tooltip: 500; --z-age-gate: 9999; /* full-viewport age verification gate — must be above everything */ }