/* ================================================================ DataHints Design System — Production Tokens v1.1 ================================================================ Two first-class themes: dark (default) + light. Toggle via [data-theme="light"] on . 3-Tier Colour Architecture: Tier 1 · Primary — Amethyst (--accent, --accent-fill, --accent-text) Brand flagship. Focus rings, active states, links, and accessible filled CTAs. Always dominant. Tier 2 · Effects — Violet + Mint (--fx, --mint, --grad-fx) F Duotone pair. Violet for secondary effects; Mint only for success/positive data highlights. Tier 3 · Micro — Signal Coral + Amber (--micro-coral, --micro-amber) Tooltips, alerts, annotation labels only. Never used for decorative or prominent elements. Supporting primitives (not semantic tokens): • ElecPurple — code syntax colour only (--code-accent) • Neutrals — surfaces, text hierarchy (--bg, --fg, --border) • BrandCoral — logo accent only (--brand-coral) Fonts: IBM Plex Sans (body/headings) + IBM Plex Mono (code/labels) ================================================================ */ /* ---------------------------------------------------------------- FONT FACES — self-hosted IBM Plex Dual src paths: works from /preview subfolder AND project root ---------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/IBMPlexSans-Thin.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/IBMPlexSans-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/IBMPlexSans-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/IBMPlexSans-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/IBMPlexSans-Light.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/IBMPlexSans-LightItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Italic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSans-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSans-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexSans-Bold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexSans-BoldItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/IBMPlexMono-Thin.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/IBMPlexMono-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/IBMPlexMono-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/IBMPlexMono-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/IBMPlexMono-Light.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/IBMPlexMono-LightItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Italic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexMono-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexMono-Bold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexMono-BoldItalic.ttf") format("truetype"); } /* ================================================================ PRIMITIVE TOKENS — theme-independent, never used directly in UI ================================================================ */ :root { /* Amethyst — Brand Primary */ --col-am-50: #faf6fe; --col-am-100: #f3e8fd; --col-am-200: #eadafa; --col-am-300: #d5b3f5; --col-am-400: #c294ec; /* dark-mode: accent text + hover; light-mode: unused */ --col-am-500: #a865e1; /* brand flagship */ --col-am-600: #9247cc; --col-am-700: #8038b8; /* gradient start, dark-mode deep */ --col-am-800: #5e2485; --col-am-900: #4a1a6e; --col-am-950: #3c1358; /* deepest: dark hero background */ /* Electric Purple — Secondary (code, tags, gradient end) */ --col-ep-50: #edeeff; --col-ep-100: #dcdeff; --col-ep-200: #bcbdff; --col-ep-300: #a0a3ff; /* code on dark */ --col-ep-400: #7a73ff; /* decorative gradient end, vivid accent */ --col-ep-500: #5a50f0; /* accessible code/accent text on light */ /* Violet — Accent effects (F Duotone, primary colour) */ --col-vt-200: #c5bfff; --col-vt-300: #b3aaff; /* on dark bg */ --col-vt-500: #7e6bff; /* accent elements, secondary buttons, glow */ --col-vt-700: #5a48dd; /* hover on light */ /* Mint — Highlight / Success (F Duotone, signal colour) */ --col-mt-200: #a8fff2; --col-mt-400: #4effb8; /* success states, positive data highlights */ --col-mt-600: #00c97d; /* mint mid-tone */ --col-mt-700: #007a55; /* accessible success text on light */ /* Insight Teal — data insight / key finding signal */ --col-in-400: #06bcc1; --col-in-700: #047e82; /* Signal Coral — Micro: alerts, tooltips, warnings (D) */ --col-brand-coral: #ff333d; /* logo accent only */ --col-sc-100: #ffb3a6; --col-sc-300: #ff8a75; /* text on dark */ --col-sc-500: #ff5a3c; /* badge bg, alert border */ --col-sc-700: #c8392a; /* text on light */ /* Amber — Micro: annotation labels, premium notes (E) */ --col-ab-200: #ffde8f; --col-ab-400: #ffc852; /* text on dark */ --col-ab-500: #ffb020; /* badge bg, label border */ --col-ab-700: #c98a15; /* amber mid text */ --col-ab-800: #8a5a00; /* accessible annotation text on light */ /* True Neutrals */ --col-n-0: #ffffff; --col-n-50: #f4f8fc; /* light-mode section bg */ --col-n-100: #e8edf3; --col-n-200: #d0d8e4; --col-n-300: #a8b4c4; --col-n-400: #7a8898; --col-n-500: #556070; --col-n-600: #3d4a58; --col-n-700: #2a3542; --col-n-800: #1a1b1c; /* light-mode body text */ --col-n-900: #0f1117; /* Dark Surfaces (amethyst-tinted, not pure black) */ --col-ds-page: #0a0a0b; /* deepest page bg */ --col-ds-subtle: #0d0d0e; /* footer, outer glow areas */ --col-ds-elevated: #111113; /* alternating sections */ --col-ds-card: #161618; /* card surface */ --col-ds-card-h: #1c1c1e; /* card hover */ --col-ds-border: #1c1c1e; /* hairline */ --col-ds-border-s: #2c2c2e; /* visible border */ /* ---------------------------------------------------------------- FONT FAMILIES ---------------------------------------------------------------- */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", Consolas, monospace; /* ---------------------------------------------------------------- SPACING — 4px base grid ---------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* ---------------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------------- */ --r-xs: 4px; /* buttons, tags, inputs, inline elements */ --r-sm: 8px; /* cards, callouts */ --r-md: 12px; /* hero sections, large cards, modals */ --r-lg: 16px; /* feature panels */ --r-pill: 9999px; /* chips, nav pills, avatar rings */ /* ---------------------------------------------------------------- TRANSITION ---------------------------------------------------------------- */ --ease-fast: 0.15s ease; --ease-base: 0.25s ease; --ease-slow: 0.40s ease; /* ---------------------------------------------------------------- LAYOUT ---------------------------------------------------------------- */ --max-w: 1200px; --max-w-narrow: 800px; --max-w-wide: 1440px; } /* ================================================================ DARK THEME — Default Activate: or :root (no attribute) ================================================================ */ :root, [data-theme="dark"] { /* Surfaces */ --bg: var(--col-ds-page); --bg-subtle: var(--col-ds-subtle); --bg-elevated: var(--col-ds-elevated); --bg-card: var(--col-ds-card); --bg-card-h: var(--col-ds-card-h); /* Foreground — 3-tier hierarchy */ --fg: #f5f5f7; /* primary copy, icons, labels */ --fg-heading: var(--col-am-200); /* #eadafa — headings: amethyst-tinted white */ --fg-2: #a1a1a6; /* body, secondary copy */ --fg-3: #86868b; /* meta, captions, muted */ /* Brand accent */ --accent: var(--col-am-500); /* #a865e1 — amethyst flagship */ --accent-h: var(--col-am-400); /* #c294ec — hover */ --accent-sub: rgba(168, 101, 225, 0.15); --accent-text: var(--col-am-400); /* use 400 on dark for contrast */ --accent-fill: var(--col-am-700); /* accessible filled CTA background */ --accent-fill-h: var(--col-am-600); /* accessible filled CTA hover */ --on-accent: #ffffff; /* Code accent */ --code-accent: var(--col-ep-300); /* #a0a3ff — on dark bg */ --code-bg-inline: rgba(122, 115, 255, 0.12); --code-bg: #0a0515; /* Accent effects — Violet + Mint (F Duotone) */ --fx: var(--col-vt-500); /* #7e6bff — accent elements, glow */ --fx-h: var(--col-vt-300); /* #b3aaff — hover on dark */ --fx-sub: rgba(126, 107, 255, 0.14); --mint: var(--col-mt-400); /* #4effb8 — success, positive data */ --mint-sub: rgba(78, 255, 184, 0.10); --grad-fx: linear-gradient(135deg, var(--col-vt-500) 0%, var(--col-mt-400) 100%); --insight: var(--col-in-400); --insight-sub: rgba(6, 188, 193, 0.10); /* Micro tokens — tooltips, badges, annotations */ --brand-coral: var(--col-brand-coral); /* logo accent only */ --signal-coral: var(--col-sc-500); /* UI-level name — alias of --micro-coral */ --micro-coral: var(--col-sc-500); /* #ff5a3c — component-level name */ --micro-coral-sub: rgba(255, 90, 60, 0.10); --micro-coral-text: var(--col-sc-300); /* #ff8a75 — legible on dark */ --micro-amber: var(--col-ab-500); /* #ffb020 */ --micro-amber-sub: rgba(255, 176, 32, 0.10); --micro-amber-text: var(--col-ab-400); /* #ffc852 — legible on dark */ /* Borders */ --border: var(--col-ds-border); --border-s: var(--col-ds-border-s); --border-a: rgba(168, 101, 225, 0.40); /* Shadows — amethyst-tinted glow is a signature */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60); --shadow-glow: 0 0 24px rgba(168, 101, 225, 0.35); --shadow-glow-fx: 0 0 20px rgba(126, 107, 255, 0.40); --shadow-glow-strong: 0 0 36px rgba(168, 101, 225, 0.55); /* intense glow for .dh-btn-glow hover */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.40); --shadow-card-h:0 6px 24px rgba(168, 101, 225, 0.20); --overlay-bg: rgba(0, 0, 0, 0.55); /* drawer / modal backdrop */ /* Gradients */ --grad-brand: linear-gradient(135deg, var(--col-am-700) 0%, var(--col-ep-500) 100%); --grad-hero: linear-gradient(135deg, var(--col-am-950) 0%, #24184e 100%); --grad-accent: linear-gradient(135deg, var(--col-am-700) 0%, var(--col-vt-700) 100%); --grad-bq: linear-gradient(180deg, var(--col-sc-500) 0%, var(--col-am-500) 50%, var(--col-ep-400) 100%); --grad-radial: radial-gradient(circle, rgba(168, 101, 225, 0.15) 0%, transparent 70%); --grad-page: linear-gradient(180deg, var(--col-ds-page) 0%, var(--col-ds-subtle) 100%); } /* ================================================================ LIGHT THEME Activate: ================================================================ */ [data-theme="light"] { /* Surfaces — warm white with amethyst undertone */ --bg: var(--col-n-0); /* #ffffff — intentional: flat hierarchy, same as --bg-card */ --bg-subtle: var(--col-n-50); /* #f4f8fc */ --bg-elevated: var(--col-am-50); /* #faf6fe — amethyst tint, distinct from --bg-subtle */ --bg-card: var(--col-n-0); /* intentional: same as --bg — flat card surface in light */ --bg-card-h: var(--col-am-50); /* #faf6fe — amethyst tint on hover */ /* Foreground */ --fg: var(--col-n-800); /* #1a1b1c */ --fg-heading: var(--col-n-800); /* intentional: same as --fg in light — no amethyst tint on white bg (unlike dark) */ --fg-2: var(--col-n-500); /* #556070 */ --fg-3: #64748b; /* meta, captions, muted */ /* Brand accent */ --accent: var(--col-am-500); /* #a865e1 */ --accent-h: var(--col-am-600); /* #9247cc — interactive hover; lighter than --accent-fill */ --accent-sub: rgba(168, 101, 225, 0.08); --accent-text: var(--col-am-700); /* accessible text/link accent on white */ --accent-fill: var(--col-am-700); /* accessible filled CTA background — intentionally darker than --accent-h */ --accent-fill-h: var(--col-am-800); /* accessible filled CTA hover */ --on-accent: #ffffff; /* Code accent */ --code-accent: var(--col-ep-500); /* #5a50f0 */ --code-bg-inline: var(--col-ep-50); /* #edeeff */ --code-bg: #0b0515; /* Accent effects — Violet + Mint */ --fx: var(--col-vt-500); /* #7e6bff */ --fx-h: var(--col-vt-700); /* #5a48dd — darker on hover/light */ --fx-sub: rgba(126, 107, 255, 0.08); --mint: var(--col-mt-700); /* #007a55 — accessible on light bg */ --mint-sub: rgba(0, 122, 85, 0.08); --grad-fx: linear-gradient(135deg, var(--col-vt-500) 0%, var(--col-mt-400) 100%); --insight: var(--col-in-700); --insight-sub: rgba(4, 126, 130, 0.08); /* Micro tokens */ --brand-coral: var(--col-brand-coral); /* logo accent only */ --signal-coral: var(--col-sc-500); /* UI-level name — alias of --micro-coral */ --micro-coral: var(--col-sc-500); /* #ff5a3c — component-level name */ --micro-coral-sub: rgba(255, 90, 60, 0.07); --micro-coral-text: var(--col-sc-700); /* #c8392a — legible on light */ --micro-amber: var(--col-ab-500); /* #ffb020 */ --micro-amber-sub: rgba(255, 176, 32, 0.08); --micro-amber-text: var(--col-ab-800); /* #8a5a00 — legible on light */ /* Borders — amethyst-tinted */ --border: var(--col-am-200); /* #eadafa */ --border-s: var(--col-n-200); /* #d0d8e4 */ --border-a: var(--col-am-500); /* Shadows — amethyst-tinted */ --shadow-sm: 0 2px 8px rgba(60, 19, 88, 0.08); --shadow-md: 0 4px 16px rgba(60, 19, 88, 0.10); --shadow-lg: 0 8px 32px rgba(60, 19, 88, 0.14); --shadow-glow: 0 0 24px rgba(168, 101, 225, 0.25); --shadow-glow-fx: 0 0 18px rgba(126, 107, 255, 0.25); --shadow-glow-strong: 0 0 36px rgba(168, 101, 225, 0.40); /* intense glow for .dh-btn-glow hover */ --shadow-card: 0 2px 12px rgba(60, 19, 88, 0.08); --shadow-card-h:0 6px 24px rgba(60, 19, 88, 0.14); --overlay-bg: rgba(0, 0, 0, 0.40); /* drawer / modal backdrop */ /* Gradients */ --grad-brand: linear-gradient(135deg, var(--col-am-700) 0%, var(--col-ep-500) 100%); --grad-hero: linear-gradient(135deg, var(--col-am-800) 0%, var(--col-ep-500) 100%); /* deeper start vs --grad-brand */ --grad-accent: linear-gradient(135deg, var(--col-am-700) 0%, var(--col-vt-700) 100%); --grad-bq: linear-gradient(180deg, var(--col-sc-500) 0%, var(--col-am-500) 50%, var(--col-ep-400) 100%); --grad-radial: radial-gradient(circle, rgba(168, 101, 225, 0.10) 0%, transparent 70%); --grad-page: linear-gradient(180deg, var(--col-n-0) 0%, var(--col-n-50) 100%); } /* ================================================================ BASE / RESET ================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--ease-base), color var(--ease-base); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ================================================================ TYPOGRAPHY — semantic classes Fluid scale via clamp(): min at 375px, max at 1440px ================================================================ */ /* Display — page hero headline */ .dh-display { font-family: var(--font-sans); font-size: clamp(2.5rem, 5.5vw, 4.5rem); /* 40–72px */ font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; color: var(--fg-heading); } /* H1 — page title */ h1, .dh-h1 { font-family: var(--font-sans); font-size: clamp(2rem, 4vw, 3rem); /* 32–48px */ font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--fg-heading); } /* H2 — section header */ h2, .dh-h2 { font-family: var(--font-sans); font-size: clamp(1.5rem, 3vw, 2.25rem); /* 24–36px */ font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--fg-heading); } /* H3 — card/subsection title */ h3, .dh-h3 { font-family: var(--font-sans); font-size: clamp(1.125rem, 2vw, 1.5rem); /* 18–24px */ font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-heading); } /* H4 — tight label heading */ h4, .dh-h4 { font-family: var(--font-sans); font-size: 1.125rem; /* 18px fixed */ font-weight: 600; line-height: 1.4; color: var(--fg-heading); } /* Eyebrow — IBM Plex Mono uppercase label above headings */ .dh-eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; /* 11px */ font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } /* Subtitle — large lead paragraph */ .dh-subtitle { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); /* 17–20px */ line-height: 1.7; font-weight: 400; color: var(--fg-2); } /* Body */ p, .dh-body { font-size: 1rem; line-height: 1.65; color: var(--fg-2); } /* Body small */ .dh-body-sm { font-size: 0.9rem; line-height: 1.6; color: var(--fg-2); } /* Caption / meta */ .dh-caption { font-size: 0.8125rem; /* 13px */ line-height: 1.5; color: var(--fg-3); } /* Mono body — code samples, SQL */ code, kbd, .dh-mono { font-family: var(--font-mono); font-size: 0.875em; } /* Inline code — amethyst bg */ code:not(pre code) { color: var(--code-accent); background: var(--code-bg-inline); padding: 0.1em 0.35em; border-radius: var(--r-xs); } /* Mono label — section labels, tags (always UPPERCASE) */ .dh-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; color: var(--fg-3); } /* Links */ a { color: var(--accent-text); text-decoration: none; transition: color var(--ease-fast), opacity var(--ease-fast); } a:hover { color: var(--accent-h); } /* Text on gradient/dark backgrounds */ .dh-text-on-dark { color: #f5f5f7; } .dh-text-muted-on-dark { color: rgba(245, 245, 247, 0.70); }