/* ========================================================================= tokens.css - Design tokens for the Ruth Schindler (רות שינדלר) site. Single source for color, type, spacing, radii, z-index, shadows. Canvas reference: 1920px-wide Figma captures in _design/. Brand brown confirmed from the SVG icons + BRIEF: #5D2809. ========================================================================= */ :root { /* --------------------------------------------------------------------- COLOR PALETTE Brown scale runs light caramel -> deep brown. --------------------------------------------------------------------- */ --brown-900: #3B1F0E; /* deepest - footer wordmark, max contrast */ --brown-800: #4E2914; /* dark section backgrounds, default body text */ --brown-700: #5D2809; /* PRIMARY brand - buttons, icons, headings on cream */ --brown-600: #7A4422; /* hover / mid step */ --brown-500: #985C39; /* caramel mid-brown - hero left panel, accents */ --tan-400: #B07E55; /* warm tan accent */ --tan-300: #CBA988; /* soft tan */ --tan-200: #E4D3BE; /* light tan - dividers / lines */ --tan-100: #EFE7DB; /* alt section background */ --cream: #F6F1E9; /* PAGE background */ --cream-2: #EFE7DB; /* alt section bg (alias of tan-100) */ --white: #FFFFFF; /* cards */ /* Text */ --text: #4E2914; /* default body text on light */ --text-strong: #5D2809; /* headings on cream */ --text-muted: #7A5A41; /* secondary text */ --on-dark: #F6F1E9; /* text on brown / photo sections */ --on-dark-muted: rgba(246, 241, 233, .72); /* Structural / functional aliases (semantic names sections should prefer) */ --bg: var(--fg-paper); /* Figma page is pure white (24.09.2026) */ --bg-alt: var(--cream-2); --bg-dark: var(--brown-800); --surface: var(--white); /* cards */ --line: var(--tan-200); /* hairline dividers */ --line-strong: var(--tan-400); --accent: var(--brown-700); /* Button tokens */ --btn-bg: var(--brown-700); --btn-text: var(--cream); --btn-bg-hover: var(--brown-800); --btn-outline: var(--brown-700); /* outline color on light bg */ --btn-outline-on-dark: var(--cream); /* outline color on dark/photo bg */ /* Focus ring */ --focus-ring: 0 0 0 3px #8C4921; /* 3:1+ on white and cream */ /* --------------------------------------------------------------------- FIGMA CANVAS UNITS (added 24.09.2026) The Figma frame 1:4 is 1920px wide. --u equals 1px at 1920 and scales proportionally down to 1024px; below that sections switch to their own tablet/mobile layouts. Write desktop geometry as calc(N * var(--u)) where N is the Figma pixel value, so 1920 matches Figma exactly. --------------------------------------------------------------------- */ --u: calc(min(100vw, 1920px) / 1920); /* Figma palette (sampled from layers) */ --fg-caramel: #8C4921; /* hero + footer split panel */ --fg-brown: #5D2809; /* headings, body copy, buttons, hairlines */ --fg-ink: #36190B; /* header icons, vertical English label */ --fg-paper: #FFFFFF; /* page background in Figma */ --fg-numeral: rgba(93, 40, 9, .28); /* Malfin step numerals */ /* Figma type roles (desktop value at 1920, floor for small screens) */ --t-body: max(16px, calc(24 * var(--u))); /* Futurism Light 24 / 120% */ --t-lead: max(19px, calc(40 * var(--u))); /* Futurism Light 40 / 100% (intro) */ --t-h2: max(38px, calc(96 * var(--u))); /* Futurism Bold 96 / 74% */ --t-h1: max(56px, calc(128 * var(--u))); /* Futurism Regular 128 / 66% */ --t-card-h: max(22px, calc(36 * var(--u))); /* Futurism Bold 36 */ --t-display: max(64px, calc(160 * var(--u))); /* Malfin Regular 160 */ --t-small: max(14px, calc(20 * var(--u))); /* Futurism Regular 20 (credits) */ --lh-body-fg: 1.2; --lh-h2-fg: 0.74; /* --------------------------------------------------------------------- TYPOGRAPHY Hebrew => Futurism (300/400/700). English/Latin display => Malfin. clamp() scale tuned to a 1920px canvas; min values protect mobile. --------------------------------------------------------------------- */ --font-heb: 'Futurism', 'Arial Hebrew', 'David', sans-serif; --font-display: 'Malfin', Georgia, 'Times New Roman', serif; /* alias kept for any section author who reaches for --font-en */ --font-en: var(--font-display); --fw-light: 300; --fw-reg: 400; --fw-bold: 700; /* Fluid type scale - min @ ~375px viewport, max @ ~1920px */ --fs-300: clamp(0.78rem, 0.74rem + 0.18vw, 0.9rem); /* fine print / kicker */ --fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* body small */ --fs-500: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* BODY (17-20px) */ --fs-600: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem); /* lead / card title */ --fs-700: clamp(1.6rem, 1.35rem + 1.2vw, 2.5rem); /* h3 / sub-headings */ --fs-800: clamp(2.1rem, 1.6rem + 2.4vw, 3.75rem); /* h2 section titles */ --fs-900: clamp(2.8rem, 1.9rem + 4.4vw, 6rem); /* hero / display */ --fs-mega: clamp(3.4rem, 1.5rem + 9vw, 11rem); /* footer wordmark, big numerals */ /* Line-heights */ --lh-tight: 1.08; /* display headings */ --lh-heading: 1.2; --lh-body: 1.8; /* generous Hebrew body leading */ /* Letter-spacing (English labels / kickers) */ --ls-label: 0.18em; --ls-wide: 0.28em; /* --------------------------------------------------------------------- SPACING SCALE (4px base) --------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ /* Section vertical rhythm (padding-block) */ --section-py: clamp(4rem, 9vw, 8.125rem); /* 64 -> 130 */ /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container: 1200px; /* default content width */ --container-wide: 1440px; /* full-bleed-ish sections (hero, process, footer) */ --container-pad: clamp(1.25rem, 5vw, 2.5rem); /* side padding 20 -> 40 */ --header-h: 84px; /* sticky header height (anchor scroll offset) */ /* --------------------------------------------------------------------- RADII --------------------------------------------------------------------- */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px; /* buttons, stadium / pill media */ --r-circle: 50%; --r-arch: 999px 999px 32px 32px / 320px 320px 32px 32px; /* arch: rounded top */ /* --------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(59, 31, 14, .08); --shadow-md: 0 12px 32px rgba(59, 31, 14, .12); --shadow-lg: 0 24px 60px rgba(59, 31, 14, .18); --shadow-card: 0 18px 48px rgba(59, 31, 14, .16); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms; /* --------------------------------------------------------------------- Z-INDEX LAYERS --------------------------------------------------------------------- */ --z-base: 0; --z-decor: 1; /* decorative rings / sparkles behind content */ --z-content: 2; --z-header: 100; --z-overlay: 900; /* full-screen menu backdrop */ --z-menu: 1000; /* menu panel above backdrop */ --z-top: 1100; /* skip link, toasts */ }