/** * DevLogicOrbit — design tokens. * * Every colour, size and shape resolves to a variable declared here, so the * public site and the PHP admin (Phase 2) share one source. Palette = the logo's * own colours (owner decision D4, 2026-10-16). Contrast ratios are WCAG 2.x * against the background named; anything under 4.5:1 is never used for text. */ @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; /* optional: the font is preloaded and normally arrives with the page. If it is late, that page view keeps the fallback below instead of swapping fonts while someone reads (no layout shift); the next page uses Inter. */ font-display: optional; } /* Fallback for that case, with Arial's metrics adjusted to Inter's so the page looks and wraps almost the same. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; } :root { /* --------------------------------------------------------------- * Brand primitives — sampled from the logo artwork * --------------------------------------------------------------- */ --dlo-ink: #0B1220; /* "D" + wordmark. 18.7:1 on white */ --dlo-ink-2: #111B2E; /* raised surface on ink */ --dlo-ink-3: #1A2740; /* borders / hover on ink */ --dlo-orbit-navy: #163A5F; /* ring + tagline. 11.6:1 on white */ --dlo-orbit-navy-l: #2F6FA3; /* ring on dark (logo dark variant) */ --dlo-cyan: #38D9F5; /* orbit + dot. 11.1:1 on ink · 1.7:1 on white (no text) */ --dlo-cyan-strong: #16BFE0; /* "Orbit". 8.5:1 on ink · 2.2:1 on white (no text) */ --dlo-cyan-deep: #00A8D6; /* gradient end */ --dlo-cyan-text: #0A7391; /* derived: cyan text/links on light. 5.4:1 on white */ --dlo-cyan-text-h: #085E77; /* hover of the above. 7.3:1 on white */ --dlo-surface: #F4F7FB; /* inner "D" */ /* Neutrals (cool, matched to the navy) */ --dlo-white: #FFFFFF; --dlo-gray-50: #F8FAFC; --dlo-gray-100:#EEF2F7; --dlo-gray-200:#DDE4EE; --dlo-gray-300:#C3CDDA; --dlo-gray-400:#94A3B8; /* tagline on dark. 7.2:1 on ink */ --dlo-gray-500:#5F6B7E; /* muted text. 5.4:1 on white, 5.0:1 on surface */ --dlo-gray-700:#334155; --dlo-success: #0F7B4F; /* 5.3:1 on white */ --dlo-warning: #9A5B00; /* 5.6:1 on white */ --dlo-danger: #B42318; /* 6.5:1 on white */ --dlo-gradient-cyan: linear-gradient(135deg, var(--dlo-cyan) 0%, var(--dlo-cyan-deep) 100%); --dlo-gradient-night: radial-gradient(120% 90% at 85% 10%, #163A5F 0%, #0B1220 55%); /* --------------------------------------------------------------- * Semantic tokens — light section (default) * --------------------------------------------------------------- */ --bg: var(--dlo-white); --bg-alt: var(--dlo-surface); --bg-raised: var(--dlo-white); --text: var(--dlo-ink); --text-strong: var(--dlo-ink); --text-muted: var(--dlo-gray-500); --heading: var(--dlo-ink); --link: var(--dlo-cyan-text); --link-hover: var(--dlo-cyan-text-h); --accent: var(--dlo-cyan-text); /* accent that may carry text */ --accent-deco: var(--dlo-cyan-strong); /* decorative accent (lines, dots) */ --border: var(--dlo-gray-200); --border-strong: var(--dlo-gray-300); --focus: var(--dlo-cyan-text); --chip-bg: var(--dlo-gray-100); --chip-text: var(--dlo-orbit-navy); --btn-primary-bg: var(--dlo-ink); --btn-primary-text: var(--dlo-white); --btn-primary-hover: var(--dlo-orbit-navy); --btn-secondary-bg: transparent; --btn-secondary-text: var(--dlo-ink); --btn-secondary-border: var(--dlo-gray-300); /* --------------------------------------------------------------- * Type — Inter, the logo's own typeface * --------------------------------------------------------------- */ --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.9375rem; /* 15 */ --fs-base: 1.0625rem; /* 17 */ --fs-lg: 1.1875rem; /* 19 */ --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --fs-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.65; --tracking-tight: -0.028em; /* matches the wordmark's letter-spacing */ --tracking-caps: 0.16em; /* matches the logo tagline */ /* --------------------------------------------------------------- * Space, shape, depth, motion * --------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-y: clamp(4rem, 3rem + 4vw, 7rem); --container: 1200px; --container-narrow: 760px; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --header-h: 72px; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(11 18 32 / 0.06); --shadow: 0 1px 2px rgb(11 18 32 / 0.05), 0 8px 24px -12px rgb(11 18 32 / 0.18); --shadow-lg: 0 2px 4px rgb(11 18 32 / 0.05), 0 24px 48px -20px rgb(11 18 32 / 0.28); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 180ms; } /* Dark section — any element with .is-dark re-points the semantic tokens, so every component works unchanged on ink backgrounds. */ .is-dark { --bg: var(--dlo-ink); --bg-alt: var(--dlo-ink-2); --bg-raised: var(--dlo-ink-2); --text: #D5DEEA; /* 13.8:1 on ink */ --text-strong: var(--dlo-white); --text-muted: var(--dlo-gray-400); /* 7.2:1 on ink */ --heading: var(--dlo-white); --link: var(--dlo-cyan); --link-hover: #7FE8FA; --accent: var(--dlo-cyan); --accent-deco: var(--dlo-cyan); --border: var(--dlo-ink-3); --border-strong: #2A3A57; --focus: var(--dlo-cyan); --chip-bg: rgb(56 217 245 / 0.08); --chip-text: #BDEFFA; --btn-primary-bg: var(--dlo-cyan); --btn-primary-text: var(--dlo-ink); /* 11.1:1 */ --btn-primary-hover: #7FE8FA; --btn-secondary-text: var(--dlo-white); --btn-secondary-border: #34476A; }