/* =========================================================== Lincore / Ardeon — Design Tokens (runtime CSS custom properties) ----------------------------------------------------------- Source of truth for the BRAND palette: docs/design/ (deck + HTML). Reference design system: Tetrisly (https://tetrisly.com) — the product palette IS the Tetrisly color scale; see docs/design/README.md. This file is the PRODUCT runtime subset/derivative of those tokens. Two layers below: 1) RAW tokens — the brand palette/scale, faithful to the deck. 2) SEMANTIC aliases — what components should actually reference. These are mapped to the product's CURRENT values (see grunt/ardeon/less/global-variables.less) so adopting a token in an existing component is visually neutral. Where the deck differs from the live product, the deck value is kept in the RAW layer and noted; the SEMANTIC alias wins for product UI. Usage: reference the SEMANTIC aliases in components, e.g. color: var(--text-primary); background: var(--brand); Do NOT hard-code hex in new components. Loaded first in WEB-INF/view/layout/head/grunt.jsp, before the compiled LESS, so var(--*) is defined globally at runtime. =========================================================== */ :root { /* ========================================================= 1) RAW TOKENS — palette scales --------------------------------------------------------- The product palette IS Tetrisly (https://tetrisly.com · specs at https://docs.tetrisly.com). Step-name map: Tetrisly `$color-blue-+5` → `--color-blue-p5`, `--2` → `n2`, `0` → `0`. Values verified 2026-07 against tetrisly-react (Apache-2.0) src/theme/theme.ts. ========================================================= */ /* ---- Tetrisly coolGrey — the product neutral scale ---- */ --color-coolgrey-n4: #1B242C; --color-coolgrey-n3: #272E35; /* headings · @appTextColor */ --color-coolgrey-n2: #3A424A; --color-coolgrey-n1: #4A545E; --color-coolgrey-0: #555F6D; /* body · .txt-secondary */ --color-coolgrey-p1: #7E8C9A; /* .txt-tetriary */ --color-coolgrey-p2: #9EA8B3; --color-coolgrey-p3: #CFD6DD; --color-coolgrey-p4: #DEE3E7; --color-coolgrey-p5: #EAEDF0; /* borders · @appBorderColor */ --color-coolgrey-p6: #F0F3F5; --color-coolgrey-p7: #F5F7F9; /* panels · table headers */ --color-coolgrey-p8: #FCFCFD; /* ---- Tetrisly blue — the brand scale ---- */ --color-blue-n4: #05205E; /* hero / cover background */ --color-blue-n3: #113997; /* deep accent / gradient */ --color-blue-n2: #1E50C0; /* pressed / deep button */ --color-blue-n1: #2759CD; --color-blue-0: #3062D4; /* BRAND · @appLinkColor */ --color-blue-p1: #6792F4; /* newer d-btn light variant */ --color-blue-p2: #8DB0FB; --color-blue-p3: #CDDDFF; --color-blue-p4: #D7E4FF; --color-blue-p5: #E5EEFF; /* selected tint · @activeMenuBgLight */ --color-blue-p6: #EDF2FF; --color-blue-p7: #F5F8FF; --color-blue-p8: #FAFBFF; /* ---- Tetrisly status scales (subset in use; full 13-step scales in tetrisly-react theme.ts). Newer UI — login banners, icons — already uses these. ---- */ --color-red-n3: #6F2020; /* negative banner title */ --color-red-n1: #A13636; --color-red-0: #C53434; /* error icon/banner (login) */ --color-red-p1: #F26464; /* input error border ($color-interaction-border-alert) */ --color-red-p3: #FCCFCF; /* negative banner border */ --color-red-p5: #FEE6E6; --color-red-p7: #FEF5F5; --color-green-n3: #0E4E30; /* success banner title */ --color-green-n1: #1E714A; --color-green-0: #1D7C4D; /* success icon/banner (login) */ --color-green-p3: #C2EBD5; /* success banner border */ --color-green-p6: #E6F9EF; --color-green-p7: #F4FBF7; --color-orange-0: #F59638; --color-orange-p6:#FFF0E0; /* ---- Deck/brand names (kept for existing references; the deck itself was built on Tetrisly — exact matches alias the scales above) ---- */ --color-navy-900: var(--color-blue-n4); /* hero / cover background */ --color-navy-800: #072467; /* filled navy cards (deck-only) */ --color-indigo-700: var(--color-blue-n3); /* deep accent / gradient */ --color-primary-600:var(--color-blue-0); /* BRAND · buttons · links */ --color-sky-400: #79BCF6; /* accent · waves (deck-only)*/ --color-sky-100: var(--color-blue-p5); /* blue tint card background */ /* ---- Neutrals (deck-only values; product uses coolGrey) ---- */ --color-ink: #1B2533; /* deck heading on light */ --color-slate-600: #5A6168; /* deck body / dark glass cards */ --color-surface-50: var(--color-coolgrey-p7); --color-line: #E6EAF0; /* deck borders / dividers */ --color-white: #FFFFFF; /* ---- Product neutrals (live app — global-variables.less) ---- */ --color-text: var(--color-coolgrey-n3); /* @appTextColor */ --color-text-deep: #272b35; /* @appTextDeepDark */ --color-text-2nd: var(--color-coolgrey-0); /* .txt-secondary */ --color-text-3rd: var(--color-coolgrey-p1); /* .txt-tetriary */ --color-border-app: var(--color-coolgrey-p5); /* @appBorderColor */ --color-grey: #9b9b9b; /* @appGreyColor (not Tetrisly) */ /* ---- Semantic tints (feature cards / status) ---- */ --color-success-50: var(--color-green-p6); --color-success-700:#1B8A53; --color-danger-50: var(--color-red-p7); --color-danger-700: #C0392B; /* ========================================================= 2) SEMANTIC ALIASES — reference THESE in components. Mapped to current product values for visual continuity. ========================================================= */ --bg-app: var(--color-white); --bg-inverse: var(--color-navy-900); /* marketing/hero surfaces */ --text-primary: var(--color-text); /* product #272E35 (deck: --color-ink) */ --text-muted: var(--color-text-2nd); /* product #555F6D (deck: --color-slate-600) */ --text-subtle: var(--color-text-3rd); /* #7E8C9A */ --text-on-dark: var(--color-white); --brand: var(--color-primary-600); /* #3062D4 — matches @appLinkColor */ --brand-hover: #3C76BA; /* product @appLinkColorHover (deck: #2350B8) */ --accent: var(--color-sky-400); --border: var(--color-border-app); /* product #EAEDF0 (deck: --color-line #E6EAF0) */ --bg-selected: var(--color-sky-100); /* active menu / list item tint (@activeMenuBgLight) */ --focus-ring: var(--color-blue-p1); /* Tetrisly $color-interaction-focus-default */ --success: var(--color-green-0); /* product green (deck green: --color-success-700) */ --danger: var(--color-red-0); /* product red (deck red: --color-danger-700) */ --warning: var(--color-orange-0); /* ========================================================= Typography — base aligned to the dense PRODUCT scale (14px), marketing display sizes kept for registration/landing pages. ========================================================= */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --fs-body: 14px; /* product base (@appFontSize) */ --fs-small: 12px; /* caption / table (typography.less) */ --fs-tag: 10px; /* tags / pills */ --lh-body-px: 20px; /* product @appLineHeight */ /* marketing display scale (deck) — registration/landing only */ --fs-hero: 3.5rem; /* 56px · cover headline */ --fs-h1: 1.875rem; /* 30px · section title */ --fs-h2: 1.375rem; /* 22px · sub-section title */ --fw-regular: 400; --fw-medium: 450; /* product body weight (typography.less) */ --fw-semibold:600; --fw-bold: 700; --fw-extrabold:800; /* marketing display headings */ --lh-tight: 1.05; --lh-body: 1.5; --tracking-tight: -0.02em; /* ---- Radius ---- */ --radius-pill: 999px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; /* ---- Elevation (Tetrisly $elevation-bottom-*) ---- */ --elevation-bottom-100: 0px 1px 2px 0px rgba(27, 36, 44, 0.12); --elevation-bottom-200: 0px 2px 2px -1px rgba(27, 36, 44, 0.04), 0px 2px 8px -1px rgba(27, 36, 44, 0.08); --elevation-bottom-300: 0px 2px 2px -1px rgba(27, 36, 44, 0.04), 0px 8px 16px -2px rgba(27, 36, 44, 0.12); --elevation-bottom-400: 0px 2px 2px -1px rgba(27, 36, 44, 0.04), 0px 16px 24px -6px rgba(27, 36, 44, 0.16); /* ---- Spacing scale (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10:40px; --space-14:56px; /* ---- Layout ---- */ --gap-card: 16px; --content-max: 1120px; }