/* ========================================================================== Corporate Projukti — Redesign :: Token layer Loaded BEFORE every other redesign stylesheet. Page CSS must never redefine a token here; it may only consume them. Brand colours are sampled from public/assets/images/logo.png: brand-1 #0B6B33 the banner green brand-2 #58C878 the light face of the green diamond, brightened brand-3 #6B3FA0 the purple diamond (ambient support hue only) ========================================================================== */ :root { /* ---- Brand ---------------------------------------------------------- */ --brand-1: #0B6B33; --brand-1-rgb: 11, 107, 51; --brand-2: #58C878; --brand-2-rgb: 88, 200, 120; --brand-3: #6B3FA0; --brand-3-rgb: 107, 63, 160; --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2)); /* Mid-tone that clears the contrast floor against BOTH canvases: 4.07:1 on the light bg, 4.66:1 on the dark one. It is the safe end for a gradient that has to stay legible in either theme. */ --brand-mid: #2E8B52; /* Gradient used as a button fill under white text. The bright accent would put white at 2.11:1, so the range stops at a deeper green where white still measures 5.07:1. */ --grad-btn: linear-gradient(135deg, var(--brand-1), #157F41); /* ---- Spacing scale — 4px base --------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 8px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-17: 68px; --sp-21: 84px; --sp-24: 96px; /* ---- Radii ---------------------------------------------------------- */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-tag: 6px; --r-pill: 999px; /* ---- Layout --------------------------------------------------------- */ /* Three tiers, not one. --shell-max stays the default so every existing page is unaffected; the other two are opt-in via .rd-shell-narrow / .rd-shell-wide (see layout-v2.css). */ --shell-narrow: 760px; --shell-max: 1180px; --shell-wide: 1420px; --gutter: 24px; /* ---- Motion — ONE curve for the whole page --------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur: .32s; --t: var(--dur) var(--ease); --dur-bloom: .45s; --dur-bracket: .35s; /* ---- Z-index -------------------------------------------------------- */ --z-ambient: 0; --z-shell: 1; --z-cell-glow: 0; --z-cell-content: 1; --z-cell-bracket: 2; --z-topbar: 20; /* ---- Type ----------------------------------------------------------- */ --ff-display: 'Space Grotesk', 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace; --fs-hero: clamp(2.6rem, 7vw, 3.0rem); --fs-section: clamp(1.6rem, 3.1vw, 2.15rem); --fs-card: 1.32rem; --fs-body: 14.6px; --lh-body: 1.6; --fs-micro: 11px; --track-head: -.02em; --track-micro: .14em; } /* ========================================================================== LIGHT — the default theme Accent (#58C878) fails contrast on white, so every accent that carries text or an icon is swapped to the deeper primary. Glow alphas are lowered; same gesture, different values. ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #FFFFFF; --border: rgba(15, 23, 42, .09); --border-str: rgba(15, 23, 42, .16); --tx-1: #0F172A; --tx-2: rgba(15, 23, 42, .68); /* measured 4.93:1 on #FFFFFF at 11px — see the contrast gate */ --tx-3: rgba(15, 23, 42, .62); /* Ink accents resolve to the deep primary in light mode */ --accent-ink: var(--brand-1); --accent-line: rgba(var(--brand-1-rgb), .38); /* Gradient used as TEXT. The bright accent reads 2.02:1 on this canvas, so the light range runs deep -> mid: 6.34:1 and 4.07:1. */ --grad-ink: linear-gradient(135deg, var(--brand-1), var(--brand-mid)); /* Bloom alphas — deliberately restrained on a white surface */ --glow-a-tl: .16; --glow-a-br: .13; --orb-a: .10; --tile-bg: rgba(var(--brand-1-rgb), .07); --tile-bg-hover: rgba(var(--brand-1-rgb), .12); --numeral-stroke: rgba(15, 23, 42, .09); --numeral-stroke-hover: rgba(var(--brand-1-rgb), .26); /* Darkened from .045 so the 56px graph squares read across the whole light canvas rather than only hinting at the top. */ --grid-line: rgba(15, 23, 42, .10); --ring: rgba(var(--brand-1-rgb), .55); } /* ========================================================================== DARK — opt-in via the toggle Canvas is brand-1 crushed to ~5% lightness: near-black with a green cast, never neutral grey. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #050B07; --surface: rgba(255, 255, 255, .032); --surface-2: rgba(255, 255, 255, .055); --border: rgba(255, 255, 255, .075); --border-str: rgba(255, 255, 255, .15); --tx-1: #EEF3FB; --tx-2: rgba(238, 243, 251, .64); /* Computed, not chosen: .50 measured 4.89:1 — just under the 4.9 floor — so it is lifted to .52, which measures 5.10:1. */ --tx-3: rgba(238, 243, 251, .52); /* The bright accent is safe on a near-black canvas */ --accent-ink: var(--brand-2); --accent-line: rgba(var(--brand-2-rgb), .45); /* Mirror of the light rule: the deep primary reads 2.99:1 here, so the dark range runs mid -> bright: 4.66:1 and 9.41:1. */ --grad-ink: linear-gradient(135deg, var(--brand-mid), var(--brand-2)); --glow-a-tl: .30; --glow-a-br: .26; --orb-a: .16; --tile-bg: rgba(var(--brand-2-rgb), .09); --tile-bg-hover: rgba(var(--brand-2-rgb), .15); --numeral-stroke: rgba(255, 255, 255, .075); --numeral-stroke-hover: rgba(var(--brand-2-rgb), .30); --grid-line: rgba(255, 255, 255, .038); --ring: rgba(var(--brand-2-rgb), .65); } @media (max-width: 640px) { :root { --gutter: 18px; } } .rd-ambient-grid { opacity: .5; }