/* era-tokens.css - the one token architecture. --------------------------------------------------------------------------- WHAT THIS IS. A primitive layer (scales that never change) and a semantic layer (roles that a surface binds). Nothing here is a component and nothing here is a selector beyond the theme blocks themselves. A theme block may only re-bind tokens: no properties, no descendants, no !important. That restriction is the whole point - class="academy editorial" on both and , each declaring background with !important, is how an entire palette ended up dead-but-still-computed on 191 pages. TWO AXES, TWO ATTRIBUTES. This is a deliberate departure from the written plan, which put the surface family on data-theme. It cannot go there: data-theme on is already owned by the admin light/dark switch (AdminLayout.astro:194 reads localStorage['era-theme'] and writes 'dark' or 'light'; admin.css has ~69 selectors keyed on [data-theme="light"]; EmployeeShell pins data-theme="light"). Stamping data-theme="obsidian" would have the first click of that switch erase the surface identity. data-surface which family. Server-rendered, never changes at runtime. marketing | editorial | admin | cream | warm data-theme light | dark. Unchanged, still owned by the existing switch. They are orthogonal, which is also the truer model: the plan's "obsidian vs bloom" is not two themes, it is data-surface="admin" x data-theme="dark|light". PHASE 0 CONTRACT. At the time of writing NOTHING consumes these tokens. That is intentional and it is what makes this file safe to land: the rendered diff is provably empty. The alias blocks that switch 5,370 existing var() call sites onto this architecture are Phase 2 and are not in this file yet. DARK. Every colour role is defined on bare :root first. Dark redefines tokens only, guarded :root:not([data-theme="light"]) so an explicit light choice beats a dark OS, and again under [data-theme="dark"] so the switch wins in both directions. A colour whose only definition sits inside a media or attribute block does not exist in the unstamped state - that is the classic unreadable-surface bug and this file must never contain one. */ :root { /* ====================================================================== PRIMITIVES. Not themed. A surface may not redefine anything in this block; if a surface needs a different value the role belongs in the semantic layer or in a component slot, not here. ====================================================================== */ /* ---- type. Ten steps, replacing the 46 distinct sizes found across the stylesheets. Provenance, not invention: t-5/6/7 are wellness.css:198-200 (--w-text-h2/-h1/-display) verbatim and t-00/0/2/3/4 are workforce.css:215-219 (--wf-t-micro/-meta/-body/-title/-lg) verbatim, so both sheets migrate at zero cost. t-1 is the employee portal's most-used size and admin's #2. 11px is a hard floor: 5.5px, 7px, 8px, 9px and 9.5px all currently ship. */ --era-t-00: 0.6875rem; /* 11px floor. badge, stat label, numplate */ --era-t-0: 0.75rem; /* 12px meta, timestamp, table header */ --era-t-1: 0.8125rem; /* 13px dense UI row - admin/employee default */ --era-t-2: 0.875rem; /* 14px body-dense */ --era-t-3: 1rem; /* 16px body, and THE INPUT FLOOR (iOS zooms any focused control below this) */ --era-t-4: 1.125rem; /* 18px lead paragraph, section head */ --era-t-5: clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem); /* 21 -> 28 */ --era-t-6: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem); /* 26 -> 36 */ --era-t-7: clamp(2rem, 1.45rem + 2.75vw, 3.25rem); /* 32 -> 52 */ --era-t-8: clamp(2.6rem, 7vw, 5.75rem); /* 42 -> 92 */ /* ---- weight. Four. 650/660/670/680/690 and 550/750/800 are dead values: the Google Fonts requests use discrete wght@ instance lists rather than ranges, so a 650 snaps to 600 or 700 and a synthesised 800 is a faux bold. They read as intent in the source and render as neither. */ --era-w-regular: 400; --era-w-medium: 500; --era-w-semi: 600; --era-w-bold: 700; /* ---- leading and tracking. wellness.css:204-206 plus AquinTutor's 0.96, which is load-bearing: Fraunces 500 at -0.02em with sub-1.0 leading IS the institutional-plate voice. Normalising it to 600/1.1 destroys it. */ --era-lh-display: 0.96; --era-lh-tight: 1.12; --era-lh-snug: 1.3; --era-lh-normal: 1.55; --era-lh-relaxed: 1.65; --era-tr-hero: -0.028em; --era-tr-display: -0.02em; --era-tr-body: -0.005em; --era-tr-caps-sm: 0.08em; --era-tr-caps: 0.14em; --era-tr-caps-lg: 0.22em; /* the mono numplate convention */ /* ---- space. 4px base. Identical rungs to the --era-space-* already in era-ui.css and to --w-space-* in wellness.css; --wf-s-* and --em-* are subsets. Every sheet that already tokenises spacing maps 1:1. */ --era-s-0: 0; --era-s-1: 4px; --era-s-2: 8px; --era-s-3: 12px; --era-s-4: 16px; --era-s-5: 20px; --era-s-6: 24px; --era-s-7: 32px; --era-s-8: 40px; --era-s-9: 48px; --era-s-10: 64px; --era-s-11: 80px; --era-s-12: 96px; /* ---- the layout invariants everybody re-guesses. --era-tap-min is not negotiable and is not a suggestion: admin.css contains the string 44px zero times and its ~200 sidebar links are about 33px tall. */ --era-tap-min: 44px; --era-control-h: 44px; --era-control-h-sm: 36px; /* @media (pointer: fine) ONLY */ --era-edge: 16px; /* page gutter; a surface may re-bind this */ --era-container: 72rem; --era-container-read: 38rem; --era-safe-top: env(safe-area-inset-top, 0px); --era-safe-bottom: env(safe-area-inset-bottom, 0px); --era-safe-left: env(safe-area-inset-left, 0px); --era-safe-right: env(safe-area-inset-right, 0px); --era-z-base: 0; --era-z-raised: 10; --era-z-sticky: 100; --era-z-overlay: 200; --era-z-sheet: 300; --era-z-fab: 350; --era-z-toast: 400; /* ---- radius. wellness.css:160-165 and mail-product.css:72 exactly - the two most-tokenised sheets in the repo, 263 and 102 var() consumers, so both migrate free. Absorbs admin's 6/8/10/12/14 spread and kills the three spellings of pill (100px, 999px, 99px). */ --era-r-xs: 6px; /* tag, chip, swatch, checkbox */ --era-r-sm: 10px; /* input, small control */ --era-r-md: 14px; /* button, list row, card */ --era-r-lg: 20px; /* feature card, modal */ --era-r-xl: 28px; /* sheet, hero panel */ --era-r-pill: 999px; --era-r-circle: 50%; /* ---- elevation. Geometry here, hue in the theme: warm-vs-cool shadow is a real identity difference (wellness uses rgba(92,68,46,...) and says "never grey"; admin uses near-black). Geometry is mail-product.css:74-76. */ --era-e-0: none; --era-e-1: 0 1px 2px var(--era-sh-1); --era-e-2: 0 2px 8px var(--era-sh-2), 0 1px 2px var(--era-sh-1); --era-e-3: 0 12px 32px var(--era-sh-3), 0 2px 8px var(--era-sh-2); --era-e-4: 0 24px 60px var(--era-sh-4); /* ---- motion. Named for PURPOSE, never for appearance. There is deliberately no --era-m-hover and no ease-bounce: workforce.css omits both on purpose with the reason written down, because a token named for an appearance gets reached for by anything that wants that appearance. --era-m-none is 0ms and exists so a surface can rule out motion by binding rather than by policing every rule. */ --era-m-none: 0ms; --era-m-instant: 90ms; /* state flip: checked, pressed */ --era-m-quick: 160ms; /* enter/leave: menu, tooltip */ --era-m-settle: 260ms; /* layout settle: drawer, sheet */ --era-ease: cubic-bezier(0.4, 0, 0.2, 1); --era-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ====================================================================== SEMANTIC LAYER. Thirteen ink/surface roles, four status families, one focus. Everything below is re-bound by a surface. Nothing else in the codebase may be a colour. The values on bare :root are a neutral warm-light binding. They are the fallback for a page that is not stamped, and they must be legible on their own - an unstamped page is a page, not an error. ====================================================================== */ /* grounds */ --era-surface: #FAF8F5; --era-surface-raised: #FFFFFF; --era-surface-sunk: #F3EFE8; /* boundaries. TWO, and the split is load-bearing. A decorative hairline is exempt from contrast (SC 1.4.11); the only boundary of a form control is not. AquinTutor's --rule is 1.40:1 across 917 sites and is exactly why those pages read as a printed prospectus - but 141 of those hairlines are the sole border of an input. Splitting fixes 141 and repaints none. */ --era-border: rgba(22, 19, 15, 0.09); --era-border-control: rgba(14, 11, 8, 0.46); /* >= 3:1 on -raised */ --era-border-strong: rgba(22, 19, 15, 0.22); /* ink ladder. Four levels, and the floor of each is a promise: -ink and -ink-2 >= 7:1, -ink-muted >= 4.5:1 on ALL THREE grounds, -ink-faint >= 3:1 and NON-TEXT ONLY - icons, rules, disabled states. -ink-faint is where #6E6E78 (1,150 admin text uses at 3.79:1) and #9a8f7d (80 portal text uses at 3.18:1) go: legal as a boundary at exactly the ratio that fails as text. */ --era-ink: #0E0B08; --era-ink-2: #2E2520; --era-ink-muted: #5a544b; --era-ink-faint: #8a8078; /* accent. THREE, and this is the most important idea in the file. #FF4F00 is 3.30:1 on white and 3.11:1 on cream. It is currently the eyebrow colour on every page, every required-field asterisk, the nav CTA fill under white text and 530 inline admin text uses. None of those pass. --era-accent legal as fill, 1-3px rule, border, underline, large display, focus ring. NEVER normal text. --era-accent-text the text-safe form. Links, asterisks, eyebrows. --era-accent-ink what sits ON the accent fill, measured against it. */ --era-accent: #FF4F00; --era-accent-text: #B33700; --era-accent-ink: #FFFFFF; --era-accent-soft: #FFF3EE; --era-accent-glow: rgba(255, 79, 0, 0.28); --era-focus: #B33700; /* status. Four roles each - the workforce.css shape, which is the only one in the repo that survives being put on a light and a dark ground. */ --era-ok: #1A6B35; --era-ok-ink: #14532d; --era-ok-bg: #EBF5EF; --era-ok-border: #B2DCBF; --era-warn: #8A6A12; --era-warn-ink: #7a5a2e; --era-warn-bg:#FBF4E2; --era-warn-border:#F0E0C6; --era-danger: #A32020; --era-danger-ink: #8a2c21; --era-danger-bg:#FBEDED; --era-danger-border:#EFCFCB; --era-info: #1045BB; --era-info-ink: #0b3a8f; --era-info-bg:#EBF0FF; --era-info-border:#B0C4F8; /* the fifth status, which is not a status. "Unknown" must never collapse into "warning": warning means something is wrong, unknown means we could not read it. admin/index.astro:239 paints an unreadable figure in #e8c46a and drops data-count so the count-up cannot animate a confident zero; portal/index.astro:569 says "This is not a statement that you have none." That distinction is product honesty and it gets a token. */ --era-unknown: #8A6A12; --era-unknown-ink: #7a5a2e; --era-unknown-bg: #FBF4E2; /* shadow hue, consumed by --era-e-* above */ --era-sh-1: rgba(26, 21, 16, 0.05); --era-sh-2: rgba(26, 21, 16, 0.07); --era-sh-3: rgba(26, 21, 16, 0.12); --era-sh-4: rgba(26, 21, 16, 0.18); /* type roles. A stylesheet may not name a font family directly; it binds one of these three. That rule is what makes a missing face findable: Fraunces was set in 57 files and loaded by none of them, and Geist Mono is asked for 529 times on a layout that never loads it. */ --era-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --era-font-display: Georgia, 'Times New Roman', serif; --era-font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* component slots. Not every value belongs on a scale. These exist so a surface can carry its own density without forking the primitives - AquinTutor's 18/22/26 rhythm is a real editorial density, and snapping it to a 16/24 grid visibly changes the paper feel. */ --era-pad-card: var(--era-s-6); --era-pad-panel: var(--era-s-4); --era-gap-row: var(--era-s-3); --era-row-h: 48px; --era-bar-h: 54px; } /* ========================================================================== SURFACE THEMES. Token re-bindings only. ========================================================================== */ /* ---- marketing. Saffron is a signature, not a fill: on the homepage it is a 46x3px rule, a 3x8px scroll dot, a 1px hover border at 0.4 alpha, the micro-caps and the italic . Never a filled hero panel. --era-accent-text exists so the eyebrow and the link stop failing AA without saffron disappearing from the page. */ [data-surface="marketing"] { --era-surface: #FAF8F5; --era-surface-raised: #FFFFFF; --era-surface-sunk: #F3EFE8; --era-border: rgba(22, 19, 15, 0.09); --era-border-control: rgba(14, 11, 8, 0.46); --era-ink: #0E0B08; --era-ink-2: #2E2520; --era-ink-muted: #5a544b; --era-ink-faint: #8a8078; --era-accent: #FF4F00; --era-accent-text: #B33700; --era-accent-ink: #FFFFFF; --era-accent-soft: #FFF3EE; --era-focus: #FF4F00; /* 3.30:1 - illegal as text, legal as a ring */ --era-edge: 5vw; /* the one spacing primitive this family already shares consistently */ --era-e-1: none; --era-e-2: none; /* paper does not float */ --era-font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --era-font-display: 'Cormorant Garamond', Georgia, serif; --era-font-num: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- AquinTutor. Values are aquintutor-academy.css:432-450 verbatim, so the Phase 2 alias block is a no-op repaint. --era-border stays at 1.40:1 on purpose: 917 hairlines are what make this read as a newspaper of record, and only the 141 that bound a form control need to move. */ [data-surface="editorial"] { --era-surface: #FBFAF4; --era-surface-raised: #FBFAF4; --era-surface-sunk: #F4F1E4; --era-border: rgba(11, 14, 20, 0.15); --era-border-control: rgba(11, 14, 20, 0.48); --era-border-strong: rgba(11, 14, 20, 0.28); --era-ink: #0B0E14; --era-ink-2: #3B3A30; --era-ink-muted: #5E5D4F; --era-ink-faint: #9C9A85; --era-accent: #A0421E; --era-accent-text: #A0421E; --era-accent-ink: #FBFAF4; --era-accent-soft: #F4E9E2; --era-focus: #b3541e; --era-pad-card: 22px; /* the editorial density, kept deliberately */ --era-pad-panel: 18px; --era-e-1: none; --era-e-2: none; --era-font-ui: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --era-font-display: 'Fraunces', Georgia, serif; --era-font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- admin, dark. The obsidian ground. --era-ink-faint is where #6e6e78 lands: 3.79:1, which retires its 1,150 uses as text and keeps it as the hairline and icon colour it is legal for. */ [data-surface="admin"] { --era-surface: #07090d; --era-surface-raised: #0F0F14; --era-surface-sunk: #15151A; --era-border: #1A1A1F; --era-border-control: #6E6E78; --era-border-strong: #2A2A30; --era-ink: #f3f5f9; --era-ink-2: #d8d8de; --era-ink-muted: #8a8a94; /* 5.59:1 on -raised */ --era-ink-faint: #6e6e78; /* 3.79:1 - NON-TEXT ONLY */ --era-accent: #f2731c; --era-accent-text: #FF7040; --era-accent-ink: #1a0f08; /* 6.03:1 on the fill. Dark-ink-on-warm is the pattern that survives AA; white on #FF4F00 is 3.30:1 and does not. */ --era-accent-soft: rgba(242, 115, 28, 0.15); --era-accent-glow: rgba(242, 115, 28, 0.42); --era-focus: #FF7040; --era-unknown: #e8c46a; --era-unknown-ink: #e8c46a; --era-unknown-bg: rgba(232, 196, 106, 0.10); --era-ok: #34d399; --era-ok-ink: #6ee7b7; --era-ok-bg: rgba(16, 185, 129, 0.10); --era-ok-border: rgba(16, 185, 129, 0.32); --era-warn: #fbbf24; --era-warn-ink: #fcd34d; --era-warn-bg:rgba(245, 158, 11, 0.10); --era-warn-border: rgba(245, 158, 11, 0.32); --era-danger: #f87171; --era-danger-ink: #fca5a5; --era-danger-bg:rgba(239, 68, 68, 0.07); --era-danger-border: rgba(239, 68, 68, 0.32); --era-info: #60A5FA; --era-info-ink: #93C5FD; --era-info-bg:rgba(96, 165, 250, 0.10); --era-info-border: rgba(96, 165, 250, 0.32); --era-sh-1: rgba(0, 0, 0, 0.35); --era-sh-2: rgba(0, 0, 0, 0.40); --era-sh-3: rgba(0, 0, 0, 0.45); --era-sh-4: rgba(0, 0, 0, 0.55); --era-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --era-font-display: 'Space Grotesk', system-ui, sans-serif; --era-font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- admin, light. This is "bloom", and it exists as forty lines of token re-binding to replace 69 [style*="background:#0f0f14"] attribute selectors and 70 !important declarations. Those selectors only ever matched an inline style attribute, so the 82 admin pages that correctly moved their CSS into a scoped