/* ────────────────────────────────────────────────────────────── Illusion Design Studio — Foundations Colors + Typography tokens ────────────────────────────────────────────────────────────── */ /* Fonty ładowane w stron przez partials/head-fonts.html (preconnect + link) */ :root { /* ── Brand neutrals ─────────────────────────────────────────── */ --ink: #0F0E0C; /* logo black; primary text on light */ --ink-2: #2A2723; /* secondary text on light */ --ink-3: #5C564E; /* tertiary / metadata */ --ink-4: #8A8378; /* muted / placeholder */ --bone: #F4F0EA; /* primary canvas (warm off-white) */ --paper: #FAF7F2; /* secondary surface, lighter */ --linen: #ECE5DA; /* subtle hover / divider tint */ --stone: #D9D1C2; /* card edge / 2nd surface */ --plaster: #C8BFB1; /* mid neutral */ /* ── Accents (used sparingly, like fabric swatches) ─────────── */ --walnut: #5A3E2B; /* primary wood tone */ --clay: #B85C3E; /* terracotta — primary accent */ --clay-soft: #E5C0AE; /* tinted clay for surfaces */ --sage: #6B7B5C; /* secondary accent */ --brass: #B0935C; /* metallic / highlight */ --ochre: #D4A24C; /* warm yellow */ /* ── Semantic ───────────────────────────────────────────────── */ --bg: var(--bone); --bg-elevated: var(--paper); --bg-sunken: var(--linen); --fg: var(--ink); --fg-muted: var(--ink-3); --fg-subtle: var(--ink-4); --border: #DCD3C2; --border-strong:#0F0E0C; --accent: var(--clay); --accent-fg: #FFFFFF; /* ── Type scale ─────────────────────────────────────────────── */ --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; /* Brand display treatment — Plus Jakarta Sans is set extra-tight for the dense, drafted feel of the wordmark. Apply via `.brand-display` or the variable below. */ --brand-tracking: -0.055em; --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-overline: 0.6875rem; /* 11 */ --fs-caption: 0.75rem; /* 12 */ --fs-small: 0.875rem; /* 14 */ --fs-body: 1rem; /* 16 */ --fs-lead: 1.125rem; /* 18 */ --fs-h6: 1.25rem; /* 20 */ --fs-h5: 1.5rem; /* 24 */ --fs-h4: 2rem; /* 32 */ --fs-h3: 2.75rem; /* 44 */ --fs-h2: 3.75rem; /* 60 */ --fs-h1: 5.5rem; /* 88 */ --fs-display: 8.5rem; /* 136 */ --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.14em; --leading-tight: 0.95; --leading-snug: 1.05; --leading-body: 1.5; --leading-loose: 1.7; /* ── Spacing scale (4px base) ───────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; /* ── Radii ──────────────────────────────────────────────────── */ --r-0: 0px; /* hard architectural edges (default) */ --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 14px; --r-pill: 999px; --r-circle: 50%; /* ── Shadow / elevation ─────────────────────────────────────── */ --shadow-1: 0 1px 0 rgba(15,14,12,0.04), 0 1px 2px rgba(15,14,12,0.05); --shadow-2: 0 2px 4px rgba(15,14,12,0.06), 0 8px 16px rgba(15,14,12,0.05); --shadow-3: 0 8px 16px rgba(15,14,12,0.08), 0 24px 48px rgba(15,14,12,0.08); --shadow-inset: inset 0 0 0 1px var(--border); --shadow-architectural: 1px 1px 0 var(--ink); /* offset-flat */ /* ── Motion ─────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.6, 0.05, 0.2, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ } /* ── Base / element styles ──────────────────────────────────── */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display, h1.display, .brand-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--leading-tight); letter-spacing: var(--brand-tracking); } /* Headings inherit Plus Jakarta + tight tracking by default. */ h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--leading-tight); letter-spacing: var(--brand-tracking); margin: 0; } h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--leading-snug); letter-spacing: var(--brand-tracking); margin: 0; } h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: var(--leading-snug); letter-spacing: -0.04em; margin: 0; } h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.15; letter-spacing: var(--tracking-snug); margin: 0; } h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: 1.25; letter-spacing: var(--tracking-snug); margin: 0; } h6 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h6); line-height: 1.3; margin: 0; } .editorial, .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0; } .overline { font-family: var(--font-body); font-size: var(--fs-overline); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); } p, .body { font-size: var(--fs-body); line-height: var(--leading-body); } .lead { font-size: var(--fs-lead); line-height: var(--leading-loose); color: var(--ink-2); } .small { font-size: var(--fs-small); } .caption { font-size: var(--fs-caption); color: var(--fg-muted); } .mono { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: -0.01em; } /* Link convention */ a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--clay); }