/* ========================================================================= FUTUROX · Design Tokens Colors, type, spacing, radii, shadows, motion. -------------------------------------------------------------------------- Fonts are loaded from Google Fonts (substitution — see README §5.2). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&display=swap'); :root { /* ----------------------------------------------------------------------- COLOR — 60 / 30 / 10 system • BASE (60%) bone #F5F1EA — dominant page background • SECUNDARIO(30%) ink #0A1230 — contrast sections, footer • ACENTO (10%) coral #FF6B35 — CTAs, links, highlights Use ONLY these three families + their opacity variants. ----------------------------------------------------------------------- */ /* Ink — secondary, deep navy */ --ink-900: #0A1230; --ink-800: #131B45; --ink-700: #1E2858; --ink-500: #3A4470; --ink-300: #8A93B5; /* Coral — accent (10% max coverage) */ --coral-600: #E85A24; --coral-500: #FF6B35; --coral-300: #FFA483; --coral-100: #FFE3D4; /* Bone — base background */ --bone-50: #F5F1EA; --bone-100: #ECE6D8; --bone-200: #DED6C2; --paper: #FFFFFF; /* Semantic — muted, only used when strictly necessary */ --success: #3F7D58; --warning: #C28A2B; --danger: #B33A3A; /* ----------------------------------------------------------------------- COLOR — semantic aliases Use these in components; never the raw tokens. ----------------------------------------------------------------------- */ --bg: var(--bone-50); --bg-card: var(--bone-100); --bg-paper: var(--paper); --bg-ink: var(--ink-900); --fg: var(--ink-900); --fg-muted: var(--ink-500); --fg-soft: var(--ink-300); --fg-on-ink: var(--bone-50); --fg-on-ink-mut:#A8B0CA; --accent: var(--coral-500); --accent-hover: var(--coral-600); --accent-soft: var(--coral-100); --border: var(--bone-200); --border-ink: var(--ink-700); --border-strong:var(--ink-900); /* ----------------------------------------------------------------------- TYPE — families. Two only: • DISPLAY (expressive) — Instrument Serif. Italic, h1/h2 of impact. • SANS (primary) — Inter Tight. Body, nav, UI, eyebrows. `--font-mono` is kept as an alias for backwards compat — it points to the sans, so any old `font-family: var(--font-mono)` callsite reads as Inter Tight (uppercase + tracking still gives it the "label" feel). ----------------------------------------------------------------------- */ --font-display: "Instrument Serif", "Times New Roman", Georgia, serif; --font-sans: "Inter Tight", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: var(--font-sans); /* ----------------------------------------------------------------------- TYPE — scale (desktop). Mobile overrides at the bottom of this file. ----------------------------------------------------------------------- */ /* Display (editorial serif, italic) */ --fs-display-xl: 9rem; /* 144px */ --fs-display-lg: 6rem; /* 96px */ --fs-display-md: 4rem; /* 64px */ --fs-display-sm: 2.75rem; /* 44px */ --lh-display-xl: 0.95; --lh-display-lg: 1.0; --lh-display-md: 1.05; --lh-display-sm: 1.1; --tracking-display: -0.02em; /* Sans (UI) */ --fs-h1: 3rem; /* 48px */ --fs-h2: 2.25rem; /* 36px */ --fs-h3: 1.5rem; /* 24px */ --fs-h4: 1.25rem; /* 20px */ --fs-body-lg: 1.25rem; /* 20px */ --fs-body: 1.0625rem; /* 17px */ --fs-body-sm: 0.9375rem; /* 15px */ --fs-caption: 0.8125rem; /* 13px */ --lh-h: 1.15; --lh-body: 1.6; --lh-tight: 1.25; /* Eyebrow (mono, uppercase, tracked) */ --fs-eyebrow: 0.8125rem; /* 13px */ --tracking-eyebrow:0.12em; /* ----------------------------------------------------------------------- SPACING — 8pt scale (with one off-grid 12px) ----------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 10rem; /* 160px */ --max-w: 1280px; --max-w-read: 680px; --gutter: 6rem; /* 96px desktop outer margin */ /* ----------------------------------------------------------------------- RADII ----------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-full: 999px; /* ----------------------------------------------------------------------- SHADOWS ----------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(11, 23, 51, 0.04), 0 1px 1px rgba(11, 23, 51, 0.03); --shadow-2: 0 12px 32px -16px rgba(11, 23, 51, 0.18), 0 4px 8px -4px rgba(11, 23, 51, 0.06); /* ----------------------------------------------------------------------- MOTION ----------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-micro: 240ms; --dur-content: 480ms; --dur-hero: 720ms; } /* ========================================================================= SEMANTIC ELEMENTS — apply tokens to bare HTML so a fresh page already reads as FUTUROX without per-element classes. ========================================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Editorial display headings (use class .display for any element) */ .display, .display-xl, .display-lg, .display-md, .display-sm { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: var(--tracking-display); color: var(--fg); margin: 0; text-wrap: balance; } .display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); } .display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); } .display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); } .display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); } /* Sans headings */ h1, .h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h); letter-spacing: -0.01em; margin: 0; text-wrap: balance; } h2, .h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h); letter-spacing: -0.005em; margin: 0; text-wrap: balance; } h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-tight); margin: 0; } h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-tight); margin: 0; } p { margin: 0 0 var(--space-4) 0; text-wrap: pretty; } .lede, p.lede { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--fg); } .muted { color: var(--fg-muted); } .soft { color: var(--fg-soft); } /* Eyebrow — mono, uppercase, tracked. Used above titles. */ .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-muted); display: inline-flex; align-items: center; gap: var(--space-2); } .eyebrow.on-ink { color: var(--coral-300); } /* Section number (the "01 · " opener) */ .section-num { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } /* Links */ a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: rgba(11, 23, 51, 0.18); transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); } a:hover { border-bottom-color: var(--accent); color: var(--accent); } /* Mono utility — same as sans now; kept so existing `.mono` callsites work */ code, .mono { font-family: var(--font-sans); font-size: 0.95em; letter-spacing: 0; } /* ========================================================================= RESPONSIVE — clamp display sizes on smaller viewports ========================================================================= */ @media (max-width: 900px) { :root { --fs-display-xl: 4.5rem; /* 72 */ --fs-display-lg: 3.5rem; /* 56 */ --fs-display-md: 2.5rem; /* 40 */ --fs-h1: 2rem; /* 32 */ --fs-h2: 1.625rem; /* 26 */ --gutter: 1.5rem; } }