/* * Design tokens — the brand seam. * * Every colour, space, radius and font in this application resolves to a custom * property declared here. That is the whole point of the file, and Phase 2 * Block 2A is the moment it was built for: Phase 0 shipped placeholder values * and said so, the reconciliation extracted the real ones from the coming-soon * site, and this file is where they land. No component rule changed to make the * application blue. * * An architecture test refuses a hex literal in any other stylesheet, so a * stray colour cannot have crept in anywhere else to be missed by this edit. * * The tokens are SEMANTIC, not literal: --color-primary, not --color-blue. A * literal name has to be renamed when the brand changes; a semantic one only * has to be re-valued. That distinction is what made this edit one file. * * ─── WHERE THE VALUES COME FROM ──────────────────────────────────────────── * * `ElTrabajador-coming-soon.zip`, read directly rather than described. Eight * brand colours, the radii, the tinted shadows and the motion curve are that * site's; four accessibility defects in it are NOT inherited, and each is * marked below with what was done instead. */ :root { /* ---- brand ---------------------------------------------------------- */ /* * The eight values from the coming-soon system, named semantically. These * are the only place any of them appears. * * Contrast against white, measured: primary 7.99:1, deep 12.10:1, * ink 16.12:1. All three clear WCAG AAA for body text. */ --color-brand-primary: #0848b8; --color-brand-deep: #052f82; --color-brand-soft: #edf4ff; --color-brand-line: #dce7f7; /* * DEFECT 1, CORRECTED. #ff6508 on white is 2.95:1 — it fails AA for body * text (4.5:1) and also fails the 3:1 floor for large text and non-text * UI. The coming-soon page uses it for a word inside its

, which is * the one thing it should not be used for. * * So the brand orange never CARRIES MEANING ON ITS OWN. Two uses survive, * and the distinction is what keeps the client's actual colour on the page: * * decoration — rules, gradient stops, a bar: no meaning, no floor; * a solid fill under a DARK label — ink #10213b on #ff6508 is 5.46:1, * with the boundary carried by a rim in the darker derivative at * 4.76:1 against white. That is the accent button. * * What is forbidden is orange TEXT on white, and an orange fill under a * white label. Anything a reader has to read on a light surface uses * --color-accent-strong, the same hue at 4.76:1 and indistinguishable from * the brand orange in a side-by-side at text size. */ --color-accent: #ff6508; --color-accent-strong: #c74a00; --color-accent-soft: #fff1e8; /* ---- surfaces ------------------------------------------------------- */ --color-background: #ffffff; --color-surface: var(--color-brand-soft); --color-surface-raised: #ffffff; /* ---- text ----------------------------------------------------------- */ --color-text: #10213b; --color-heading: var(--color-brand-deep); /* * DEFECT 2, CORRECTED. The coming-soon muted is #637188: 4.94:1 on white, * which passes, but 4.47:1 on its own soft-blue panel — under AA by three * hundredths. A token that is legible on one surface and not on the next is * a token that will be used on the wrong one. * * Darkened until it clears on BOTH: 5.62:1 on white, 5.08:1 on soft blue. */ --color-text-muted: #5b6880; --color-text-inverse: #ffffff; /* ---- on a brand-coloured surface ------------------------------------ */ /* * The deep-blue panels need their own three values, and they belong here * for the same reason everything else does: `--color-text-muted` is tuned * for white and soft blue and is unreadable on #052f82, so a component that * needed a quieter white would otherwise have invented one locally — which * is precisely the hardcoded brand value this file exists to prevent. * * Measured against #052f82, each composited over it first: the text 9.31:1, * the border 4.11:1 — comfortably past the 3:1 floor for a control's * boundary, on a button whose own label is the full 12.10:1. */ --color-text-on-brand: rgba(255, 255, 255, 0.86); --color-border-on-brand: rgba(255, 255, 255, 0.5); --color-surface-on-brand: rgba(255, 255, 255, 0.1); /* ---- ambient washes ------------------------------------------------- */ /* * The two soft radial glows behind the public hero — the coming-soon page's * own device, and most of why its hero reads as a designed surface rather * than as white space. * * They are WHOLE GRADIENTS rather than colour stops because the alpha ramp * is part of the brand value: the same blue at a different falloff is a * different wash. Keeping them here means the public stylesheet names no * colour at all, in any notation. */ --wash-brand: radial-gradient(circle, rgba(8, 72, 184, 0.15), rgba(8, 72, 184, 0) 68%); --wash-accent: radial-gradient(circle, rgba(255, 101, 8, 0.13), rgba(255, 101, 8, 0) 68%); /* ---- lines ---------------------------------------------------------- */ --color-border: var(--color-brand-line); --color-border-strong: #9fb4d6; /* ---- actions -------------------------------------------------------- */ /* 7.99:1 against --color-primary-contrast: AAA for body text on a button. */ --color-primary: var(--color-brand-primary); --color-primary-hover: var(--color-brand-deep); --color-primary-contrast: #ffffff; --color-primary-soft: var(--color-brand-soft); /* ---- status --------------------------------------------------------- */ --color-danger: #8c1d1d; --color-danger-surface: #fdf1f1; --color-success: #1c5c33; --color-success-surface: #eff7f1; --color-notice-surface: var(--color-brand-soft); /* ---- focus ---------------------------------------------------------- */ /* * DEFECT 4, CORRECTED — and this is the one that could not be fixed by * picking a better hex. * * Phase 0 used a single blue ring. In a blue-dominant palette that is a * keyboard trap: #0b57d0 against the new primary #0848b8 is 1.25:1, so the * focus ring on a primary button was invisible. Measured against every * surface this application has, NO SINGLE COLOUR clears 3:1 on white AND on * #0848b8 AND on #052f82 — a light ring vanishes on white, a dark one * vanishes on the blues. * * So the ring is two-tone, the WCAG 2.2 technique: a light inner ring and a * dark outer halo, drawn together. One of the two is always visible: * * on white inner 1:1 (invisible), outer 16.12:1 * on #0848b8 inner 7.99:1, outer 2.02:1 * on #052f82 inner 12.10:1, outer 1.33:1 * on #edf4ff inner 1.11:1, outer 14.57:1 * * `FocusIndicatorTest` asserts those pairs rather than trusting this * comment. */ --color-focus-inner: #ffffff; --color-focus-outer: #10213b; --focus-ring-inner-width: 2px; --focus-ring-outer-width: 4px; /* ---- spacing -------------------------------------------------------- */ /* A 4px base. Small enough to be useful, coarse enough that spacing stays consistent without anyone inventing a 13px gap. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- typography ----------------------------------------------------- */ /* * The system font stack, unchanged and deliberately so. * * The coming-soon page names Inter first and never loads it — no * @font-face, no stylesheet link — so what that site actually renders in is * this stack already. Adding a webfont now would add a request, a * render-blocking dependency and a self-hosted asset to match a design that * is not using one. */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.25rem; --font-size-4xl: 3rem; /* Generous, because Spanish runs longer than English and wrapped lines are the normal case here rather than the exception. */ --line-height-body: 1.6; --line-height-heading: 1.25; /* The coming-soon display setting: near-solid leading and a tight track, which is what makes its hero read as a brand rather than as a paragraph. Only display sizes get it — at body size it would be unreadable. */ --line-height-display: 1.04; --letter-spacing-display: -0.04em; --letter-spacing-eyebrow: 0.13em; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 800; /* ---- shape and depth ------------------------------------------------ */ /* * The coming-soon card is 28px and its pills are fully round. Phase 0's * 3px/6px stay as the small sizes so no existing workspace control changes * shape; the new large radii are what the public surface uses. */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* * BLUE-TINTED, NEVER NEUTRAL GREY. This is the single detail that makes the * difference between the coming-soon look and a generic card: every shadow * is a wash of the deep brand blue at low alpha, so a raised surface reads * as lifted off a blue-white page rather than as a box with a grey edge. */ --shadow-sm: 0 1px 2px rgba(5, 47, 130, 0.08); --shadow-md: 0 6px 18px rgba(5, 47, 130, 0.08); --shadow-lg: 0 18px 44px rgba(5, 47, 130, 0.12); --shadow-xl: 0 30px 80px rgba(5, 47, 130, 0.14); --shadow-accent: 0 14px 30px rgba(255, 101, 8, 0.25); /* ---- motion --------------------------------------------------------- */ /* * The coming-soon easing, kept because it is most of that site's character: * a fast start with a long settle reads as considered rather than springy. * * DEFECT 3 is corrected in base.css, not here: that page sets * `scroll-behavior: smooth` unguarded, so a reader who asked their operating * system for less motion got animated scrolling anyway. */ --ease-entrance: cubic-bezier(0.2, 0.75, 0.25, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 850ms; /* ---- layout --------------------------------------------------------- */ --measure: 68ch; /* The workspace container, unchanged. */ --container-width: 60rem; /* The public container: the coming-soon site's own 1120px. */ --container-public: 70rem; --container-padding: var(--space-4); --container-padding-public: var(--space-5); }