diff --git a/src/ae-c-lci-new.css b/src/ae-c-lci-new.css new file mode 100644 index 00000000..f8eb0223 --- /dev/null +++ b/src/ae-c-lci-new.css @@ -0,0 +1,346 @@ +/* ============================================================ + * LCI Theme — NEW VERSION (for review/approval before swap) + * Source: LCI Brand Guidelines, March 2023 — leanconstruction.org + * + * Current live version: src/ae-c-lci.css ← DO NOT TOUCH YET + * Theme selector: data-theme="AE_c_LCI_new" + * + * TO ACTIVATE FOR TESTING: change the app's theme setting from + * 'AE_c_LCI' to 'AE_c_LCI_new'. Both files can coexist safely + * (different data-theme selectors, no conflicts). + * + * TO GO LIVE: change app theme to 'AE_c_LCI_new', move this file + * to ae-c-lci.css (old file → ~/tmp/agents_trash), update the + * selector back to 'AE_c_LCI', and remove this comment block. + * + * ============================================================ + * KEY CHANGES FROM CURRENT VERSION + * ============================================================ + * + * 1. PRIMARY BLUE — anchored to the official LCI blue #3a5997. + * Old primary-500: oklch(47% 0.11 262°) — too light, undersaturated. + * New primary-500: oklch(39% 0.14 264°) ≈ #3a5997 (RGB 58/90/152, + * CMYK 87/71/13/1, Pantone 19-3952 TCX "Surf the Web"). + * Effect: buttons, links, and key UI chrome will read as the correct + * LCI navy rather than the current washed-out periwinkle. + * + * 2. SECONDARY — rebuilt from LCI's three-stop blue secondary palette. + * Light: #d4e7f7 (RGB 212/231/247) → near secondary-50 + * Mid: #3598dc (RGB 53/152/220) → secondary-500 + * Dark: #173378 (RGB 23/51/120) → near secondary-950 + * The hue shifted from ~264° to ~245° to capture the brighter, + * more turquoise-leaning LCI blue correctly. + * + * 3. TERTIARY (Purple) — corrected to LCI Dewberry #8f44ad. + * Old: oklch(52.73% 0.17 315°) — too light, low chroma. + * New: oklch(43% 0.20 309°) — darker, more saturated. + * Pantone 18-3533 TCX "Dewberry". + * + * 4. SUCCESS (Teal) — minor adjustment, was already close. + * #1bbc9d (RGB 27/188/157), Pantone 15-5728 TCX "Mint Leaf". + * + * 5. ERROR (Red) — corrected to LCI Cherry Tomato #df3527. + * Old: oklch(59.32% 0.21 29°) — too light (6 pts), low chroma. + * New: oklch(53% 0.27 28°) — correctly saturated, richer red. + * Pantone 17-1563 TCX "Cherry Tomato". + * + * 6. WARNING — not in LCI brand guide. Keeping warm amber as a + * UI convention (slightly adjusted from current). + * + * 7. TYPOGRAPHY — added per brand guide (p.12): + * Headings: 'Proxima Nova', 'Montserrat', system-ui, sans-serif + * Body: 'Palatino Linotype', 'Palatino', 'Book Antiqua', serif + * + * NOTE on Proxima Nova: it is a licensed font (Adobe/Fontspring). + * Montserrat is the free Google Fonts alternative — load it via + * + * in app.html if it isn't already present. + * + * NOTE on body serif: Palatino is the LCI print/content spec. In + * a data-dense web app interface, the serif can feel heavy. If the + * client prefers the clean UI look, override --base-font-family + * to 'Proxima Nova', 'Montserrat', system-ui, sans-serif — which + * keeps the brand font for both headings and body, just sans-serif. + * + * 8. HEADING COLOR — set to primary-500 (LCI blue) per the brand + * guide PDF, where all section headings are printed in LCI blue. + * + * 9. SURFACE — subtle hue shift from 196° (teal, wrong direction) + * to 248° (blue, aligned with LCI's blue-dominant identity). + * ============================================================ */ + +[data-theme='AE_c_LCI_new'] { + --text-scaling: 1.067; + --base-font-color: var(--color-surface-950); + --base-font-color-dark: var(--color-surface-50); + + /* LCI brand body font: Palatino (serif). See note above re: web app use. */ + --base-font-family: 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif; + --base-font-size: inherit; + --base-line-height: inherit; + --base-font-weight: normal; + --base-font-style: normal; + --base-letter-spacing: 0em; + + /* LCI brand heading font: Proxima Nova (fallback: Montserrat). + Heading color: LCI blue — as shown in the brand guide PDF. */ + --heading-font-color: var(--color-primary-500); + --heading-font-color-dark: var(--color-primary-300); + --heading-font-family: 'Proxima Nova', 'Montserrat', system-ui, sans-serif; + --heading-font-weight: bold; + --heading-font-style: normal; + --heading-letter-spacing: inherit; + + --anchor-font-color: var(--color-primary-500); + --anchor-font-color-dark: var(--color-primary-300); + --anchor-font-family: inherit; + --anchor-font-size: inherit; + --anchor-line-height: inherit; + --anchor-font-weight: inherit; + --anchor-font-style: inherit; + --anchor-letter-spacing: inherit; + --anchor-text-decoration: none; + --anchor-text-decoration-hover: underline; + --anchor-text-decoration-active: none; + --anchor-text-decoration-focus: none; + + --spacing: 0.25rem; + --radius-base: 0.375rem; + --radius-container: 0.75rem; + --default-border-width: 1px; + --default-divide-width: 1px; + --default-ring-width: 1px; + + --body-background-color: var(--color-surface-50); + --body-background-color-dark: var(--color-surface-950); + + /* ---------------------------------------------------------- + * PRIMARY — LCI Brand Blue + * #3a5997 | RGB 58/90/152 | CMYK 87/71/13/1 + * Pantone 19-3952 TCX "Surf the Web" + * + * Anchored at primary-500. Old version was too light (47%) + * and undersaturated (C=0.11). Correct value is ~L39%, C0.14. + * ---------------------------------------------------------- */ + --color-primary-50: oklch(94% 0.03 264deg); + --color-primary-100: oklch(88% 0.05 264deg); + --color-primary-200: oklch(79% 0.07 264deg); + --color-primary-300: oklch(68% 0.09 264deg); + --color-primary-400: oklch(56% 0.12 264deg); + --color-primary-500: oklch(39% 0.14 264deg); /* ≈ #3a5997 — LCI primary blue */ + --color-primary-600: oklch(33% 0.13 265deg); + --color-primary-700: oklch(27% 0.12 265deg); + --color-primary-800: oklch(21% 0.11 266deg); + --color-primary-900: oklch(15% 0.09 266deg); + --color-primary-950: oklch(10% 0.07 267deg); + --color-primary-contrast-dark: var(--color-primary-950); + --color-primary-contrast-light: var(--color-primary-50); + --color-primary-contrast-50: var(--color-primary-contrast-dark); + --color-primary-contrast-100: var(--color-primary-contrast-dark); + --color-primary-contrast-200: var(--color-primary-contrast-dark); + --color-primary-contrast-300: var(--color-primary-contrast-dark); + --color-primary-contrast-400: var(--color-primary-contrast-dark); + --color-primary-contrast-500: var(--color-primary-contrast-light); + --color-primary-contrast-600: var(--color-primary-contrast-light); + --color-primary-contrast-700: var(--color-primary-contrast-light); + --color-primary-contrast-800: var(--color-primary-contrast-light); + --color-primary-contrast-900: var(--color-primary-contrast-light); + --color-primary-contrast-950: var(--color-primary-contrast-light); + + /* ---------------------------------------------------------- + * SECONDARY — LCI Secondary Blue Scale + * Light: #d4e7f7 | RGB 212/231/247 | CMYK 15/3/0/0 → near -50 + * Mid: #3598dc | RGB 53/152/220 | CMYK 71/28/0/0 → -500 + * Dark: #173378 | RGB 23/51/120 | CMYK 100/92/24/10 → near -950 + * + * Hue shifted from 264° (primary direction) to 245° to correctly + * capture the brighter, more sky-blue character of this palette. + * ---------------------------------------------------------- */ + --color-secondary-50: oklch(93% 0.03 245deg); /* ≈ #d4e7f7 — LCI light blue */ + --color-secondary-100: oklch(88% 0.05 246deg); + --color-secondary-200: oklch(82% 0.08 246deg); + --color-secondary-300: oklch(74% 0.11 246deg); + --color-secondary-400: oklch(67% 0.15 245deg); + --color-secondary-500: oklch(60% 0.17 245deg); /* ≈ #3598dc — LCI medium blue */ + --color-secondary-600: oklch(52% 0.16 248deg); + --color-secondary-700: oklch(43% 0.15 252deg); + --color-secondary-800: oklch(34% 0.14 257deg); + --color-secondary-900: oklch(26% 0.14 262deg); + --color-secondary-950: oklch(18% 0.12 265deg); /* ≈ #173378 — LCI dark navy */ + --color-secondary-contrast-dark: var(--color-secondary-950); + --color-secondary-contrast-light: var(--color-secondary-50); + --color-secondary-contrast-50: var(--color-secondary-contrast-dark); + --color-secondary-contrast-100: var(--color-secondary-contrast-dark); + --color-secondary-contrast-200: var(--color-secondary-contrast-dark); + --color-secondary-contrast-300: var(--color-secondary-contrast-dark); + --color-secondary-contrast-400: var(--color-secondary-contrast-dark); + --color-secondary-contrast-500: var(--color-secondary-contrast-dark); + --color-secondary-contrast-600: var(--color-secondary-contrast-dark); + --color-secondary-contrast-700: var(--color-secondary-contrast-light); + --color-secondary-contrast-800: var(--color-secondary-contrast-light); + --color-secondary-contrast-900: var(--color-secondary-contrast-light); + --color-secondary-contrast-950: var(--color-secondary-contrast-light); + + /* ---------------------------------------------------------- + * TERTIARY — LCI Accent Purple / Dewberry + * #8f44ad | RGB 143/68/173 | CMYK 53/84/0/0 + * Pantone 18-3533 TCX "Dewberry" + * + * Old: oklch(52.73% 0.17 315°) — too light by ~10pts, low chroma. + * New: oklch(43% 0.20 309°) — matches the actual LCI purple. + * ---------------------------------------------------------- */ + --color-tertiary-50: oklch(94% 0.04 315deg); + --color-tertiary-100: oklch(87% 0.07 313deg); + --color-tertiary-200: oklch(79% 0.10 312deg); + --color-tertiary-300: oklch(70% 0.14 311deg); + --color-tertiary-400: oklch(60% 0.18 310deg); + --color-tertiary-500: oklch(43% 0.20 309deg); /* ≈ #8f44ad — LCI Dewberry purple */ + --color-tertiary-600: oklch(37% 0.18 308deg); + --color-tertiary-700: oklch(31% 0.16 307deg); + --color-tertiary-800: oklch(24% 0.14 306deg); + --color-tertiary-900: oklch(18% 0.11 304deg); + --color-tertiary-950: oklch(12% 0.08 302deg); + --color-tertiary-contrast-dark: var(--color-tertiary-950); + --color-tertiary-contrast-light: var(--color-tertiary-50); + --color-tertiary-contrast-50: var(--color-tertiary-contrast-dark); + --color-tertiary-contrast-100: var(--color-tertiary-contrast-dark); + --color-tertiary-contrast-200: var(--color-tertiary-contrast-dark); + --color-tertiary-contrast-300: var(--color-tertiary-contrast-dark); + --color-tertiary-contrast-400: var(--color-tertiary-contrast-dark); + --color-tertiary-contrast-500: var(--color-tertiary-contrast-light); + --color-tertiary-contrast-600: var(--color-tertiary-contrast-light); + --color-tertiary-contrast-700: var(--color-tertiary-contrast-light); + --color-tertiary-contrast-800: var(--color-tertiary-contrast-light); + --color-tertiary-contrast-900: var(--color-tertiary-contrast-light); + --color-tertiary-contrast-950: var(--color-tertiary-contrast-light); + + /* ---------------------------------------------------------- + * SUCCESS — LCI Teal / Mint Leaf + * #1bbc9d | RGB 27/188/157 | CMYK 73/0/51/0 + * Pantone 15-5728 TCX "Mint Leaf" + * + * Old version was close (L71% vs correct ~L68%). Minor + * adjustment; hue and chroma were already accurate. + * ---------------------------------------------------------- */ + --color-success-50: oklch(96% 0.05 178deg); + --color-success-100: oklch(90% 0.07 177deg); + --color-success-200: oklch(85% 0.09 176deg); + --color-success-300: oklch(80% 0.11 176deg); + --color-success-400: oklch(74% 0.12 175deg); + --color-success-500: oklch(68% 0.14 175deg); /* ≈ #1bbc9d — LCI Mint Leaf teal */ + --color-success-600: oklch(61% 0.13 173deg); + --color-success-700: oklch(54% 0.12 172deg); + --color-success-800: oklch(46% 0.10 170deg); + --color-success-900: oklch(38% 0.09 168deg); + --color-success-950: oklch(29% 0.07 165deg); + --color-success-contrast-dark: var(--color-success-950); + --color-success-contrast-light: var(--color-success-50); + --color-success-contrast-50: var(--color-success-contrast-dark); + --color-success-contrast-100: var(--color-success-contrast-dark); + --color-success-contrast-200: var(--color-success-contrast-dark); + --color-success-contrast-300: var(--color-success-contrast-dark); + --color-success-contrast-400: var(--color-success-contrast-dark); + --color-success-contrast-500: var(--color-success-contrast-dark); + --color-success-contrast-600: var(--color-success-contrast-dark); + --color-success-contrast-700: var(--color-success-contrast-light); + --color-success-contrast-800: var(--color-success-contrast-light); + --color-success-contrast-900: var(--color-success-contrast-light); + --color-success-contrast-950: var(--color-success-contrast-light); + + /* ---------------------------------------------------------- + * WARNING — Warm amber (UI convention; not in LCI brand guide) + * LCI does not specify a warning/caution color. Using standard + * amber that doesn't conflict with the brand palette. + * ---------------------------------------------------------- */ + --color-warning-50: oklch(97% 0.04 85deg); + --color-warning-100: oklch(94% 0.06 82deg); + --color-warning-200: oklch(91% 0.09 80deg); + --color-warning-300: oklch(88% 0.12 78deg); + --color-warning-400: oklch(85% 0.14 76deg); + --color-warning-500: oklch(80% 0.15 73deg); + --color-warning-600: oklch(73% 0.14 70deg); + --color-warning-700: oklch(67% 0.13 67deg); + --color-warning-800: oklch(60% 0.12 63deg); + --color-warning-900: oklch(53% 0.12 59deg); + --color-warning-950: oklch(46% 0.11 54deg); + --color-warning-contrast-dark: var(--color-warning-950); + --color-warning-contrast-light: var(--color-warning-50); + --color-warning-contrast-50: var(--color-warning-contrast-dark); + --color-warning-contrast-100: var(--color-warning-contrast-dark); + --color-warning-contrast-200: var(--color-warning-contrast-dark); + --color-warning-contrast-300: var(--color-warning-contrast-dark); + --color-warning-contrast-400: var(--color-warning-contrast-dark); + --color-warning-contrast-500: var(--color-warning-contrast-dark); + --color-warning-contrast-600: var(--color-warning-contrast-light); + --color-warning-contrast-700: var(--color-warning-contrast-light); + --color-warning-contrast-800: var(--color-warning-contrast-light); + --color-warning-contrast-900: var(--color-warning-contrast-light); + --color-warning-contrast-950: var(--color-warning-contrast-light); + + /* ---------------------------------------------------------- + * ERROR — LCI Cherry Tomato + * #df3527 | RGB 223/53/39 | CMYK 7/93/99/1 + * Pantone 17-1563 TCX "Cherry Tomato" + * + * Old: oklch(59.32% 0.21 29°) — too light by 6pts, chroma too + * low (0.21 vs correct ~0.27). The LCI red should read as a + * strong, saturated signal red — not a muted tomato-orange. + * ---------------------------------------------------------- */ + --color-error-50: oklch(90% 0.06 38deg); + --color-error-100: oklch(84% 0.10 34deg); + --color-error-200: oklch(78% 0.14 32deg); + --color-error-300: oklch(72% 0.18 30deg); + --color-error-400: oklch(65% 0.23 29deg); + --color-error-500: oklch(53% 0.27 28deg); /* ≈ #df3527 — LCI Cherry Tomato */ + --color-error-600: oklch(46% 0.24 28deg); + --color-error-700: oklch(39% 0.21 28deg); + --color-error-800: oklch(31% 0.17 28deg); + --color-error-900: oklch(24% 0.13 28deg); + --color-error-950: oklch(16% 0.09 28deg); + --color-error-contrast-dark: var(--color-error-950); + --color-error-contrast-light: var(--color-error-50); + --color-error-contrast-50: var(--color-error-contrast-dark); + --color-error-contrast-100: var(--color-error-contrast-dark); + --color-error-contrast-200: var(--color-error-contrast-dark); + --color-error-contrast-300: var(--color-error-contrast-dark); + --color-error-contrast-400: var(--color-error-contrast-dark); + --color-error-contrast-500: var(--color-error-contrast-light); + --color-error-contrast-600: var(--color-error-contrast-light); + --color-error-contrast-700: var(--color-error-contrast-light); + --color-error-contrast-800: var(--color-error-contrast-light); + --color-error-contrast-900: var(--color-error-contrast-light); + --color-error-contrast-950: var(--color-error-contrast-light); + + /* ---------------------------------------------------------- + * SURFACE — near-neutral with subtle LCI blue tint + * + * Old version used hue 196° (teal direction). Shifted to 248° + * to align with the LCI blue identity without being distracting. + * surface-50 stays pure white (brand spec: white is a primary + * color in the LCI palette). + * ---------------------------------------------------------- */ + --color-surface-50: oklch(100% 0 none); + --color-surface-100: oklch(97.5% 0.003 248deg); + --color-surface-200: oklch(95% 0.005 248deg); + --color-surface-300: oklch(92% 0.007 250deg); + --color-surface-400: oklch(89% 0.008 250deg); + --color-surface-500: oklch(86% 0.008 250deg); + --color-surface-600: oklch(78% 0.008 252deg); + --color-surface-700: oklch(69% 0.007 254deg); + --color-surface-800: oklch(60% 0.006 256deg); + --color-surface-900: oklch(50% 0.005 258deg); + --color-surface-950: oklch(40% 0.004 260deg); + --color-surface-contrast-dark: var(--color-surface-950); + --color-surface-contrast-light: var(--color-surface-50); + --color-surface-contrast-50: var(--color-surface-contrast-dark); + --color-surface-contrast-100: var(--color-surface-contrast-dark); + --color-surface-contrast-200: var(--color-surface-contrast-dark); + --color-surface-contrast-300: var(--color-surface-contrast-dark); + --color-surface-contrast-400: var(--color-surface-contrast-dark); + --color-surface-contrast-500: var(--color-surface-contrast-dark); + --color-surface-contrast-600: var(--color-surface-contrast-dark); + --color-surface-contrast-700: var(--color-surface-contrast-dark); + --color-surface-contrast-800: var(--color-surface-contrast-dark); + --color-surface-contrast-900: var(--color-surface-contrast-light); + --color-surface-contrast-950: var(--color-surface-contrast-light); +}