/* ============================================================ DTTT Advisory Design System — Tokens Version 1.0.0 — April 2026 advisory.thinkdigital.travel ============================================================ Two registers: --light (default) and --dark. Toggle by setting [data-register="dark"] on . ============================================================ */ :root { /* ── Brand anchors ────────────────────────────────────── */ --dttt-teal: #00857C; /* primary brand */ --dttt-teal-deep: #006B63; /* hover, ink-on-light */ --dttt-teal-soft: #E6F3F2; /* tints, surfaces */ --dttt-teal-mist: #F2F9F8; /* faintest wash */ --dttt-navy: #0F2044; /* authority */ --dttt-navy-mid: #1A3060; /* navy elevation */ --dttt-navy-deep: #0B1C2E; /* immersive ground */ --dttt-navy-soft: #E8EDF5; /* navy wash for light surfaces */ --dttt-navy-rule: #CBD5E8; /* rule-on-navy-soft */ /* ── Neutral scale (light register) ───────────────────── */ --grey-0: #FFFFFF; --grey-50: #F7F8FA; --grey-100:#EEF1F5; --grey-150:#E2E6EF; --grey-200:#CBD2DD; --grey-300:#9AA3B2; --grey-400:#6B7384; --grey-500:#4A5568; --grey-600:#333B49; --grey-700:#1F2530; --grey-800:#10141B; /* ── Semantic / state ─────────────────────────────────── */ --green: #1A7A4A; --green-soft: #E6F4ED; --amber: #925A00; --amber-soft: #FEF3E2; --red: #B0322B; --red-soft: #FBE9E7; --info: #1F6FBA; --info-soft: #E8F0FA; /* Rose / Bud / Thorn (DTTT signature R/B/T pattern) */ --rose: #1A7A4A; /* what is working */ --bud: #C28E00; /* what could become */ --thorn: #B0322B; /* what is blocking */ /* ── AI Transparency Framework — categorical data palette ── */ /* These are the canonical model colours, imported as-is. */ --atf-transparency: #00857C; /* Transparency Model */ --atf-environmental: #5B8C2A; /* Environmental Model */ --atf-data: #1F6FBA; /* Data Model */ --atf-content: #8B3FBF; /* Content Model */ --atf-governance: #0F2044; /* Governance Model */ --atf-skills: #C28E00; /* Skills Model */ --atf-experience: #C75B30; /* Experience Model */ --atf-economy: #4A5568; /* Economy Model */ /* ── Sequential teal ramp (5 stops) ───────────────────── */ --seq-1: #E6F3F2; --seq-2: #99CCC8; --seq-3: #4DA8A1; --seq-4: #00857C; --seq-5: #003835; /* ── Diverging navy ↔ amber (5 stops) ─────────────────── */ --div-navy-2: #0F2044; --div-navy-1: #6B7E9E; --div-mid: #EEF1F5; --div-amber-1: #D9A75A; --div-amber-2: #925A00; /* ── Type ─────────────────────────────────────────────── */ /* Arial throughout. The system substitutes only for compatibility. */ --font-system: Arial, "Helvetica Neue", Helvetica, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Type scale — tuned for Arial at 16px root */ --t-hero: 2.5rem; /* 40 / display, cover only */ --t-h1: 1.75rem; /* 28 / page title */ --t-h2: 1.25rem; /* 20 / section */ --t-h3: 1rem; /* 16 / subsection */ --t-body: 0.9375rem; /* 15 / body */ --t-body-sm: 0.8125rem; /* 13 / dense prose, table cells */ --t-label: 0.6875rem; /* 11 / uppercase labels */ --t-micro: 0.625rem; /* 10 / source refs, fine print */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-body: 1.6; --lh-loose: 1.75; /* Tracking — Arial benefits from gentle negative tracking on display */ --track-hero: -0.015em; --track-h1: -0.01em; --track-h2: -0.005em; --track-body: 0; --track-label: 0.1em; --track-micro: 0.06em; /* ── Spacing — 4px base, 8px rhythm ───────────────────── */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 2rem; /* 32 */ --sp-8: 2.5rem; /* 40 */ --sp-9: 3rem; /* 48 */ --sp-10: 4rem; /* 64 */ /* ── Radius ───────────────────────────────────────────── */ --r-0: 0; --r-1: 2px; /* document precision — buttons, tags */ --r-2: 4px; /* surfaces, panels */ --r-3: 8px; /* cards in immersive register */ --r-pill: 999px; /* ── Border / rule ────────────────────────────────────── */ --rule: 1px solid var(--grey-150); --rule-strong: 1px solid var(--grey-200); --rule-navy: 1px solid var(--dttt-navy-rule); /* ── Elevation — restrained ───────────────────────────── */ --shadow-1: 0 1px 2px rgba(15,32,68,0.04), 0 1px 1px rgba(15,32,68,0.03); --shadow-2: 0 2px 8px rgba(15,32,68,0.06), 0 1px 2px rgba(15,32,68,0.04); --shadow-3: 0 8px 24px rgba(15,32,68,0.10), 0 2px 6px rgba(15,32,68,0.05); /* ── Motion ───────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); --ease-emph: cubic-bezier(0.3, 0.0, 0.0, 1.0); --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* ── Light register (default) — applied semantic ──────── */ --bg: var(--grey-50); --surface: var(--grey-0); --surface-alt: var(--dttt-navy-soft); --surface-mute: var(--grey-100); --ink: var(--dttt-navy); --ink-soft: var(--grey-500); --ink-mute: var(--grey-400); --ink-faint: var(--grey-300); --rule-c: var(--grey-150); --rule-soft: var(--grey-100); --header-bg: var(--dttt-navy); --header-ink: #FFFFFF; --accent: var(--dttt-teal); --accent-ink: var(--dttt-teal-deep); --accent-soft: var(--dttt-teal-soft); --accent-tint: var(--dttt-teal-soft); --authority: var(--dttt-navy); } /* ── Dark (immersive) register ──────────────────────────── */ [data-register="dark"] { --bg: var(--dttt-navy-deep); --surface: var(--dttt-navy); --surface-alt: var(--dttt-navy-mid); --surface-mute: #132d47; --ink: #FFFFFF; --ink-soft: #DEE2E6; --ink-mute: rgba(255,255,255,0.6); --ink-faint: rgba(255,255,255,0.35); --rule-c: rgba(255,255,255,0.13); --rule-soft: rgba(255,255,255,0.07); --header-bg: rgba(11,28,46,0.95); --header-ink: #FFFFFF; --accent: var(--dttt-teal); --accent-ink: #4DD0C7; --accent-soft: rgba(0,133,124,0.12); --accent-tint: rgba(0,133,124,0.18); --authority: var(--dttt-navy); } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-system); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Type primitives */ .t-hero { font-size: var(--t-hero); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-hero); } .t-h1 { font-size: var(--t-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-h1); } .t-h2 { font-size: var(--t-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--track-h2); } .t-h3 { font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-snug); } .t-body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); } .t-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-body); color: var(--ink-soft); } .t-label { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-ink); } .t-micro { font-size: var(--t-micro); letter-spacing: var(--track-micro); color: var(--ink-mute); } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } code, pre { font-family: var(--font-mono); font-size: 0.8125rem; }