/* ===================================================================== GENERATION 22 — SINGLE SOURCE OF TRUTH --------------------------------------------------------------------- Palette locked from the brand reference (gen22-henna.vercel.app): purple #432980, yellow #fcc708, ink #1a1a1a, canvas #e5e5e5. Everything else (type scale, spacing, radius, shadow, motion) is a deliberate senior system — restrained, modular, one language each. This file MUST load first (before style.css and any skin CSS). Legacy token names from the old henna/studio/senior skins are aliased to the canon at the bottom, so existing selectors keep working while the conflicting :root redefinitions get stripped out of the skins. Do NOT redefine any --g22-* primitive anywhere else. Add, never fork. ===================================================================== */ :root { /* --- CANON PALETTE (colors only, from brand reference) ------------ */ --g22-purple: #432980; /* brand primary */ --g22-purple-hot: #533599; /* hover / lighter */ --g22-purple-deep: #35205f; /* depth: footer, dark panels */ --g22-purple-08: rgba(67, 41, 128, 0.08); --g22-purple-14: rgba(67, 41, 128, 0.14); --g22-purple-24: rgba(67, 41, 128, 0.24); --g22-purple-64: rgba(67, 41, 128, 0.64); --g22-yellow: #fcc708; /* accent — FILL/BG ONLY, never text on light */ --g22-yellow-hot: #ffd633; /* hover */ --g22-ink: #1a1a1a; /* body + heading text */ --g22-ink-soft: rgba(26, 26, 26, 0.68); /* ≥0.72 ≈ 4.5:1+ on #e5e5e5 for 12px caps (was 0.45 ≈ 2.7:1) */ --g22-ink-mute: rgba(26, 26, 26, 0.72); --g22-canvas: #e5e5e5; /* page background (brand grey) */ --g22-paper: #f5f5f5; /* raised soft surface */ --g22-card: #ffffff; /* card / input surface */ --g22-line: #d8d8d8; /* hairline / border */ --g22-line-soft: rgba(0, 0, 0, 0.08); --g22-on-dark: #ffffff; /* text on purple / dark */ --g22-on-purple: #ffffff; --g22-on-yellow: #1a1a1a; /* yellow needs dark text for AA */ --g22-success: #2f8f4e; --g22-error: #d4183d; /* --- TYPE ---------------------------------------------------------- */ /* Two families only. Manrope carries display+body; IBM Plex Mono is the editorial label/eyebrow/timecode voice. Newsreader + Prompt are retired (they never actually loaded). */ --g22-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --g22-font-body: var(--g22-font-display); --g22-font-label: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Modular scale (~1.25). Six steps. No per-section improvisation. */ --g22-fs-display: clamp(2.75rem, 5.4vw, 3.75rem); /* shared page hero H1 */ /* Shared inner-page hero (vartist / faq / study / about / kontakty …). */ --g22-hero-kicker-size: 0.72rem; --g22-hero-kicker-tracking: 0.16em; --g22-hero-kicker-dash-w: 18px; --g22-hero-kicker-dash-h: 3px; --g22-hero-title: var(--g22-fs-display); --g22-hero-title-lh: 1.04; --g22-hero-title-ls: -0.035em; --g22-hero-title-max: 18ch; --g22-hero-summary-max: 54ch; --g22-hero-summary-lh: 1.65; --g22-hero-summary-size: clamp(1rem, 1.4vw, 1.2rem); /* Shared page-hero photo card (study / eksternat / about / kontakty / den). */ --g22-hero-media-radius: 20px; --g22-hero-media-ratio: 4 / 3; --g22-hero-media-ratio-narrow: 16 / 10; --g22-hero-media-shadow: 0 24px 60px rgba(26, 26, 26, 0.14); --g22-fs-h1: clamp(2rem, 4vw, 3rem); --g22-fs-h2: clamp(1.6rem, 3vw, 2.25rem); --g22-fs-h3: clamp(1.25rem, 2vw, 1.5rem); --g22-fs-lede: clamp(1.0625rem, 1.5vw, 1.25rem); --g22-fs-body: 1.0625rem; --g22-fs-small: 0.875rem; --g22-fs-label: 0.75rem; /* mono, uppercase, tracked */ --g22-lh-tight: 1.08; --g22-lh-head: 1.15; --g22-lh-body: 1.6; --g22-tracking-label: 0.14em; /* --- SPACING (8pt base) ------------------------------------------- */ /* Distance from sticky taste-nav to first yellow kicker / page intro. */ --g22-below-nav: clamp(72px, 9vw, 96px); --g22-space-1: 4px; --g22-space-2: 8px; --g22-space-3: 12px; --g22-space-4: 16px; --g22-space-5: 24px; --g22-space-6: 32px; --g22-space-7: 48px; --g22-space-8: 64px; --g22-space-9: 96px; --g22-space-10: 128px; --g22-section-y: clamp(64px, 10vw, 140px); /* vertical rhythm between sections */ --g22-container: 1120px; /* wide content */ --g22-measure: 720px; /* text column max */ --g22-gutter: clamp(20px, 5vw, 48px); /* side padding */ /* --- RADIUS (one language) ---------------------------------------- */ --g22-r-sm: 8px; --g22-r-md: 12px; --g22-r-lg: 20px; --g22-r-xl: 28px; --g22-r-pill: 999px; /* --- SHADOW (single ladder, ink-based, subtle) -------------------- */ --g22-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06); --g22-shadow-md: 0 8px 24px rgba(26, 26, 26, 0.08); --g22-shadow-lg: 0 20px 48px rgba(26, 26, 26, 0.12); --g22-shadow-none: none; /* --- MOTION -------------------------------------------------------- */ --g22-ease: cubic-bezier(0.16, 1, 0.30, 1); /* enter / spring-out */ --g22-ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* standard */ --g22-dur-quick: 160ms; --g22-dur-std: 320ms; --g22-dur-slow: 620ms; /* ================================================================== LEGACY ALIASES — map every old skin token onto the canon above. Removing the conflicting :root blocks in the skin files lets these win. Kill an alias only after its callers are migrated to canon. ================================================================== */ /* brand color aliases */ --g22-be-violet: var(--g22-purple); --g22-be-violet-04: rgba(67, 41, 128, 0.04); --g22-be-violet-08: var(--g22-purple-08); --g22-be-violet-14: var(--g22-purple-14); --g22-be-violet-24: var(--g22-purple-24); --g22-be-violet-64: var(--g22-purple-64); --g22-be-yellow: var(--g22-yellow); --g22-be-white: var(--g22-card); --g22h-purple: var(--g22-purple); --g22-purple-hover: var(--g22-purple-hot); --g22-btn-purple: var(--g22-purple); --g22-btn-purple-hot: var(--g22-purple-hot); --g22-btn-yellow: var(--g22-yellow); --g22-btn-yellow-hot: var(--g22-yellow-hot); --g22-btn-ink: var(--g22-ink); --g22-nav-purple: var(--g22-purple); --g22-nav-purple-hot: var(--g22-purple-hot); --g22-nav-yellow: var(--g22-yellow); --g22-nav-ink: var(--g22-ink); /* neutral / surface aliases (kill the teal + pure-black forks) */ --g22-color-ink: var(--g22-ink); --g22-color-accent: var(--g22-purple); --g22-color-accent-hover: var(--g22-purple-hot); --g22-color-accent-active: var(--g22-purple-deep); --g22-color-accent-soft: var(--g22-purple-08); --g22-color-body: var(--g22-ink-soft); --g22-color-body-strong: var(--g22-ink); --g22-color-muted: var(--g22-ink-mute); --g22-color-muted-soft: var(--g22-ink-mute); --g22-color-canvas: var(--g22-canvas); --g22-color-canvas-soft: var(--g22-paper); --g22-color-canvas-deep: var(--g22-purple-deep); --g22-color-surface-card: var(--g22-card); --g22-color-surface-strong: var(--g22-paper); --g22-color-hairline: var(--g22-line); --g22-color-hairline-soft: var(--g22-line-soft); --g22-color-hairline-strong: var(--g22-line); --g22-color-signal: var(--g22-yellow); --g22-color-signal-hover: var(--g22-yellow-hot); --g22-color-on-accent: var(--g22-on-purple); --g22-color-on-dark: var(--g22-on-dark); --g22-color-link: var(--g22-ink); --g22-color-link-hover: var(--g22-purple); --g22-color-success: var(--g22-success); --g22-color-error: var(--g22-error); --g22-ink-soft-legacy: var(--g22-ink-soft); /* font aliases */ --g22-font-serif: var(--g22-font-display); /* was Newsreader (never loaded) */ /* radius / shadow aliases */ --g22-radius-sm: var(--g22-r-sm); --g22-radius-md: var(--g22-r-md); --g22-radius-lg: var(--g22-r-lg); --g22-radius-pill: var(--g22-r-pill); --g22-btn-radius: var(--g22-r-pill); --g22h-radius-md: var(--g22-r-md); --g22h-radius-lg: var(--g22-r-lg); --radius-pill: var(--g22-r-pill); --g22-shadow-card: var(--g22-shadow-sm); --g22-shadow-lift: var(--g22-shadow-md); --g22-shadow-float: var(--g22-shadow-lg); } /* Canvas + base text, applied once, system-wide. */ html { background: var(--g22-canvas); } body { background: var(--g22-canvas); color: var(--g22-ink); font-family: var(--g22-font-body); font-size: var(--g22-fs-body); line-height: var(--g22-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }