/* ========================================================================== CPG DESIGN TOKENS — shared by CPG Holding and CPG Properties -------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH for colour, type, space, motion, radius, elevation and grid. Templates must never hardcode a raw value: always use a token. The brandbook is not approved yet. Every value below is therefore a token so an approved direction can be swapped in without touching any template. Palette values are the exact colours sampled from "CPG Properties — Brand, Navigation & Organization (V2)" (the Signal system). Contrast (WCAG 2.2) — measured, not assumed: ink #0D0D0C on bone #ECE9E2 = 16.04 AAA copper #C1440E on white #FFFFFF = 5.12 AA (white text on copper) copper-ink #8C3208 on bone #ECE9E2 = 6.73 AA (copper AS TEXT on light) copper-lit #E2703A on ink #0D0D0C = 6.12 AA (copper AS TEXT on dark) muted #6B6862 on bone #ECE9E2 = 4.58 AA on-ink #CDCCCA on ink #0D0D0C = 12.12 AAA Raw #C1440E is a FILL/MARK colour. For copper *text* use --cpg-copper-ink on light surfaces and --cpg-copper-lit on dark surfaces. ========================================================================== */ :root { /* --- Core palette ------------------------------------------------------ */ --cpg-ink: #0D0D0C; --cpg-ink-800: #1A1A18; --cpg-ink-700: #2E2D2A; --cpg-ink-600: #3E3D3A; --cpg-bone: #ECE9E2; /* warm off-white — primary ground */ --cpg-paper: #F3F1EC; /* lighter ground for raised surfaces */ --cpg-white: #FFFFFF; --cpg-shell: #EDEAE3; --cpg-copper: #C1440E; /* Signal Copper — fills, marks, CTAs */ --cpg-copper-ink: #8C3208; /* copper as TEXT on light surfaces */ --cpg-copper-lit: #E2703A; /* copper as TEXT on dark surfaces */ --cpg-copper-tint: #F1DDCF; /* copper-tinted band / Discover rail */ /* --- Text roles -------------------------------------------------------- */ --cpg-text: var(--cpg-ink); /* Muted text must clear 4.5:1 on EVERY light surface the system uses, including the copper tint (#F1DDCF) and the sold chip (#DFDCD4). #6B6862 measured 4.23 on the copper tint and 4.05 on the sold chip; #5C5A55 clears 5.03 on the worst of them. */ --cpg-text-muted: #5C5A55; --cpg-text-subtle: #4F4D48; --cpg-text-on-ink: #FFFFFF; --cpg-text-on-ink-muted: #CDCCCA; --cpg-text-on-ink-dim: #B4B1AA; /* --- Lines and borders -------------------------------------------------- */ --cpg-rule: #DAD6CC; /* decorative hairline */ --cpg-rule-strong: #C7C2B6; --cpg-border-control: #8A8478; /* interactive borders — meets 3:1 */ --cpg-rule-on-ink: rgba(255, 255, 255, 0.18); --cpg-rule-on-ink-strong: rgba(255, 255, 255, 0.38); /* --- Surfaces ----------------------------------------------------------- */ --cpg-surface: var(--cpg-bone); --cpg-surface-raised: var(--cpg-white); --cpg-surface-sunken: var(--cpg-shell); --cpg-surface-ink: var(--cpg-ink); --cpg-surface-media: #DAD6CC; /* media placeholder block */ /* --- Status (never colour alone — always paired with a text label) ------ */ --cpg-status-available: #2F5D3A; --cpg-status-available-bg: #E4EBE3; --cpg-status-reserved: #8C3208; --cpg-status-reserved-bg: #F1DDCF; --cpg-status-sold: #4F4D48; --cpg-status-sold-bg: #DFDCD4; --cpg-status-info: #2A4A63; --cpg-status-info-bg: #E1E8EE; /* --- Feedback ----------------------------------------------------------- */ --cpg-danger: #A32217; --cpg-danger-bg: #F8E4E1; --cpg-success: #2F5D3A; --cpg-success-bg: #E4EBE3; /* --- Focus -------------------------------------------------------------- */ --cpg-focus-ring: var(--cpg-copper); --cpg-focus-ring-on-ink: #F7B98F; --cpg-focus-width: 3px; --cpg-focus-offset: 3px; /* ====================================================================== TYPOGRAPHY Three directions were explored (see brand/type-directions.md). Direction A "Signal Grotesk" is the implemented provisional direction: it reproduces the deck's Arial Black + Arial system exactly, carries no licensing risk, needs no webfont for Latin/Cyrillic, and pairs with Noto Sans Georgian (SIL OFL) for the Georgian script. Switch with data-cpg-type="b" | "c" on . ====================================================================== */ --cpg-font-display: "Arial Black", "Helvetica Neue", "Noto Sans Georgian", Arial, sans-serif; --cpg-font-body: Arial, "Helvetica Neue", "Noto Sans Georgian", Helvetica, sans-serif; --cpg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --cpg-display-weight: 900; --cpg-display-tracking: -0.022em; --cpg-eyebrow-tracking: 0.16em; --cpg-wordmark-tracking: -0.03em; --cpg-wordmark-qualifier-tracking: 0.2em; /* Fluid type scale — clamp(min, preferred, max), 320px → 1440px viewport */ --cpg-text-3xs: 0.6875rem; /* 11px labels */ --cpg-text-2xs: 0.75rem; /* 12px eyebrow */ --cpg-text-xs: 0.8125rem; /* 13px */ --cpg-text-sm: 0.875rem; /* 14px */ --cpg-text-md: clamp(0.9375rem, 0.90rem + 0.19vw, 1.0625rem); --cpg-text-lg: clamp(1.0625rem, 1.00rem + 0.31vw, 1.25rem); --cpg-text-xl: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem); --cpg-text-2xl: clamp(1.5rem, 1.34rem + 0.80vw, 2rem); --cpg-text-3xl: clamp(1.875rem, 1.60rem + 1.36vw, 2.75rem); --cpg-text-4xl: clamp(2.25rem, 1.75rem + 2.50vw, 3.75rem); --cpg-text-5xl: clamp(2.75rem, 1.95rem + 4.00vw, 5.25rem); --cpg-text-6xl: clamp(3rem, 1.80rem + 6.00vw, 6.75rem); --cpg-leading-tight: 1.04; --cpg-leading-snug: 1.18; --cpg-leading-normal: 1.45; --cpg-leading-relaxed:1.62; --cpg-measure: 68ch; /* body copy max line length */ --cpg-measure-tight:52ch; --cpg-measure-lead: 42ch; /* large lead paragraphs */ /* ====================================================================== SPACE — 4px base, named steps ====================================================================== */ --cpg-space-3xs: 0.25rem; /* 4 */ --cpg-space-2xs: 0.5rem; /* 8 */ --cpg-space-xs: 0.75rem; /* 12 */ --cpg-space-sm: 1rem; /* 16 */ --cpg-space-md: 1.5rem; /* 24 */ --cpg-space-lg: 2rem; /* 32 */ --cpg-space-xl: 3rem; /* 48 */ --cpg-space-2xl: 4rem; /* 64 */ --cpg-space-3xl: 6rem; /* 96 */ --cpg-space-4xl: 8rem; /*128 */ /* Section rhythm scales with the viewport */ --cpg-section-y: clamp(3.5rem, 2.4rem + 5.5vw, 7.5rem); --cpg-section-y-tight: clamp(2.5rem, 1.9rem + 3.0vw, 4.5rem); /* ====================================================================== GRID / LAYOUT ====================================================================== */ --cpg-container: 84rem; /* 1344px */ --cpg-container-wide: 96rem; --cpg-container-text: 52rem; --cpg-gutter: clamp(1.25rem, 0.85rem + 2vw, 3rem); --cpg-grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); --cpg-grid-columns: 12; --cpg-header-height: 4.5rem; --cpg-header-height-sm:3.75rem; /* ====================================================================== RADIUS / ELEVATION — the Signal system is deliberately square. Radii exist as tokens so a future brandbook can soften it globally. ====================================================================== */ --cpg-radius-none: 0; --cpg-radius-xs: 2px; --cpg-radius-sm: 3px; --cpg-radius-md: 4px; --cpg-radius-pill: 999px; --cpg-radius-control: var(--cpg-radius-none); --cpg-radius-card: var(--cpg-radius-none); --cpg-radius-media: var(--cpg-radius-none); --cpg-border-hair: 1px; --cpg-border-thick: 2px; --cpg-shadow-none: none; --cpg-shadow-sm: 0 1px 2px rgba(13, 13, 12, 0.06); --cpg-shadow-md: 0 6px 24px -12px rgba(13, 13, 12, 0.22); --cpg-shadow-lg: 0 24px 60px -32px rgba(13, 13, 12, 0.34); /* ====================================================================== MOTION — restrained. Nothing decorative; motion only reinforces hierarchy or orientation. All of it is disabled under prefers-reduced-motion (see base.css). ====================================================================== */ --cpg-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --cpg-ease-in-out: cubic-bezier(0.66, 0, 0.34, 1); --cpg-duration-instant: 90ms; --cpg-duration-fast: 160ms; --cpg-duration-base: 260ms; --cpg-duration-slow: 420ms; --cpg-reveal-distance: 14px; /* ====================================================================== Z-INDEX ====================================================================== */ --cpg-z-base: 0; --cpg-z-raised: 10; --cpg-z-sticky: 100; --cpg-z-header: 200; --cpg-z-drawer: 300; --cpg-z-overlay: 400; --cpg-z-toast: 500; --cpg-z-skip: 600; } /* -------------------------------------------------------------------------- TYPOGRAPHY DIRECTION B — "Editorial Grotesk" Documented alternative. Selected via ; the layout then loads the matching webfont link. Not the active direction. -------------------------------------------------------------------------- */ :root[data-cpg-type="b"] { --cpg-font-display: "Archivo", "Arial Black", "Noto Sans Georgian", Arial, sans-serif; --cpg-font-body: "Inter", "Noto Sans Georgian", Arial, sans-serif; --cpg-display-weight: 800; --cpg-display-tracking: -0.03em; } /* -------------------------------------------------------------------------- TYPOGRAPHY DIRECTION C — "Institutional Plex" Documented alternative. Not the active direction. -------------------------------------------------------------------------- */ :root[data-cpg-type="c"] { --cpg-font-display: "IBM Plex Sans Condensed", "Arial Black", "Noto Sans Georgian", Arial, sans-serif; --cpg-font-body: "IBM Plex Sans", "Noto Sans Georgian", Arial, sans-serif; --cpg-display-weight: 700; --cpg-display-tracking: -0.012em; } /* -------------------------------------------------------------------------- PLATFORM ACCENTS Both platforms share one system. The only tokenised difference is the density of the editorial rhythm: Holding is calmer and more open, Properties is slightly tighter because it carries more product surface. -------------------------------------------------------------------------- */ :root[data-cpg-platform="holding"] { --cpg-section-y: clamp(4rem, 2.6rem + 6.2vw, 8.5rem); --cpg-hero-min-height: clamp(30rem, 78vh, 46rem); } :root[data-cpg-platform="properties"] { --cpg-section-y: clamp(3.25rem, 2.3rem + 5vw, 6.75rem); --cpg-hero-min-height: clamp(28rem, 70vh, 42rem); } /* -------------------------------------------------------------------------- SCRIPT-SPECIFIC ADJUSTMENTS Georgian has no uppercase and a taller x-height; Arial Black carries no Georgian glyphs, so Georgian display text falls through to Noto Sans Georgian. Loosen the display tracking so the two scripts read at the same optical weight. -------------------------------------------------------------------------- */ :root:lang(ka) { --cpg-display-tracking: -0.008em; --cpg-eyebrow-tracking: 0.10em; --cpg-wordmark-qualifier-tracking: 0.14em; } :root:lang(ru) { --cpg-display-tracking: -0.016em; }