/* ============================================================ WEDAI · WEDDING SITE — design tokens [v3 · brass light + steel dark] LIGHT (default): warm cream field, real brass. Wedding-elegant, not vendor-kitsch. DARK ([data-theme="dark"]): the v2 "screen is the star" near-black + cool steel. Fonts: Rubik (display) + Heebo (body/label). Contemporary Hebrew, no Bible serif. RTL Hebrew. ============================================================ */ :root { /* --- fonts (shared across both themes) --- */ --font-display: 'Rubik', system-ui, sans-serif; /* big confident heads */ --font-sans: 'Heebo', system-ui, sans-serif; /* body */ --font-label: 'Heebo', system-ui, sans-serif; /* kickers, nav, buttons */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* latin LED bits */ --font-serif: var(--font-display); /* legacy alias */ /* ============================================================ PRIMITIVES — the palette, declared ONCE (alias pass 2026-07-17). Two ground sets: --lt-* (warm cream / brass) and --dk-* (near-black, the Structure-B black-ground values, real gold kept). Nothing in the site consumes these directly; the SEMANTIC layer below (and the data-bg ground blocks in site.css) alias into them. The THEME station (king) edits THESE, one write moves every scope. ============================================================ */ /* --- light ground (R2: warm ivory + near-black + tobacco accent) --- The accent is sampled from the Moroccan Desert master, not chosen from a generic wedding-gold palette. One write moves every scope. */ --lt-bg: #f4f1ea; /* page, warm ivory */ --lt-bg-2: #faf7f0; /* raised surface */ --lt-bg-3: #fffdf8; /* cards, near-white warm */ --lt-border: #e2dacd; /* thin rules */ --lt-border-soft: #ece5da; --lt-ink: #14110d; /* headline / strong, near-black */ --lt-ink-2: #524a3f; /* body */ --lt-ink-3: #746c60; /* supporting, AA on ivory */ --lt-ink-muted: #71685a; /* labels, fine print, AA on ivory */ --lt-gold: #8f3f18; /* tobacco primary (desert-derived) */ --lt-gold-soft: #b86230; /* lifted tobacco */ --lt-gold-deep: #5e2709; /* deep tobacco */ /* --- dark ground (Structure-B black sections; real gold, not steel) --- */ --dk-bg: #0a0a0b; --dk-bg-2: #111113; --dk-bg-3: #161619; --dk-border: #242428; --dk-border-soft: #1b1b1e; --dk-ink: #f5f4f1; --dk-ink-2: #bdbdba; --dk-ink-3: #86868a; --dk-ink-muted: #918b80; --dk-gold: #c2703a; /* ember, the tobacco accent lifted for black grounds */ --dk-gold-soft: #d98a4e; --dk-gold-deep: #7c3d16; /* --- shared primitives (same on both grounds) --- */ --bg-screen: #0a0a0b; /* inside LED frames — a screen stays dark */ --white: #f5f4f1; /* light type ON dark screens — stays light */ --spark: #7fa6bd; /* cool steel, LED signal */ --spark-dim: #4a6674; /* ============================================================ SEMANTIC — what the site consumes. Defaults alias the light ground; site.css data-bg blocks remap these same names to the other primitive set per section. Palette lives above, once. ============================================================ */ --bg: var(--lt-bg); --bg-2: var(--lt-bg-2); --bg-3: var(--lt-bg-3); --border: var(--lt-border); --border-soft: var(--lt-border-soft); --ink: var(--lt-ink); --ink-2: var(--lt-ink-2); --ink-3: var(--lt-ink-3); --ink-muted: var(--lt-ink-muted); --gold: var(--lt-gold); --gold-soft: var(--lt-gold-soft); --gold-deep: var(--lt-gold-deep); --ember: var(--gold); /* --- opacity ladder (DevG text-fade steps) --- */ --text-op-full: 1; --text-op-strong: 0.82; --text-op-soft: 0.64; --text-op-faint: 0.46; /* ============================================================ TEXT THEMES (named, per-breakpoint — text-themes pass 2026-07-17). Each ladder step is a THEME owning six tokens: -min (mobile size, the clamp floor), -max (desktop size, the clamp ceiling), -lh, -fw, -ls, -face (aliases a font primitive). The --fs-* sizes are DERIVED below — edit the theme, never the clamp. Hero defaults = the live Structure-B values (the old .hero-b override, folded in). ============================================================ */ --tt-kicker-min: 11px; --tt-kicker-max: 13px; --tt-kicker-lh: 1.6; --tt-kicker-fw: 500; --tt-kicker-ls: 0.06em; --tt-kicker-face: var(--font-label); --tt-body-sm-min: 14px; --tt-body-sm-max: 15px; --tt-body-sm-lh: 1.6; --tt-body-sm-fw: 400; --tt-body-sm-ls: 0em; --tt-body-sm-face: var(--font-sans); --tt-body-min: 16px; --tt-body-max: 18px; --tt-body-lh: 1.6; --tt-body-fw: 400; --tt-body-ls: 0em; --tt-body-face: var(--font-sans); --tt-lead-min: 18px; --tt-lead-max: 23px; --tt-lead-lh: 1.6; --tt-lead-fw: 400; --tt-lead-ls: 0em; --tt-lead-face: var(--font-sans); --tt-h-sm-min: 21px; --tt-h-sm-max: 28px; --tt-h-sm-lh: 1.6; --tt-h-sm-fw: 600; --tt-h-sm-ls: -0.01em; --tt-h-sm-face: var(--font-display); --tt-h-md-min: 27px; --tt-h-md-max: 42px; --tt-h-md-lh: 1.6; --tt-h-md-fw: 600; --tt-h-md-ls: -0.01em; --tt-h-md-face: var(--font-display); --tt-h-lg-min: 32px; --tt-h-lg-max: 62px; --tt-h-lg-lh: 1.08; --tt-h-lg-fw: 700; --tt-h-lg-ls: -0.015em; --tt-h-lg-face: var(--font-display); --tt-hero-min: 40px; --tt-hero-max: 96px; --tt-hero-lh: 1.0; --tt-hero-fw: 800; --tt-hero-ls: -0.02em; --tt-hero-face: var(--font-display); /* --- type scale (fluid, DERIVED from the themes above) --- */ --fs-kicker: clamp(var(--tt-kicker-min), 1vw, var(--tt-kicker-max)); --fs-body-sm: clamp(var(--tt-body-sm-min), 1.2vw, var(--tt-body-sm-max)); --fs-body: clamp(var(--tt-body-min), 1.3vw, var(--tt-body-max)); --fs-lead: clamp(var(--tt-lead-min), 1.8vw, var(--tt-lead-max)); --fs-h-sm: clamp(var(--tt-h-sm-min), 2.4vw, var(--tt-h-sm-max)); --fs-h-md: clamp(var(--tt-h-md-min), 3.4vw, var(--tt-h-md-max)); --fs-h-lg: clamp(var(--tt-h-lg-min), 4.8vw, var(--tt-h-lg-max)); --fs-hero: clamp(var(--tt-hero-min), 6.4vw, var(--tt-hero-max)); /* --- spacing --- */ --sp-xs: 8px; --sp-sm: 16px; --sp-md: 24px; --sp-lg: 48px; --sp-xl: 80px; --sp-2xl: 120px; --sp-3xl: 160px; /* --- rhythm --- */ --maxw: 1280px; --pad-inline: clamp(20px, 6vw, 108px); --radius: 14px; --radius-sm: 9px; --section-pad-y: clamp(76px, 12vh, 150px); /* --- motion (motion pass 2026-07-17): every transition duration in site.css runs through calc(Xs * var(--motion-scale)), so ONE token scales the whole site's motion. 1 = authored, 0 = instant (doubles as a reduce-motion kill), 2 = half speed. --ease = the one curve. --- */ --ease: cubic-bezier(.22,.61,.36,1); --motion-scale: 1; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ===== DARK THEME — v2 "the screen is the star", unchanged ===== */ [data-theme="dark"] { --bg: #0a0a0b; --bg-2: #111113; --bg-3: #161619; --bg-screen: #060607; --border: #242428; --border-soft: #1b1b1e; --white: #f5f4f1; --spark: #7fa6bd; --spark-dim: #4a6674; --ink: #f5f4f1; --ink-2: #bdbdba; --ink-3: #86868a; --ink-muted: #57575c; /* legacy gold aliases remapped to the cool system */ --gold: var(--ink-3); --gold-soft: var(--white); --gold-deep: var(--border); --ember: var(--spark); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink-2); font-family: var(--tt-body-face); font-size: var(--fs-body); font-weight: var(--tt-body-fw); line-height: var(--tt-body-lh); direction: rtl; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background calc(.3s * var(--motion-scale)) var(--ease), color calc(.3s * var(--motion-scale)) var(--ease); } img, video, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(166,124,53,0.22); color: var(--ink); } [data-theme="dark"] ::selection { background: rgba(127,166,189,0.30); color: var(--ink); }