/* ===================================================================== TOKENS.CSS — Single source of truth for design tokens Loaded BEFORE every other stylesheet (see base.html ). Palette: Luxury Editorial — "Nero e Magenta CMYK" Direction: high-contrast black/off-white, deep ink-like magenta, confident negative space, typographic hierarchy. ===================================================================== */ /* --------------------------------------------------------------------- LOCAL FONT — Baskervville (blog editorial serif, self-hosted) Geist + Italiana are loaded via Google Fonts in base.html. --------------------------------------------------------------------- */ @font-face { font-family: 'Baskervville'; src: url('../fonts/Baskerville/Baskervville-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Baskervville'; src: url('../fonts/Baskerville/Baskervville-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 400 700; font-style: italic; font-display: swap; } /* ===================================================================== CSS RESET — minimal, opinionated baseline ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, video, svg, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ===================================================================== DESIGN TOKENS ===================================================================== */ :root { /* ================================================================= BRAND PALETTE — 6 named values ================================================================= */ --nero: #0A0A0A; --avorio: #FAF8F5; --magenta: #C2185B; --magenta-chiaro: #E91E63; --grigio: #8C8C8C; --tortora: #E8E4DF; /* Legacy aliases — mapped onto the new palette so existing component CSS continues to work without mass find-replace. */ --primary-black: var(--nero); --primary-white: var(--avorio); --magenta-dark: #8b1538; --magenta-light: var(--magenta-chiaro); --magenta-subtle: #e8b4c8; --magenta-ultra-light: #F9EEF2; /* Supporting */ --charcoal: #151515; --light-gray: var(--avorio); --medium-gray: var(--grigio); --border-light: var(--tortora); --border-magenta: rgba(194, 24, 91, 0.18); /* Text */ --text-primary: var(--nero); --text-secondary: #2A2A2A; --text-light: var(--grigio); --text-on-magenta: var(--avorio); /* ================================================================= SEMANTIC COLOR ALIASES ================================================================= */ --color-surface: var(--avorio); --color-surface-alt: #F2EEEA; --color-surface-footer: var(--avorio); --color-surface-footer-elevated: var(--tortora); --color-surface-inverse: var(--nero); --color-surface-elevated: var(--avorio); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-light); --color-text-inverse: var(--avorio); --color-text-on-accent: var(--text-on-magenta); --color-border: var(--tortora); --color-border-strong: rgba(10, 10, 10, 0.12); --color-border-accent: var(--border-magenta); --rule-magenta: 1px solid var(--magenta); --color-accent: var(--magenta); --color-accent-strong: var(--magenta-chiaro); --color-accent-deep: var(--magenta-dark); --color-accent-tint: #F9EEF2; --color-on-accent: var(--text-on-magenta); --color-hairline-light: rgba(250, 248, 245, 0.10); --color-hairline-dark: rgba(10, 10, 10, 0.08); /* Overlay scale — replaces all scattered rgba hardcodes */ --overlay-black-heavy: rgba(10, 10, 10, 0.40); --overlay-black-strong: rgba(10, 10, 10, 0.75); --overlay-black-dim: rgba(10, 10, 10, 0.60); --overlay-black-medium: rgba(10, 10, 10, 0.50); --overlay-black-light: rgba(10, 10, 10, 0.40); --overlay-black-low: rgba(10, 10, 10, 0.30); --overlay-black-subtle: rgba(10, 10, 10, 0.15); --overlay-black-faint: rgba(10, 10, 10, 0.06); --overlay-white-strong: rgba(250, 248, 245, 0.90); --overlay-white-dim: rgba(250, 248, 245, 0.70); --overlay-white-medium: rgba(250, 248, 245, 0.60); --overlay-white-low: rgba(250, 248, 245, 0.20); --overlay-white-subtle: rgba(250, 248, 245, 0.30); --overlay-white-faint: rgba(250, 248, 245, 0.10); --overlay-accent-opaque: rgba(194, 24, 91, 0.88); --overlay-accent-dark: rgba(194, 24, 91, 0.70); --overlay-accent-half: rgba(194, 24, 91, 0.50); --overlay-accent-low: rgba(194, 24, 91, 0.30); --overlay-accent-strong: rgba(194, 24, 91, 0.35); --overlay-accent-medium: rgba(194, 24, 91, 0.18); --overlay-accent-subtle: rgba(194, 24, 91, 0.08); /* Magenta-dark cinematic stops — article hero gradient */ --overlay-magenta-dark-opaque: rgba(139, 21, 56, 0.92); --overlay-magenta-dark-dense: rgba(139, 21, 56, 0.88); /* Status */ --color-danger: #C62828; --color-danger-bg: #FFF5F5; --color-danger-border: #FFCDD2; --color-success: #2E7D32; --color-success-bg: #F1F8F1; --color-success-border: #C8E6C9; --color-warning: #F57F17; --color-warning-bg: #FFFDE7; --color-warning-border: #FFECB3; --color-info: #1565C0; --color-info-bg: #E3F2FD; --color-info-border: #BBDEFB; /* ================================================================= GRADIENTS ================================================================= */ --gradient-magenta: linear-gradient(135deg, var(--magenta), var(--magenta-chiaro)); --gradient-black: linear-gradient(180deg, var(--nero), var(--charcoal)); --gradient-subtle: linear-gradient(135deg, var(--avorio), var(--tortora)); /* ================================================================= TYPOGRAPHY ================================================================= */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Italiana', Georgia, 'Times New Roman', serif; --font-display-weight: 500; --font-display-stroke: 0.025em; --font-display-stroke-color: currentColor; --page-hero-title-size: clamp(2.25rem, 5vw, 3.25rem); --page-hero-title-tracking: 0.06em; --baskervville: 'Baskervville', 'Baskerville', 'Times New Roman', serif; --font-primary: var(--font-sans); --font-secondary: var(--font-sans); --font-blog: var(--baskervville); --font-prose: var(--baskervville); /* ================================================================= TYPE SCALE — rem based, fluid at the top end ================================================================= */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: clamp(1.75rem, 3vw, 2.25rem); --text-3xl: clamp(2.25rem, 5vw, 3.5rem); --text-4xl: clamp(2.75rem, 6vw, 4.5rem); --text-5xl: clamp(3rem, 8vw, 7rem); /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.8; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-label: 0.15em; --tracking-widest: 0.2em; /* ================================================================= SPACING — 4px base grid ================================================================= */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 3.5rem; --space-10: 4rem; --space-12: 5rem; --space-14: 6rem; --space-16: 8rem; --space-20: 10rem; --section-padding: clamp(4rem, 10vw, 10rem); --section-padding-sm: clamp(3rem, 7vw, 6rem); --home-section-padding: clamp(2.5rem, 5vw, 4.5rem); --home-section-gap: var(--space-8); /* ================================================================= RADIUS ================================================================= */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-card: 0; --radius-pill: 999px; --radius-circle: 50%; --font-body: var(--font-sans); /* ================================================================= SHADOWS — refined, less magenta glow, more depth ================================================================= */ --shadow-subtle: 0 2px 8px rgba(10, 10, 10, 0.05); --shadow-medium: 0 4px 20px rgba(10, 10, 10, 0.07); --shadow-strong: 0 8px 40px rgba(10, 10, 10, 0.10); --shadow-magenta: 0 4px 20px rgba(194, 24, 91, 0.12); --shadow-magenta-strong: 0 8px 40px rgba(194, 24, 91, 0.20); --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04); --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.05); --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.07); --shadow-lg: 0 18px 48px rgba(10, 10, 10, 0.10); --shadow-xl: 0 30px 70px rgba(10, 10, 10, 0.14); /* ================================================================= MOTION ================================================================= */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-fast: 0.2s; --duration-base: 0.35s; --duration-slow: 0.6s; --duration-slower: 0.9s; --transition-base: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, opacity var(--duration-fast) ease; /* ================================================================= LAYOUT ================================================================= */ --navbar-height: 64px; --content-max-width: 1440px; /* Breakpoint reference (mobile-first, use min-width): xs: 320px sm: 480px md: 768px lg: 1024px xl: 1280px 2xl: 1536px 3xl: 2560px */ /* ================================================================= CONTAINERS ================================================================= */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-2xl: 1320px; /* ================================================================= TOUCH TARGET — WCAG 2.5.8 ================================================================= */ --touch-target: 44px; /* ================================================================= LEGACY SPACING ALIASES --s* → --space-* (8px base grid from .cursorrules) ================================================================= */ --s1: var(--space-2); /* 8px */ --s2: var(--space-4); /* 16px */ --s3: var(--space-5); /* 24px */ --s4: var(--space-6); /* 32px */ --s6: var(--space-8); /* 48px */ --s8: var(--space-10); /* 64px */ --s12: var(--space-14); /* 96px */ } /* ===================================================================== RESPONSIVE UTILITIES ===================================================================== */ .sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .responsive-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }