/* ============================================================ AniFind — Colors & Type Source of truth for foundational tokens. Toggle theme via class on : .theme-light / .theme-dark ============================================================ */ /* ---------- Fonts ---------- */ /* Montserrat + DM Sans + Inter + Instrument Serif loaded via Google Fonts in index.html */ /* ---------- Global tokens (theme-agnostic) ---------- */ :root { --score-gold: #FFAD49; } /* ---------- Theme: Light (default) ---------- */ :root, .theme-light { --bg-base: #FAF8F4; --bg-surface: #F3F0EA; --bg-elevated: #EDEAE2; --border-subtle: #E2DDD4; --border-strong: #CEC8BB; --text-primary: #1E1B16; --text-secondary: #584F43; --text-muted: #73695B; --accent: #5C4F3D; --accent-text: #FAF8F4; --success-bg: #E8F4E8; --success-text: #2D6A2D; --nsfw-dot: #C0392B; --focus-ring: var(--accent); --skeleton: var(--bg-elevated); } /* ---------- Theme: Dark ---------- */ .theme-dark { --bg-base: #05070B; --bg-surface: #0D1118; --bg-elevated: #151B24; --border-subtle: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --text-primary: #F8FAFC; --text-secondary: #C8D0DC; --text-muted: #8B96A8; --accent: #F05A4A; --accent-text: #FFFFFF; --nav-bg: rgba(9,12,18,0.82); --hero-fade: rgba(5,7,11,0.96); --success-bg: #102B1D; --success-text: #78D89A; --nsfw-dot: #F0526F; --focus-ring: var(--accent); --skeleton: var(--bg-elevated); } /* ---------- Type ---------- */ :root { --font-sans: "Montserrat", "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; /* Weights — capped at 500 per brand rules */ --fw-regular: 400; --fw-medium: 500; /* Sizes (rem assumes 16px base) */ --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-44: 2.75rem; --fs-64: 4rem; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; } /* ---------- Shape ---------- */ :root { --unit: 4px; --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; --radius-badge: 6px; --radius-card: 12px; --radius-pill: 9999px; --border-width: 0.5px; } /* ---------- Motion ---------- */ :root { /* Spring tuning lives in JS (Framer Motion). CSS fallback for reduced-motion + simple transitions: */ --dur-fast: 150ms; --dur-base: 200ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Spring presets (documentation, used by JS) */ --spring-micro: "stiffness: 450, damping: 32"; --spring-page: "stiffness: 220, damping: 26"; } /* ---------- Element defaults ---------- */ html, body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---------- Semantic type roles ---------- */ .display { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-64); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .wordmark { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: var(--tracking-tight); } .h1 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-32); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .h2 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .h3 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-20); line-height: var(--lh-snug); } .body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: var(--lh-normal); } .body-sm { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--text-secondary); } .label { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-13); line-height: var(--lh-snug); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); } .caption { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--text-muted); } /* ---------- Focus ring (global) ---------- */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: inherit; } /* ---------- Skeleton pulse ---------- */ @keyframes anifind-skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1.0; } } .skeleton { background: var(--skeleton); border-radius: var(--radius-card); animation: anifind-skeleton-pulse 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.75; } }