/* ========================================================================== privée 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 privée's OWN identity substituted in (spec: docs/DESIGN.md). Accent is "Argent" #c4cedb — 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 "Nuit" #0b0f1a 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(11, 15, 26, 1); /* Nuit #0b0f1a - page background */ --color-bg-surface: rgba(18, 24, 38, 1); /* Ardoise #121826 - cards, panels */ --color-bg-elevated: rgba(27, 35, 53, 1); /* #1b2335 - 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(38, 47, 67, 1); /* Filet #262f43 - subtle borders */ --color-border-strong: rgba(61, 72, 96, 1); /* #3d4860 - outlined buttons */ --color-border-hover: rgba(196, 206, 219, 1); /* Argent - accent borders on hover */ /* ====================== COLORS — Text ====================== */ --color-text-primary: rgba(242, 244, 248, 1); /* Brume #f2f4f8 - headings, primary text */ --color-text-secondary: rgba(201, 208, 220, 1); /* #c9d0dc - body copy, descriptions */ --color-text-muted: rgba(152, 163, 183, 1); /* Pierre #98a3b7 - secondary info (about 7:1 on nuit) */ --color-text-faint: rgba(122, 133, 154, 1); /* #7a859a - fine print only, never for content */ /* The accent is light enough to read as text on nuit (about 11:1). */ --color-text-accent: rgba(196, 206, 219, 1); /* Argent #c4cedb - links, small accent text */ /* ====================== COLORS — Accent / Interactive ====================== */ --color-accent: rgba(196, 206, 219, 1); /* Argent #c4cedb - primary accent */ --color-accent-hover: rgba(221, 228, 238, 1); /* #dde4ee - hover state (lighter on dark) */ --color-accent-active: rgba(154, 166, 184, 1); /* #9aa6b8 - active/pressed */ --color-accent-subtle: rgba(196, 206, 219, 0.15); /* Argent @ 15% - subtle backgrounds */ /* ====================== COLORS — CTA / Conversion ====================== */ /* Argent button, ink label: #0d1220 on #c4cedb is about 11:1 (AA/AAA). Hover darkens slightly (network rule for filled buttons). */ --color-cta-bg: rgba(196, 206, 219, 1); /* Argent - CTA button background */ --color-cta-bg-hover: rgba(170, 182, 199, 1); /* #aab6c7 - CTA hover, darkened */ --color-cta-text: rgba(13, 18, 32, 1); /* Encre #0d1220 */ /* ====================== COLORS — Model status + badges (privée-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(91, 42, 86, 1); /* Prune #5b2a56 - "Hot deal" */ --color-badge-deal-text: rgba(244, 228, 242, 1); /* #f4e4f2 */ --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(5, 8, 15, 0.97); /* age gate full-viewport backdrop (nuit-tinted) */ --color-bg-footer: rgba(8, 11, 20, 1); /* #080b14 - footer ground, darker than the page */ /* Look tiles — cool one-way gradients from DESIGN.md (2-up mobile; ethnicity filter pages, shown only when >= 8 live). */ --gradient-look-asiatique: linear-gradient(160deg, #2a3148 0%, #121826 70%); --gradient-look-blanche: linear-gradient(160deg, #2b2f3c 0%, #121826 70%); --gradient-look-latine: linear-gradient(160deg, #3a3350 0%, #121826 70%); --gradient-look-ebene: linear-gradient(160deg, #222a3a 0%, #121826 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(11, 15, 26, 0.85); /* nuit @ 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: 'Bodoni Moda', Georgia, 'Times New Roman', serif; /* headlines, logo, model names */ --font-family-body: 'DM Sans', -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 — Filet 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(196, 206, 219, 0.3); /* silver 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 */ }