/* GENERATED COPY — do not edit. * Source: shared/purple-tokens.css * Synced by scripts/sync-shared.mjs (runs as part of npm run cf:deploy:site). * Edit the source and re-run the deploy; edits here are overwritten. */ /** * purple-tokens.css — the single source of truth for Purple Industries styling. * ============================================================================ * * Every surface in the estate loads this file FIRST, before its own stylesheet, * and expresses colour, type, spacing, radius and elevation only through these * custom properties. A surface that hard-codes `#a78bfa` instead of using * `var(--pi-accent)` will drift the moment the brand changes; that is what this * file exists to prevent. * * Canonical documentation: docs/DESIGN-SYSTEM.md * * WHERE THE VALUES CAME FROM * -------------------------- * These were originally lifted from the apex site's blue-grey palette, on the * reasoning that the front door should be the brand root. That was overruled on * 2026-08-11: the owner prefers the ML Study Lab's purple family, so the violet * scheme is now canonical and the apex follows it rather than the reverse. * * This is the payoff of having a token layer at all — changing the estate's * entire palette is an edit to two blocks in this file, not a sweep through * four codebases. Any surface still hard-coding a hex is a surface that will * NOT follow, which is why that is forbidden in docs/DESIGN-SYSTEM.md. * * THEMING CONTRACT * ---------------- * The theme is an attribute on the document element: `data-theme="dark"` or * `data-theme="light"`. Dark is the brand default and the value when the * attribute is absent. Every surface must read the attribute from ``, not * from `` or a wrapper, so a single switch anywhere controls the page. * * NAMING * ------ * All tokens are prefixed `--pi-`. The prefix is not decoration: several apps * in this estate already define bare `--bg`, `--muted`, `--surface` and * `--purple` with conflicting values, and two of them now live in the same * document as tabs. An unprefixed token cannot be shared safely. * * ADDING A TOKEN * -------------- * Add it here and document it in docs/DESIGN-SYSTEM.md in the same change. A * token that exists in only one of the two places is how a design system starts * being ignored. */ :root, :root[data-theme="dark"] { color-scheme: dark; /* --- Surface ---------------------------------------------------------- */ --pi-bg: #0f0a18; --pi-bg-gradient: radial-gradient(circle at top left, rgba(167, 139, 250, 0.16), transparent 30%), radial-gradient(circle at top right, rgba(124, 58, 237, 0.14), transparent 28%), linear-gradient(180deg, #1a1030 0%, #0f0a18 46%, #0a0611 100%); --pi-paper: rgba(20, 13, 34, 0.92); --pi-paper-border: rgba(167, 139, 250, 0.20); --pi-surface: rgba(255, 255, 255, 0.05); --pi-surface-raised: rgba(255, 255, 255, 0.08); /* --- Text ------------------------------------------------------------- */ --pi-ink: #f3eefc; --pi-muted: #a294bb; --pi-line: rgba(162, 148, 187, 0.26); /* --- Brand and status -------------------------------------------------- */ --pi-accent: #a78bfa; --pi-accent-strong: #7c3aed; --pi-accent-text: #c4b5fd; --pi-accent-wash: rgba(167, 139, 250, 0.18); --pi-indigo: #9fadff; --pi-mint: #7fe5b8; --pi-slate: #8ec8eb; --pi-success: #7fe5b8; --pi-warning: #ffc46b; --pi-danger: #ff8a80; /* --- Elevation --------------------------------------------------------- */ --pi-shadow: 0 24px 60px rgba(0, 0, 0, 0.38); --pi-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28); } :root[data-theme="light"] { color-scheme: light; --pi-bg: #f7f7fb; --pi-bg-gradient: radial-gradient(circle at top left, rgba(124, 58, 237, 0.10), transparent 30%), radial-gradient(circle at top right, rgba(167, 139, 250, 0.10), transparent 28%), linear-gradient(180deg, #f1eefb 0%, #f7f7fb 44%, #ffffff 100%); --pi-paper: rgba(255, 255, 255, 0.94); --pi-paper-border: rgba(124, 58, 237, 0.14); --pi-surface: rgba(255, 255, 255, 0.78); --pi-surface-raised: #ffffff; --pi-ink: #17151d; --pi-muted: #696373; --pi-line: #ded9e8; --pi-accent: #7c3aed; --pi-accent-strong: #6d28d9; --pi-accent-text: #7a2bc0; --pi-accent-wash: #ede9fe; --pi-indigo: #4556a6; --pi-mint: #1a7d69; --pi-slate: #2f4c61; --pi-success: #1a7d69; --pi-warning: #9a6212; --pi-danger: #b42318; --pi-shadow: 0 24px 60px rgba(22, 35, 45, 0.14); --pi-shadow-sm: 0 8px 20px rgba(22, 35, 45, 0.10); } /* ========================================================================== * Theme-independent tokens * These do not change between light and dark, so they are declared once. * ======================================================================= */ :root { /* --- Type -------------------------------------------------------------- */ /* "Avenir Next" is the apex site's face; the rest of the stack is what it actually resolves to on Windows and Linux, which is most of the audience. */ --pi-font-sans: "Avenir Next", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --pi-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Editorial serif. Used ONLY for long-form display headings in the study guides — never for UI chrome, where it reads as a different product. */ --pi-font-serif: Georgia, "Times New Roman", serif; --pi-text-xs: 0.75rem; /* 12px — metadata, eyebrows */ --pi-text-sm: 0.8125rem; /* 13px — dense UI, tooltips */ --pi-text-base: 0.875rem; /* 14px — nav, buttons, controls */ --pi-text-md: 1rem; /* 16px — body copy */ --pi-text-lg: 1.125rem; /* 18px — lede */ --pi-text-xl: 1.5rem; /* 24px — section heading */ --pi-text-2xl: 2rem; /* 32px — page heading */ --pi-text-3xl: 3rem; /* 48px — hero */ --pi-weight-normal: 400; --pi-weight-medium: 550; --pi-weight-semibold: 650; --pi-weight-bold: 800; --pi-leading-tight: 1.15; --pi-leading-normal: 1.5; --pi-leading-relaxed: 1.65; /* Uppercase micro-labels ("SKILL BENCHMARK", "PURPLE APPS") are a recurring device across the estate; the tracking is part of the look. */ --pi-tracking-label: 0.14em; /* --- Spacing — a 4px scale. Do not invent intermediate values. ---------- */ --pi-space-1: 4px; --pi-space-2: 8px; --pi-space-3: 12px; --pi-space-4: 16px; --pi-space-5: 20px; --pi-space-6: 24px; --pi-space-8: 32px; --pi-space-10: 40px; --pi-space-12: 48px; --pi-space-16: 64px; /* --- Radius ------------------------------------------------------------ */ --pi-radius-sm: 8px; --pi-radius: 12px; --pi-radius-lg: 18px; --pi-radius-pill: 999px; /* --- Layout ------------------------------------------------------------ */ --pi-max-width: 1120px; --pi-header-height: 56px; /* --- Motion ------------------------------------------------------------ */ --pi-transition-fast: 120ms ease; --pi-transition: 180ms ease; /* --- Focus ------------------------------------------------------------- */ /* One focus treatment estate-wide. Never remove an outline without replacing it with something at least as visible. */ --pi-focus-ring: 2px solid var(--pi-accent); --pi-focus-offset: 2px; } @media (prefers-reduced-motion: reduce) { :root { --pi-transition-fast: 0ms; --pi-transition: 0ms; } } /* ========================================================================== * Shared primitives * * Only components that appear on MORE THAN ONE surface belong here. Anything * used by a single app stays in that app's stylesheet. The test is simple: if * removing a surface would orphan the rule, it does not belong in this file. * ======================================================================= */ .pi-focusable:focus-visible, .pi-button:focus-visible, .pi-navlink:focus-visible { outline: var(--pi-focus-ring); outline-offset: var(--pi-focus-offset); } /* --- Section navigation --------------------------------------------------- * The row of in-page links each study surface shows under the header * ("Blueprint · Scenarios · Study Path"). These were visibly different between * the two study guides — one serif and warm-grey, one sans and cool-grey — on * what is meant to read as one product. This is the shared definition. */ .pi-subnav { display: flex; align-items: center; gap: var(--pi-space-5); flex-wrap: wrap; font-family: var(--pi-font-sans); font-size: var(--pi-text-base); } .pi-subnav a, .pi-navlink { font-family: var(--pi-font-sans); font-size: var(--pi-text-base); font-weight: var(--pi-weight-medium); color: var(--pi-muted); text-decoration: none; padding: var(--pi-space-1) 0; border-bottom: 2px solid transparent; transition: color var(--pi-transition-fast), border-color var(--pi-transition-fast); } .pi-subnav a:hover, .pi-navlink:hover { color: var(--pi-ink); border-bottom-color: var(--pi-accent); text-decoration: none; } .pi-subnav a[aria-current], .pi-navlink.is-active { color: var(--pi-accent-text); border-bottom-color: var(--pi-accent); } /* --- Buttons -------------------------------------------------------------- */ .pi-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--pi-space-2); font-family: var(--pi-font-sans); font-size: var(--pi-text-base); font-weight: var(--pi-weight-semibold); line-height: 1; padding: 9px 16px; border-radius: var(--pi-radius-pill); border: 1px solid var(--pi-line); background: transparent; color: var(--pi-ink); cursor: pointer; transition: background var(--pi-transition-fast), border-color var(--pi-transition-fast); } .pi-button:hover { background: var(--pi-accent-wash); border-color: var(--pi-accent); } .pi-button--primary { background: var(--pi-accent-strong); border-color: var(--pi-accent-strong); color: #ffffff; } .pi-button--primary:hover { background: var(--pi-accent); border-color: var(--pi-accent); } .pi-button[disabled] { opacity: 0.55; cursor: not-allowed; } /* --- Micro-label ---------------------------------------------------------- */ .pi-label { font-family: var(--pi-font-sans); font-size: var(--pi-text-xs); font-weight: var(--pi-weight-bold); letter-spacing: var(--pi-tracking-label); text-transform: uppercase; color: var(--pi-accent-text); } /* --- Dialog --------------------------------------------------------------- */ /* Both study guides show a "My Progress" dialog; the Kubernetes console and the account pages will need the same shell. */ .pi-dialog { border: 1px solid var(--pi-paper-border); border-radius: var(--pi-radius-lg); background: var(--pi-paper); color: var(--pi-ink); box-shadow: var(--pi-shadow); padding: var(--pi-space-8); max-width: 640px; width: calc(100vw - var(--pi-space-8)); } .pi-dialog::backdrop { background: rgba(6, 10, 16, 0.62); backdrop-filter: blur(3px); }