/* ========================================================================== EPP Design Tokens — compatibility / alias layer only. Rule Zero: no color, radius, duration, or easing may be defined outside the design system's tokens.json. The actual token values now live in the vendored CIT HIG tokens: src/static/vendor/cit/tokens.css (generated — never hand-edit) src/static/vendor/cit/utilities.css (generated — never hand-edit) This file does exactly two things: 1. Aliases legacy EPP variable names onto the vendored HIG tokens, so every existing var(--epp-*) / var(--primary-color) / etc. call in the codebase keeps resolving without touching hundreds of call sites in one plan. 2. Freezes a DEPRECATED block of Strata-lineage literals that frozen `strata.css` / `basecamp/*` templates still read directly, so those pages render pixel-identical while the rest of the product migrates to the HIG tokens. Load order (see base/layout.html, admin/base.html ): vendor/cit/tokens.css → vendor/cit/utilities.css → fa-compat.css → tokens.css (this file, last, so aliases win where names collide). Theming is dark-first: vendor/cit/tokens.css's bare :root is the dark theme; [data-theme="light"] / [data-contrast="high"] overrides live there too. Do not re-declare theme values here except in the DEPRECATED block below. ========================================================================== */ @import url("../vendor/cit/tokens.css"); :root { /* Legacy EPP name → HIG token */ --epp-font-sans: var(--font-sans); --epp-font-mono: var(--font-mono); --epp-ink: var(--text-primary); --epp-muted: var(--text-muted); --epp-line: var(--border-subtle); --epp-line-strong: var(--border-hover); --epp-page: var(--surface-canvas); --epp-surface: var(--surface-card); --epp-surface-soft: var(--surface-card-hover); --cit-gradient: var(--gradient-luxury); --cit-gradient-text: var(--gradient-luxury); --radius-card: var(--radius-lg); /* 20px → 12px, deliberate */ --radius-pill: var(--radius-full); --glide: var(--ease-out); --epp-shadow: var(--shadow-card); --epp-shadow-soft: var(--shadow-card); --epp-focus: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); /* Semantic mapping — teal is the primary action in EVERY theme */ --primary-color: var(--accent); --primary-color-dark: var(--cit-teal-dark); --secondary-color: var(--text-secondary); --success-color: var(--success-fg); --warning-color: var(--warning-fg); --danger-color: var(--danger-fg); --dark-color: var(--text-primary); --light-color: var(--surface-card-hover); /* Layout (not a Rule Zero axis) */ --sidebar-expanded-width: 250px; --sidebar-collapsed-width: 68px; /* Retrofit layer aliases some rules still address directly. */ --focus-ring: var(--epp-focus); } /* Base alignment for Heroicons rendered by the icon() macro / iconSvg(). */ .hicon { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; } /* ========================================================================== DEPRECATED — Strata-lineage literals. Do not use these in new work; do not add to this list. They exist only because `src/static/css/strata.css`, `src/static/js/strata.js`, and `src/templates/basecamp/**` are frozen (Plan 03 scope guard) and read these names directly. Values below are copied verbatim from the EPP tokens.css that shipped before this migration, so Strata/Basecamp pages render pixel-identical. When Strata is eventually migrated off this lineage, delete this whole block. ========================================================================== */ /* --glass-blur type fix: the vendored token is a LENGTH (12px, 0px in HC), consumed correctly by `backdrop-filter: blur(var(--glass-blur))`. The legacy EPP token was a FILTER LIST (`blur(12px) saturate(1.4)`), which is what `strata.css` still expects wherever it writes `backdrop-filter: var(--glass-blur)` (no wrapping blur()). Rather than touch strata.css, re-declare --glass-blur as the old filter list scoped to `.strata-shell` only, so the frozen shell keeps its filter-list semantics while the vendored length wins everywhere else. The legacy filter-list value never varied across themes in the pre-migration file, so one declaration covers dark/light/HC for this scope. */ .strata-shell { --glass-blur: blur(12px) saturate(1.4); --glass-blur-deep: blur(20px) saturate(1.5); } :root { /* Filter-list tokens (renamed from the old --glass-blur/--glass-blur-deep, which now mean a LENGTH per the vendored HIG tokens). Non-Strata consumers (epp_cockpit.css) were repointed at these in this same plan. */ --glass-filter: blur(12px) saturate(1.4); --glass-filter-deep: blur(20px) saturate(1.5); /* Glass language (Strata, light theme) */ --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-deep: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.7); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 62, 126, 0.08); --glass-shadow-deep: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 2px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 62, 126, 0.12); /* Strata foreground ink as an RGB triple, so alpha variants can theme. */ --strata-ink: 29, 29, 31; /* Animated mesh background tokens (light theme). */ --mesh-base: #F8F9FA; --mesh-g1: rgba(115, 193, 103, 0.32); --mesh-g2: rgba(0, 62, 126, 0.18); --mesh-veil: rgba(255, 255, 255, 0.9); /* Strata-lineage brand/neutral literals, light theme. */ --cit-bg-light: #eef4f2; --cit-bg-medium: #d8e2df; --cit-gray: #F1F2F2; --cit-yellow: #F9B233; --cit-red: #E94B3B; --cit-orange: #c66b2d; --cit-purple: #575a8f; --cit-midnight: #1D1D1F; --black-russian: #1d1d1f; --cit-teal-darker: #17645c; --cit-blue-deep: #061f3a; --epp-navy: #052f56; --epp-navy-deep: #031d36; } :root[data-theme="dark"] { /* Glass goes translucent-dark with a luminous top hairline. */ --glass-bg: rgba(22, 24, 30, 0.55); --glass-bg-deep: rgba(26, 28, 36, 0.72); --glass-border: rgba(255, 255, 255, 0.09); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.45); --glass-shadow-deep: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55); --strata-ink: 247, 250, 252; --mesh-base: #0d0d10; --mesh-g1: rgba(115, 193, 103, 0.16); --mesh-g2: rgba(31, 116, 201, 0.20); --mesh-veil: rgba(13, 13, 16, 0.55); --cit-bg-light: rgba(255, 255, 255, 0.06); --cit-bg-medium: rgba(255, 255, 255, 0.10); --cit-gray: rgba(255, 255, 255, 0.08); --cit-yellow: #f3ae35; --cit-red: #e25a4e; --cit-orange: #d27a3c; --cit-purple: #8b8fd1; --cit-midnight: #f7fafc; --black-russian: #f7fafc; --cit-teal-darker: #1d6f63; --cit-blue-deep: #071a2d; --epp-navy: #0d0d10; --epp-navy-deep: #07080b; } /* High contrast derives its surfaces from the vendored canon instead of hard-coding a dark one. The canon defines both themes coherently -- [data-contrast="high"] gives --surface-card #121214 with --text-primary #FFFFFF, and [data-theme="light"][data-contrast="high"] gives #FFFFFF with #000000 -- and resolves glass surfaces the same way we do here: `[data-contrast="high"] .cit-glass { background: var(--surface-card) }` ("solid — —glass-blur is 0 in HC"). These were previously pinned to rgba(0, 0, 0, 0.92), which .card paints via `.card:not([class*="bg-"])` in epp_cockpit.css. In the light theme that put canon-black --epp-ink (--epp-ink: var(--text-primary)) on a near-black card at roughly 1:1, so headings were invisible on every page. Deriving from the canon keeps light HC black-on-white and dark HC white-on-dark, with no foreground token changes needed. body.strata-root declares its own high-contrast glass further down and is an always-dark shell, so it is unaffected by this. */ :root[data-contrast="high"] { --glass-bg: var(--surface-card); --glass-bg-deep: var(--surface-canvas); --glass-border: var(--border-subtle); --strata-ink: 255, 255, 255; --cit-yellow: #ffd166; --cit-red: #ff8178; } /* Auto-engage a higher-contrast border/focus treatment when the OS asks for more contrast and the user hasn't made an explicit choice (the pre-paint script in base/layout.html and admin/base.html mirrors this by setting data-contrast="high" from JS, since CSS alone cannot set an attribute). */ @media (prefers-contrast: more) { :root:not([data-contrast]) { --epp-line: rgba(0, 0, 0, 0.38); --epp-line-strong: rgba(0, 0, 0, 0.58); --epp-focus: 0 0 0 0.26rem rgba(0, 62, 126, 0.45); } :root[data-theme="dark"]:not([data-contrast]) { --epp-line: rgba(255, 255, 255, 0.24); --epp-line-strong: rgba(255, 255, 255, 0.40); --epp-focus: 0 0 0 0.26rem rgba(63, 187, 160, 0.48); } } /* ========================================================================== FROZEN STRATA SCOPE — full pre-migration token values. basecamp/base.html (the frozen Strata/Basecamp shell) links only this file, and frozen strata.css consumes the retrofit token surface (--accent, --surface-*, --text-*, --radius-*, --gradient-luxury, ...) whose values changed in the HIG migration. To keep frozen pages pixel-identical, the ENTIRE pre-migration token set is re-declared here scoped to body.strata-root (custom properties inherit to every descendant). Everything outside the Strata shell gets the vendored HIG values. Delete this whole section when Strata is migrated. ========================================================================== */ body.strata-root { /* ---- Typography ----------------------------------------------------- */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace; /* Legacy aliases so existing rules keep resolving. */ --epp-font-sans: var(--font-sans); --epp-font-mono: var(--font-mono); /* ---- CIT brand (canonical Strata values) ---------------------------- */ --cit-blue: #003E7E; --cit-blue-dark: #022a50; --cit-blue-deep: #061f3a; --cit-green: #73C167; --cit-green-dark: #55914a; --cit-teal: #3FBBA0; --cit-teal-dark: #2d9f8d; --cit-teal-darker: #17645c; --cit-yellow: #F9B233; --cit-red: #E94B3B; --cit-orange: #c66b2d; --cit-purple: #575a8f; --cit-midnight: #1D1D1F; --black-russian: #1d1d1f; /* Signature gradients (used for hero text, primary buttons, accents). */ --cit-gradient: linear-gradient(135deg, #003E7E 0%, #3FBBA0 100%); --cit-gradient-text: linear-gradient(135deg, #003E7E 0%, #3FBBA0 60%, #73C167 100%); /* ---- Neutrals / surfaces -------------------------------------------- */ --cit-bg-light: #eef4f2; --cit-bg-medium: #d8e2df; --cit-gray: #F1F2F2; --epp-ink: #172033; --epp-muted: #657083; --epp-line: #dce3e1; --epp-line-strong: #c9d3d0; --epp-page: #edf2f1; --epp-surface: #fbfcfb; --epp-surface-soft: #f4f7f6; --epp-navy: #052f56; --epp-navy-deep: #031d36; /* ---- Glass language (Strata) ---------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-deep: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.7); --glass-blur: blur(12px) saturate(1.4); --glass-blur-deep: blur(20px) saturate(1.5); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 62, 126, 0.08); --glass-shadow-deep: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 2px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 62, 126, 0.12); /* Strata foreground ink as an RGB triple, so alpha variants can theme. */ --strata-ink: 29, 29, 31; /* Animated mesh background tokens. */ --mesh-base: #F8F9FA; --mesh-g1: rgba(115, 193, 103, 0.32); --mesh-g2: rgba(0, 62, 126, 0.18); --mesh-veil: rgba(255, 255, 255, 0.9); /* Subtle noise grain overlaid on glass cards — keep barely perceptible. */ --grain-opacity: 0.025; /* ---- Shadows / focus (cockpit) -------------------------------------- */ --epp-shadow: 0 14px 32px rgba(7, 31, 58, 0.08); --epp-shadow-soft: 0 6px 18px rgba(7, 31, 58, 0.07); --epp-focus: 0 0 0 0.22rem rgba(63, 187, 160, 0.28); /* Token aliases used by the premium retrofit compatibility layer. */ --surface-canvas: var(--epp-page); --surface-card: var(--epp-surface); --surface-card-hover: var(--epp-surface-soft); --surface-input: #ffffff; --border-subtle: var(--epp-line); --border-hover: var(--epp-line-strong); --text-primary: var(--epp-ink); --text-secondary: #425169; --text-muted: var(--epp-muted); --text-faint: #8190a3; --accent: var(--cit-teal); --accent-ink: #ffffff; --gradient-luxury: var(--cit-gradient); --gradient-luxury-soft: linear-gradient(135deg, rgba(0, 62, 126, 0.10), rgba(63, 187, 160, 0.14)); --shadow-card: var(--epp-shadow); --radius-lg: var(--radius-card); --radius-btn: var(--radius-sm); --radius-full: var(--radius-pill); --focus-ring: var(--epp-focus); /* ---- Radius scale --------------------------------------------------- */ --radius-card: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-pill: 999px; /* ---- Motion --------------------------------------------------------- */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --glide: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Semantic mapping ----------------------------------------------- */ --primary-color: var(--cit-blue); --primary-color-dark: var(--cit-blue-dark); --secondary-color: var(--cit-teal); --success-color: var(--cit-green); --warning-color: var(--cit-yellow); --danger-color: var(--cit-red); --dark-color: var(--epp-ink); --light-color: var(--epp-surface-soft); /* ---- Layout --------------------------------------------------------- */ --sidebar-expanded-width: 250px; --sidebar-collapsed-width: 68px; } [data-theme="dark"] body.strata-root { /* Brand brightened for contrast against the deep canvas. */ --cit-blue: #1d74c9; --cit-blue-dark: #0b3159; --cit-blue-deep: #071a2d; --cit-green: #73c167; --cit-green-dark: #58a64e; --cit-teal: #3fbba0; --cit-teal-dark: #2c9a87; --cit-teal-darker: #1d6f63; --cit-yellow: #f3ae35; --cit-red: #e25a4e; --cit-orange: #d27a3c; --cit-purple: #8b8fd1; --cit-midnight: #f7fafc; --black-russian: #f7fafc; --strata-ink: 247, 250, 252; --cit-bg-light: rgba(255, 255, 255, 0.06); --cit-bg-medium: rgba(255, 255, 255, 0.10); --cit-gray: rgba(255, 255, 255, 0.08); --epp-ink: #f7fafc; --epp-muted: rgba(255, 255, 255, 0.58); --epp-line: rgba(255, 255, 255, 0.08); --epp-line-strong: rgba(255, 255, 255, 0.13); --epp-page: #0d0d10; --epp-surface: rgba(255, 255, 255, 0.045); --epp-surface-soft: rgba(255, 255, 255, 0.065); --epp-navy: #0d0d10; --epp-navy-deep: #07080b; /* Glass goes translucent-dark with a luminous top hairline. */ --glass-bg: rgba(22, 24, 30, 0.55); --glass-bg-deep: rgba(26, 28, 36, 0.72); --glass-border: rgba(255, 255, 255, 0.09); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.45); --glass-shadow-deep: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55); --mesh-base: #0d0d10; --mesh-g1: rgba(115, 193, 103, 0.16); --mesh-g2: rgba(31, 116, 201, 0.20); --mesh-veil: rgba(13, 13, 16, 0.55); --epp-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 60px rgba(0, 0, 0, 0.34); --epp-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 28px rgba(0, 0, 0, 0.26); --epp-focus: 0 0 0 0.22rem rgba(63, 187, 160, 0.28); --surface-input: rgba(255, 255, 255, 0.075); --text-secondary: rgba(255, 255, 255, 0.72); --text-faint: rgba(255, 255, 255, 0.42); --accent-ink: #071a2d; --primary-color: var(--cit-teal); --primary-color-dark: var(--cit-teal-dark); --secondary-color: rgba(255, 255, 255, 0.68); --dark-color: var(--epp-ink); --light-color: rgba(255, 255, 255, 0.06); color-scheme: dark; } [data-contrast="high"] body.strata-root { --epp-page: #000000; --epp-surface: #050505; --epp-surface-soft: #101010; --epp-ink: #ffffff; --epp-muted: #f5f5f5; --epp-line: rgba(255, 255, 255, 0.42); --epp-line-strong: rgba(255, 255, 255, 0.72); --glass-bg: rgba(0, 0, 0, 0.92); --glass-bg-deep: rgba(0, 0, 0, 0.96); --glass-border: rgba(255, 255, 255, 0.55); --strata-ink: 255, 255, 255; --cit-blue: #72c7ff; --cit-teal: #61ffd8; --cit-green: #a4ff8f; --cit-yellow: #ffd166; --cit-red: #ff8178; --surface-input: #000000; --text-secondary: #ffffff; --text-faint: #d7d7d7; --accent: #61ffd8; --accent-ink: #000000; --epp-focus: 0 0 0 0.26rem rgba(97, 255, 216, 0.62); color-scheme: dark; } @media (prefers-contrast: more) { :root:not([data-contrast]) body.strata-root { --epp-line: rgba(0, 0, 0, 0.38); --epp-line-strong: rgba(0, 0, 0, 0.58); --epp-focus: 0 0 0 0.26rem rgba(0, 62, 126, 0.45); } :root[data-theme="dark"]:not([data-contrast]) body.strata-root { --epp-line: rgba(255, 255, 255, 0.24); --epp-line-strong: rgba(255, 255, 255, 0.40); --epp-focus: 0 0 0 0.26rem rgba(63, 187, 160, 0.48); } }