/* ========================================================================== Brighter Nights Lighting Technologies — tokens.css Version 1.2 · Assembled 2026-08-15 · Linear BRI-533 gap 2 ⚠️ RECONSTRUCTION, NOT A COPY. Mateo holds a tokens.css v1.1 in his personal OneDrive at websiteDesignSpecifications/brighter-nights-website/tokens.css. It could not be read (the SharePoint connector rejects text/css). This file was rebuilt from the two authoritative written sources instead: v1.0 core Website Development/Tokens/tokens.pdf "Source of truth for tokens.css. Decisions confirmed." Status: v1.0 FINAL, decisions confirmed 2026-07-23. v1.2 adds Roofline Page/01-tokens-rev27.css BRI-278 · BRI-281 · BRI-329. Display face, tracking tiers, tap-target floor. DIFF THIS AGAINST MATEO'S v1.1 BEFORE TREATING IT AS CANONICAL. Where they disagree, his file wins on anything v1.1 introduced that the PDF does not document. Referenced by every page through bnl-assets.php. Loads FIRST, before bnl-components.css and before any per-page stylesheet. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1 · CORE PALETTE Sampled from logo files and marketing collateral. Dark-mode-first: the product is light, and light reads against night. ------------------------------------------------------------------ */ --color-primary: #00A9B5; /* Teal — links, buttons, key headings */ --color-pink: #E3056B; /* Hot pink — secondary CTAs, highlights */ --color-orange: #FA6A1E; /* Orange — tertiary accents, hover */ --color-white: #FFFFFF; /* Text on dark */ --color-black: #0A0A0A; /* Page background */ /* RESERVED. The logo's own magenta. Never use for UI elements. Confirmed decision, 2026-07-23. */ --color-logo-magenta: #FA14DE; /* True black for header and footer bands only, distinct from --color-bg. */ --color-true-black: #000000; /* Colour hierarchy, confirmed: teal primary, pink a very close second — near 50/50. Use pink generously (alternating section accents, secondary CTAs). Orange stays tertiary. */ /* ------------------------------------------------------------------ 2 · BACKGROUNDS & NEUTRALS ------------------------------------------------------------------ */ --color-bg: #0A0A0A; /* Page background */ --color-bg-elevated: #161616; /* Cards, panels */ --color-bg-section: #101014; /* Alternate section bands */ --color-gray-900: #F5F5F5; /* Primary text */ --color-gray-600: #B8B8B8; /* Muted text */ --color-gray-300: #3A3A3A; /* Borders, dividers */ --color-gray-100: #1E1E1E; /* Subtle fills */ /* ------------------------------------------------------------------ 3 · SEMANTIC ------------------------------------------------------------------ */ --color-success: #00C48C; --color-error: #FF4D5E; --color-warning: var(--color-orange); /* ------------------------------------------------------------------ 4 · GRADIENTS Hero highlights and section accents. Use sparingly. ------------------------------------------------------------------ */ --gradient-brand: linear-gradient(135deg, var(--color-pink) 0%, var(--color-orange) 100%); --gradient-brand-teal: linear-gradient(135deg, var(--color-primary) 0%, var(--color-orange) 100%); /* ------------------------------------------------------------------ 5 · TYPOGRAPHY ------------------------------------------------------------------ */ --font-heading: 'Chakra Petch', 'Rajdhani', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* v1.2 · BRI-278 §1 — canonical display face. Bricolage Grotesque sits ABOVE --font-heading, which remains the fallback. --font-heading-proposed is kept as an alias so the ~78 existing references keep resolving with zero per-rule edits. */ --font-display: 'Bricolage Grotesque', 'Sora', var(--font-heading), sans-serif; --font-heading-proposed: var(--font-display); /* Fluid type scale. */ --font-size-h1: clamp(2rem, 5vw, 3rem); /* 32–48 */ --font-size-h2: clamp(1.625rem, 4vw, 2.25rem); /* 26–36 */ --font-size-h3: clamp(1.25rem, 3vw, 1.625rem); /* 20–26 */ --font-size-body: 1rem; /* 16 */ --font-size-small: 0.875rem; /* 14 */ --font-weight-regular: 400; --font-weight-semi: 600; --font-weight-bold: 700; --line-height-heading: 1.15; --line-height-body: 1.6; /* v1.0 headline treatment: ALL CAPS, 0.04em tracking. Matches the "MASTERS OF LIGHTING" collateral. */ --track-headline: 0.04em; /* v1.2 · BRI-278 §4 — Bricolage sets wider than Sora, so tracking is retuned. Spec values from the issue's table. */ --track-hero: -.05em; /* hero / page title */ --track-section: -.048em; /* section headings */ --track-statement: -.052em; /* oversized statements */ --track-verb: -.05em; /* card / product verbs */ --track-lockup: -.036em; /* brand lockup */ --track-kicker: .22em; /* kickers, labels, eyebrows */ /* ------------------------------------------------------------------ 6 · SPACING 96px is the desktop section padding. ------------------------------------------------------------------ */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 64px; --space-2xl: 96px; /* ------------------------------------------------------------------ 7 · RADIUS ------------------------------------------------------------------ */ --radius-button: 6px; --radius-input: 6px; --radius-card: 12px; --radius-pill: 999px; /* flyer product badges */ /* ------------------------------------------------------------------ 8 · SHADOWS & GLOW The "lit up" hover effect on CTAs. Confirmed 2026-07-23. ------------------------------------------------------------------ */ --shadow-glow-teal: 0 0 24px rgba(0, 169, 181, 0.45); --shadow-glow-pink: 0 0 24px rgba(227, 5, 107, 0.45); --shadow-glow-orange: 0 0 24px rgba(250, 106, 30, 0.45); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.55); /* ------------------------------------------------------------------ 9 · BREAKPOINTS Mobile-first, fluid. Reference values — CSS custom properties cannot be used inside @media queries, so these document the scale rather than drive it. Write the literal px values in media queries. ------------------------------------------------------------------ */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ------------------------------------------------------------------ 10 · ACCESSIBILITY v1.2 · BRI-281 §1 — touch floor. Apply wherever a link or control renders inline, rather than fixing elements one at a time. The footer phone number measured 15px site-wide before this. ------------------------------------------------------------------ */ --tap-min: 44px; } /* -------------------------------------------------------------------------- BRI-278 §3 — do not remove. `auto` is the CSS default, so this is not fixing a bug; it is insurance. A theme reset that sets font-optical-sizing:none silently kills the opsz axis Bricolage Grotesque was chosen for, and that failure is invisible in review — the type just quietly looks wrong. -------------------------------------------------------------------------- */ html { font-optical-sizing: auto; } /* ========================================================================== v1.3 — ALIAS LAYER · added 2026-08-15 · Linear BRI-533 02-page-styles-rev27.css references 19 token names this file did not define. Every reference resolved to nothing, which is why body copy and headings rendered near-black on near-black while gradient text — which uses its own literal colours — looked correct. Diagnosed by extracting every var(--name) in the page stylesheet and differencing against the definitions here. 9 tokens overlapped between the two files with ZERO value conflicts, so the v1.2 reconstruction was accurate; it was simply incomplete on naming. These are ALIASES. They point at the v1.0 confirmed values rather than introducing new ones, so there is one source of truth per value and changing the base changes both names. ========================================================================== */ :root { /* --- Text and border colour ------------------------------------------ THE INVISIBLE-TEXT BUG. The page asks for --color-text; this file called the same value --color-gray-900. Unresolved var() inherits, and the inherited colour was the near-black page background. */ --color-text: var(--color-gray-900); /* #F5F5F5 */ --color-text-muted: var(--color-gray-600); /* #B8B8B8 */ --color-border: var(--color-gray-300); /* #3A3A3A */ /* --- Type scale aliases ---------------------------------------------- Same clamps as v1.0, under the names the page stylesheet uses. */ --text-h1: var(--font-size-h1); --text-h2: var(--font-size-h2); --text-h3: var(--font-size-h3); --text-body: var(--font-size-body); --text-small: var(--font-size-small); --font-weight-semibold: var(--font-weight-semi); /* 600 */ --letter-spacing-heading: var(--track-section); /* -.048em */ /* --- Radius aliases --------------------------------------------------- v1.0 defines these by role (button / card). The page stylesheet names them by size. sm maps to the 6px button radius, md to the 12px card radius. */ --radius-sm: var(--radius-button); /* 6px */ --radius-md: var(--radius-card); /* 12px */ --shadow-sm: var(--shadow-card); /* --- Spacing ---------------------------------------------------------- ⚠️ NOT in the v1.0 scale (4/8/16/32/64/96). --space-ml sits between md (16) and lg (32); 24px is the conventional step. INFERRED. */ --space-ml: 24px; /* --- Layout ----------------------------------------------------------- ⚠️ INFERRED. No documented value in tokens.pdf or BRI-302. 1200px is the standard content measure and matches the four-breakpoint scale topping out at 1280. Verify against the rendered preview. */ --width-content: 1200px; /* --- Focus ring ------------------------------------------------------- ⚠️ INFERRED. Accessibility requirement, no documented value. Teal is the primary accent and reads clearly on near-black. */ --focus-ring: 2px solid var(--color-primary); --focus-ring-offset: 2px; /* --- Hover glow, high intensity --------------------------------------- Used by the #perf carousel arrows on :hover. BRI-328 records that --hglow-teal-hi and --hglow-teal-soft are referenced on four homepage hover states and were NEVER DEFINED anywhere — this is not a value lost in migration, it is a value that never existed. Defined here as a brighter form of the confirmed glow shadows. ⚠️ INFERRED. Also defines the -soft and -orange members so the homepage stops failing on the same names (BRI-328). */ --hglow-teal-hi: 0 0 32px rgba(0, 169, 181, 0.75); --hglow-teal-soft: 0 0 18px rgba(0, 169, 181, 0.35); --hglow-pink-hi: 0 0 32px rgba(227, 5, 107, 0.75); --hglow-pink-soft: 0 0 18px rgba(227, 5, 107, 0.35); --hglow-orange-hi: 0 0 32px rgba(250, 106, 30, 0.75); /* --- BRI-302 ask #1, remaining items ---------------------------------- --gradient-lux carries a documented value in BRI-302, including its drift animation. Adjacent headings run 11s so two gradients on screen never synchronise. */ --gradient-lux: linear-gradient(100deg, #00A9B5 0%, #8FE3E9 24%, #E3056B 68%, #FF74AE 100%); /* ⚠️ INFERRED — named in BRI-302, never valued. */ --gradient-aluminum: linear-gradient(135deg, #3A3A3A 0%, #B8B8B8 50%, #3A3A3A 100%); --glow-ambient-teal: 0 0 64px rgba(0, 169, 181, 0.18); --glow-ambient-pink: 0 0 64px rgba(227, 5, 107, 0.18); } /* -------------------------------------------------------------------------- --gradient-lux drift, per BRI-302. background-size:230% 100% with a 9s ease-in-out loop. Gated ON behind no-preference, matching the rev34 motion policy: motion never starts for users who opted out, including on engines that mishandle the reduce query. -------------------------------------------------------------------------- */ @keyframes bnl-grad-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }