/* Extracted from Rautstein-Website.html design bundle. Do not hand-edit token values. */
/* ============================================================
RAUTSTEIN DESIGN SYSTEM — Foundations
Luxury-minimal private-wealth brand · champagne gold + warm ink
Russian-first (Cyrillic), serif display + clean sans body
------------------------------------------------------------
Fonts loaded via Google Fonts (Cyrillic subsets):
Cormorant Garamond (display serif) + Manrope (UI/body sans).
See README "Typography" — swap to self-hosted TTF in /fonts
for production/offline use.
============================================================ */
:root {
/* ============================================================
DARK THEME — midnight navy + coral red (matches schkola-finansov.de)
Surfaces are deep navy, text is near-white, the single saturated
brand colour is a warm coral red used for emphasis words, bullets,
active states and primary CTAs.
------------------------------------------------------------
PRIMARY vocabulary (use these in new code): --navy-*, --coral-*,
--text-*, plus the semantic aliases below. The legacy names
(--ink, --cream, --gold, …) are kept as aliases so existing
components keep working — see mapping.
============================================================ */
/* surfaces (deep → raised) — blue-navy scale derived from #142B60 */
--navy-deep: #081231; /* darkest bands / section contrast */
--navy-bg: #0B1A40; /* page background */
--navy-card: #122550; /* card / panel surface */
--navy-raise: #1A3162; /* raised card, inputs, hover (~#142B60 family) */
--steel: #2D4A8A; /* slate buttons, strong borders */
--navy-line: #21376B; /* hairline border on dark */
/* text (light) */
--text-hi: #F3F6FB; /* headings / primary */
--text: #C7D0E0; /* body */
--text-mut: #8A95A9; /* muted / captions */
--text-faint: #5C6680; /* disabled / faintest */
/* accent — vivid red */
--coral: #FC3D4F; /* primary accent */
--coral-bright:#FF5563; /* hover / accent text on dark (contrast) */
--coral-soft: #FF818B; /* light tint — highlights */
--coral-deep: #D62436; /* pressed */
/* ---------- LEGACY ALIASES (warm names → dark values) ---------- */
--ink: var(--text-hi); /* was near-black text → now light text */
--ink-soft: #E4EAF3;
--espresso: var(--text); /* secondary text */
--taupe: var(--text-mut); /* muted */
--stone: var(--text-faint); /* faint / dashed borders */
--cream: var(--navy-bg); /* page background */
--paper: var(--navy-card); /* card surface */
--paper-2: var(--navy-raise); /* input / raised surface */
--line: var(--navy-line); /* hairline */
--line-soft: #16244C; /* faintest divider */
--gold: var(--coral); /* accent */
--gold-deep: var(--coral-bright); /* coral text/icons on dark */
--gold-soft: var(--coral-soft); /* light coral highlight */
--gold-tint: rgba(252, 61, 79, 0.15); /* wash — chips, hover fills */
--gold-grad: linear-gradient(135deg, #FF818B 0%, #FC3D4F 52%, #D62436 100%);
--gold-sheen: linear-gradient(110deg, #FF8A93 0%, #FF5563 35%, #FC3D4F 62%, #D62436 100%);
/* ---------- SEMANTIC ---------- */
--bg: var(--navy-bg);
--fg: var(--text-hi);
--fg-2: var(--text);
--fg-3: var(--text-mut);
--accent: var(--coral);
--on-accent: #FFFFFF; /* white on coral */
--on-dark: #EAF0F8; /* text on the deepest bands */
--on-dark-2: #97A2B7; /* muted text on dark bands */
--positive: #5FBE82; /* growth / success */
--danger: #F2705C; /* error / form invalid */
/* ---------- TYPE FAMILIES ---------- */
--serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
--sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'SFMono-Regular', 'Cascadia Mono', ui-monospace, monospace;
/* ---------- TYPE SCALE (fluid) ---------- */
--t-display: clamp(2.5rem, 1.3rem + 4.4vw, 4.5rem); /* hero serif */
--t-h1: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
--t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
--t-h3: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
--t-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* intro paragraph */
--t-body: 1.0625rem; /* 17px base body */
--t-small: 0.9375rem;
--t-eyebrow: 0.78rem; /* uppercase letterspaced label */
/* ---------- SPACING (8pt-ish, generous luxe rhythm) ---------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px; --sp-11: 180px;
--section-y: clamp(64px, 9vw, 160px); /* vertical breathing per section */
--gutter: clamp(20px, 5vw, 88px); /* page horizontal padding */
--maxw: 1280px; /* content max width */
/* ---------- RADII — restrained, near-square luxe ---------- */
--r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
/* ---------- SHADOWS — deep, for a dark UI ---------- */
--sh-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30);
--sh-md: 0 12px 30px -12px rgba(0,0,0,0.55);
--sh-lg: 0 32px 64px -24px rgba(0,0,0,0.66);
--sh-gold: 0 14px 34px -14px rgba(252,61,79,0.50);
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* signature soft settle */
--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 180ms; --dur: 340ms; --dur-slow: 720ms;
}
/* ============================================================
ELEMENT DEFAULTS / SEMANTIC CLASSES
============================================================ */
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-size: var(--t-body);
line-height: 1.65;
font-weight: 400;
letter-spacing: 0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.display, h1, h2, h3 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: balance;
}
.display { font-size: var(--t-display); font-weight: 500; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.12; }
h4, .h4 {
font-family: var(--sans);
font-size: var(--t-h4);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
.lead {
font-size: var(--t-lead);
line-height: 1.55;
color: var(--fg-2);
font-weight: 400;
text-wrap: pretty;
}
p { text-wrap: pretty; }
.eyebrow {
font-family: var(--sans);
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--gold-deep);
}
/* italic serif accent — used for emphasised words in headlines */
.accent-italic { font-style: italic; font-weight: 500; color: var(--gold-deep); }
/* champagne metallic text fill — for hero numerals / key words */
.metal {
background: var(--gold-sheen);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
a { color: var(--gold-deep); text-decoration: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::selection { background: var(--gold-soft); color: var(--ink); }