/* ========================================================================== Zinda Law Group · design tokens The single source of truth for colour, type, space, shape and motion. Every page (homepage, Brand Fundamentals) reads these. Never hard-code. Layers (atomic): 1. Primitives – the six brand colours from the Brand Guidelines (July 2026) 2. Scales – neutrals and blue tints derived from primitives (color-mix) 3. Roles – what a colour is for (surface, text, line, action…) 4. Semantic – system states (success, warning, danger, info) 5. Type, space, shape, elevation, motion One base colour = one line. Variants are derived, never re-typed. ========================================================================== */ :root{ /* 1 · Primitives (Brand Guidelines p.12) -------------------------------- */ --zinda-blue:#175C7C; /* signature blue · logo mark, links, primary action */ --harbor:#15455D; /* deep blue · hover, secondary dark surfaces */ --midnight:#0A2E3E; /* darkest blue · dark sections, footer */ --umber:#2F241D; /* warm near-black · headlines and body text */ --sand:#DBD6C6; /* warm stone · panels, portrait backdrops */ --ivory:#F9F7F0; /* paper · page background */ --white:#FFFFFF; /* cards and fields on ivory */ /* 2 · Scales ---------------------------------------------------------- */ /* Warm neutrals: umber mixed into ivory */ --n-50: color-mix(in srgb, var(--umber) 3%, var(--ivory)); --n-100:color-mix(in srgb, var(--umber) 7%, var(--ivory)); --n-200:color-mix(in srgb, var(--umber) 14%, var(--ivory)); --n-300:color-mix(in srgb, var(--umber) 26%, var(--ivory)); --n-400:color-mix(in srgb, var(--umber) 42%, var(--ivory)); --n-500:color-mix(in srgb, var(--umber) 58%, var(--ivory)); --n-600:color-mix(in srgb, var(--umber) 76%, var(--ivory)); /* tuned: ≥4.5:1 on sand */ --n-700:color-mix(in srgb, var(--umber) 84%, var(--ivory)); --n-800:color-mix(in srgb, var(--umber) 93%, var(--ivory)); --n-900:var(--umber); /* Blue tints: signature blue mixed into ivory */ --b-50: color-mix(in srgb, var(--zinda-blue) 5%, var(--ivory)); --b-100:color-mix(in srgb, var(--zinda-blue) 12%, var(--ivory)); --b-200:color-mix(in srgb, var(--zinda-blue) 24%, var(--ivory)); --b-300:color-mix(in srgb, var(--zinda-blue) 45%, var(--ivory)); /* Night text: ivory mixed into midnight (for copy on dark sections) */ --night-1:var(--ivory); --night-2:color-mix(in srgb, var(--ivory) 78%, var(--midnight)); --night-3:color-mix(in srgb, var(--ivory) 62%, var(--midnight)); --night-line:color-mix(in srgb, var(--ivory) 14%, var(--midnight)); --night-card:color-mix(in srgb, var(--ivory) 5%, var(--midnight)); /* 3 · Roles ----------------------------------------------------------- */ --bg:var(--ivory); --surface:var(--white); --surface-warm:var(--sand); --surface-dark:var(--midnight); --text:var(--umber); --text-2:var(--n-700); /* body copy */ --text-mute:var(--n-600); /* labels, captions, legal */ --line:var(--n-200); /* hairlines on ivory */ --line-strong:var(--umber); /* photo frames (brand: dark frame) */ --accent:var(--zinda-blue); --action:var(--zinda-blue); --action-hover:var(--harbor); --on-action:var(--ivory); --focus:var(--zinda-blue); --selection:var(--b-200); --scrim:color-mix(in srgb, var(--midnight) 72%, transparent); --glass:color-mix(in srgb, var(--ivory) 78%, transparent); /* 4 · Semantic (one family per state: identity · text · tint · border) - */ --success:#3F8F5E; --success-text:#24603C; --success-bg:#E8F2EA; --success-border:#B5D6BF; --warning:#C98A2B; --warning-text:#81520C; --warning-bg:#F8EEDC; --warning-border:#E6C996; --danger:#B8473C; --danger-text:#8E2C22; --danger-bg:#F7E6E2; --danger-border:#E3B1A9; --info:var(--zinda-blue); --info-text:var(--harbor); --info-bg:var(--b-100); --info-border:var(--b-300); /* 5 · Type ------------------------------------------------------------ */ /* Brand: 29LT Zeyn (headers) · Quattrocento (body) · Garet (alt body / UI). Zeyn and Garet are licensed fonts; until the web licences are in place the mock uses the closest open stand-ins, Newsreader and Figtree. Swap here only. */ --font-display:"29LT Zeyn","Newsreader",Georgia,serif; --font-body:"Quattrocento",Georgia,serif; --font-ui:"Garet","Figtree",system-ui,sans-serif; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fs-display:clamp(2.9rem, 1rem + 4.6vw, 6.25rem); --fs-h1:clamp(2.6rem, 1.5rem + 4.6vw, 6rem); --fs-h2:clamp(2.2rem, 1.45rem + 3.2vw, 4.4rem); --fs-h3:clamp(1.45rem, 1.2rem + 1vw, 2.1rem); --fs-h4:clamp(1.2rem, 1.1rem + .4vw, 1.45rem); --fs-lead:clamp(1.15rem, 1.05rem + .45vw, 1.42rem); --fs-body:1.125rem; --fs-small:.98rem; --fs-label:.75rem; --fs-micro:.6875rem; --lh-tight:1.02; --lh-heading:1.1; --lh-body:1.6; --tr-display:-.025em; --tr-heading:-.015em; --tr-label:.16em; /* Space: 4px base, used for padding, gaps and rhythm */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px; --s-12:200px; --section:clamp(88px, 6vw + 56px, 168px); /* vertical section padding */ --gutter:clamp(20px, 4vw, 64px); /* page side margin */ --container:1320px; --measure:62ch; /* comfortable reading width */ /* Shape: classical and squared, like cut stone */ --r-0:0; --r-1:2px; --r-2:4px; --r-arch:999px 999px 0 0; --r-pill:999px; --frame:1.5px; /* photo frame weight */ /* Elevation: soft, warm, low */ --shadow-1:0 1px 2px color-mix(in srgb, var(--umber) 8%, transparent); --shadow-2:0 10px 30px -12px color-mix(in srgb, var(--umber) 22%, transparent); --shadow-3:0 30px 80px -30px color-mix(in srgb, var(--midnight) 45%, transparent); /* Motion: calm, never bouncy */ --ease-out:cubic-bezier(.16,1,.3,1); /* reveals, entrances */ --ease-in-out:cubic-bezier(.65,0,.35,1); /* panels, accordions */ --ease-soft:cubic-bezier(.33,1,.68,1); /* hovers */ --t-fast:180ms; --t-base:320ms; --t-slow:700ms; --t-reveal:1100ms; --stagger:70ms; /* Layers */ --z-base:1; --z-raised:10; --z-nav:100; --z-dock:110; --z-sheet:200; --z-review:300; }