/* * ============================================ * BRAND CONFIGURATION — visual layer (Veriko) * ============================================ * * This file is the LAST layer of the token cascade * (primitives → semantics → brand). It does ONE job: remap the semantic * ROLES (defined in semantics.css) to Veriko's locked values. It NEVER * defines new variables — new roles are added in semantics.css. * * Values locked in sub-phase 0.6a over rendered HTML (docs/design/design.md * §3 + Apéndice, locks L0.6-*). Each text/background pair carries its WCAG * contrast ratio in a comment (method: BRAND_DESIGN_GUIDE §8 paso 3). The * floor is AA: 4.5:1 normal text · 3:1 large text / UI components. * * WHITE-LABEL — the single editable axis is the ACCENT (design.md §4). The * accent block below is delimited by `@veriko:accent-*` markers and is * GENERATED by `php bin/set-brand-color.php `: it sanitizes the input, * derives the primary/accent/info/link/ring family, validates every derived * pair against AA, and rewrites ONLY that block + `theme_color` in * config/brand.php. Everything OUTSIDE the markers (neutrals, the * "confirmado" green, the state colors, type) is FIXED — the tool never * touches it. For Veriko the accent block holds the hand-tuned 0.6a scale; * a fork re-runs the tool with its own color. A CI test * (tests/integration/test_brand_color_aa.php) re-validates this file's pairs. * * TO REBRAND: * 1. `php bin/set-brand-color.php "#rrggbb"` — sets the accent + theme_color, * rejects any color that breaks AA. * 2. Replace logo files in public/assets/brand/ + public/assets/img/. * 3. Regenerate OG images: `php bin/generate-og.php`. * * ============================================ */ :root { /* @veriko:accent-start */ /* Veriko accent — hand-tuned 0.6a scale (L0.6-ACENTO): deep sapphire-steel, apart from catalog blue #2563eb / navy #0f4c81. A fork regenerates this block via `bin/set-brand-color.php` (sanitize → derive → AA-validate). */ --color-primary: #2f4f99; /* white text on fill = 7.78:1 ✓ AA */ --color-primary-hover: #294385; /* white text on fill = 9.39:1 ✓ AAA */ --color-primary-active: #25386b; /* darker pressed state */ --color-primary-light: #eef2fb; /* selection tint; accent text #213056 on it = 11.6:1 ✓ */ --color-primary-contrast: #ffffff; --color-accent: #2f4f99; /* = primary; white on fill = 7.78:1 ✓ */ --color-accent-hover: #294385; /* 9.39:1 ✓ */ --color-accent-active: #25386b; --color-accent-light: #eef2fb; --color-accent-contrast: #ffffff; --color-text-link: #294385; /* link / accent-text on surface = 9.39:1 ✓ AAA */ --color-text-link-hover: #25386b; --color-info: #2f4f99; /* derived from accent; white on fill = 7.78:1 ✓ */ --color-info-hover: #294385; --color-info-light: #eef2fb; --color-info-text: #294385; /* / surface = 9.39:1 ✓ AAA */ --color-border-focus: #2f4f99; /* focus ring / surface = 7.78:1 ✓ AA (UI 3:1) */ --ring-color: #2f4f99; --input-focus-ring: 0 0 0 2px rgba(47, 79, 153, 0.30); /* @veriko:accent-end */ /* ==== FIXED below — neutrals, states, type. The white-label tool never writes these (design.md §4). ==== */ /* ---- Surfaces & backgrounds — "Neutro verdadero" (achromatic) — L0.6-NEUTRO ---- */ --color-bg: #fafafa; /* page bg; text-primary #171717 on it = 17.2:1 ✓ AAA */ --color-surface: #ffffff; /* card/surface; text-primary on it = 17.9:1 ✓ AAA */ --color-surface-raised: #ffffff; --color-surface-sunken: #f5f5f5; /* sunken / tonal band */ --color-bg-sidebar: #0a0a0a; /* neutral-950 dark sidebar; white text = 19.8:1 ✓ AAA */ --color-bg-topbar: #ffffff; /* ---- Text — neutrals ---- */ --color-text-primary: #171717; /* / surface = 17.9:1 ✓ AAA · / bg = 17.2:1 ✓ AAA */ --color-text-secondary: #525252; /* / surface = 7.83:1 ✓ AAA */ --color-text-tertiary: #737373; /* / surface = 4.74:1 ✓ AA (metadata) */ --color-text-disabled: #a3a3a3; /* disabled only — not held to 4.5:1 */ --color-text-inverse: #ffffff; /* ---- Sidebar (on #0a0a0a) — neutral family ---- */ --color-sidebar-text: #d4d4d4; /* neutral-300 on #0a0a0a = 13.3:1 ✓ AAA */ --color-sidebar-text-active: #ffffff; --color-sidebar-icon: #a3a3a3; /* neutral-400 on #0a0a0a = 7.8:1 ✓ AAA */ --color-sidebar-icon-active: #ffffff; --color-sidebar-section: #d4d4d4; /* group labels — neutral-300 (was -icon #a3a3a3, too dim on black) */ /* ---- Status: Success — "Verde verdad" (family separate from accent) ---- Lock L0.6-CONFIRM. Always paired with a check icon + the word "Confirmado" (never color alone — design.md §6). */ --color-success: #15803d; /* badge fill; white text on it = 5.02:1 ✓ AA */ --color-success-hover: #166534; --color-success-light: #f0fdf4; /* tint; #15803d text on it = 4.85:1 ✓ AA */ --color-success-text: #15803d; /* / surface = 5.02:1 ✓ AA */ /* ---- Status: Danger / no-confirmado ---- */ --color-danger: #dc2626; /* badge fill; white text on it = 4.77:1 ✓ AA */ --color-danger-hover: #b91c1c; --color-danger-light: #fef2f2; --color-danger-text: #b91c1c; /* / surface = 6.47:1 ✓ AAA */ /* ---- Status: Warning / pendiente — amber-700 (NOT amber-500) ---- Lock L0.6-M2: amber-500 #f59e0b with white text fails AA (2.15:1); the warning that carries text uses amber-700 instead. */ --color-warning: #b45309; /* text & fill-with-white-text = 5.03:1 ✓ AA */ --color-warning-hover: #92400e; --color-warning-light: #fffbeb; --color-warning-text: #b45309; /* / surface = 5.03:1 ✓ AA */ /* ---- Borders ---- */ --color-border: #e5e5e5; /* hairline separator / surface = 1.20:1 (n/a — not text) */ --color-border-strong: #d4d4d4; /* ---- Code / JSON editor — Catppuccin Mocha (dark on both themes, by convention; matches VS Code / playground). Not a brand surface. ---- */ --pgc-editor-bg: #1e1e2e; --pgc-editor-fg: #cdd6f4; /* ---- Type — Inter (UI/data) + JetBrains Mono (technical). Ceiling 700 (lock L0.6-TIPO; 800/900 retired from the font load). ---- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }