/* GENERATED FILE. DO NOT EDIT. Copied from brand/brand-system.css by approvals-app/sync_brand.py. That file is the owner of every colour and font value below. Edit it there, then run: python3 sync_brand.py The webfont @import is stripped on purpose: this app loads nothing from a third-party origin, so Inter is used only when the device already has it. */ /* ============================================================ eMotion Video brand system THE SINGLE SOURCE OF TRUTH. Version 2026-08-10a. Rules for anyone (human or model) touching brand values: 1. Colour and font values live HERE and nowhere else. 2. Every other file points at this one. It does not restate numbers. memory/user_profile.md, the emotion-video-brand skill, project READMEs, handoffs: all say "see brand/brand-system.css" instead of listing hexes. 3. There are NO mirror copies. The old permitted mirror inside skills/emotion-video-brand/SKILL.md was removed on 10 Aug 2026 after it sat ten days out of date and handed out a superseded teal rule, silently. A stale copy fails quietly and looks right; a missing copy fails loudly and gets fixed. If a session cannot reach this file, it must say so and stop, not guess. 4. Changing a value here means bumping the version above, and nothing else. There is nothing to restamp. 5. emotionvideo-site/app/globals.css is the deployed site's own token file. It must match this file. It is the one legitimate duplicate, because Next.js cannot import from outside its own tree. Check any output with: python3 skills/emotion-video-brand/scripts/check-brand.py ============================================================ */ :root { /* ============================================================ COLOUR. 21 semantic tokens plus one 11-step neutral ramp. Every colour on eMotion Video output comes from this list. Audited against the live site 2026-07-31. ============================================================ */ /* --- Primary: the dominant three --- */ --colour-navy: #112255; /* foundation, dark surfaces, footers */ --colour-purple: #200939; /* identity, deep sections, panels that hold content */ --colour-teal: #007799; /* INTERACTIVE ONLY: links, buttons, focus rings. Never structural accents, badges, borders, kickers or pull-quote trim. Rule hardened 2026-08-10 after Suzie caught teal leading two layouts in one day: PURPLE IS THE IDENTITY, TEAL IS THE CLICK. If an element does nothing when clicked, it is not teal. (The old wording, "use sparingly", was a vibe, not a rule, and it failed.) */ /* --- Supporting --- */ --colour-blue: #114499; /* hover states, gradients */ --colour-highlight: #33ccee; /* Permanent Marker word only, dark backgrounds only. On white or light, use --colour-teal instead */ --colour-purple-action: #3d1370; /* PURPLE THAT MAY HOLD TEXT. Added by Suzie 2026-08-03. The same hue as --colour-purple, lifted so it reads as purple rather than near-black. 13.77:1 with white text. Permitted: buttons and any control carrying white text, where teal would be too much. First used on the 22 View on Amazon buttons on toolkit.html. Not a replacement for --colour-teal, which stays the primary action colour sitewide. */ --colour-purple-2: #592299; /* DECORATIVE ONLY. Confirmed by Suzie 2026-07-31. Permitted: small decorative shapes, dots, squares, bullet markers, hero collage fragments. Not permitted: buttons, panels, or any container that holds text or another control. For a purple button use --colour-purple-action. It cannot hold a teal button (1.94:1, the button dissolves), which is what deep purple is for (3.53:1). Also correct INSIDE the logo artwork, which is never recoloured. */ /* --- Surfaces --- */ --colour-white: #ffffff; --colour-near-white: #faf8f4; /* warm cream paper. Was #ffeeff pink-white until 2026-07-31: the pink fought the teal CTA */ --colour-surface: #f4f6fb; /* calm light section background */ --colour-bg-dark: #0d1a3e; /* hero and deep backgrounds */ /* --- Text --- */ --colour-ink: #0F0F1A; /* darkest text */ --colour-text-white: #ffffff; /* text on dark */ --colour-text-secondary: #dfe5f6; /* muted text on dark. 837 uses on the live site */ --colour-text-tertiary: #c9d2ec; /* description text on dark */ --colour-text-muted: #5a6685; /* muted text on LIGHT. 5.72:1 on white, 5.29:1 on --colour-surface. Replaced #8b97c2 (2.88:1), #6b769b (4.48:1) and #6f7899 (4.35:1) on 2026-07-31, which all failed or scraped AA */ --colour-text-on-teal: #e3f4f9; /* muted text inside teal panels. 4.53:1. Replaced #cdeef6 (4.19:1) on 2026-07-31 */ /* --- Semantic status. One of each, no near-duplicates --- */ --colour-error: #991111; /* form error text. 8.60:1 on white, AAA */ --colour-error-bg: #fdf1f1; --colour-alert: #cc2222; /* attention blocks, eyebrow labels, decorative red. 5.50:1 on white, AA. Not for form errors */ --colour-success: #2d8a4e; --colour-warning: #f5a623; /* amber for stars, icons and fills. NEVER text on a light background, it only reaches 2.03:1 there */ --colour-warning-text: #7a5600; /* the amber to use when amber must be text. 6.65:1 */ /* ============================================================ NEUTRAL RAMP. One family, eleven steps, navy-derived. This is the tint scale the live site already used. It was never written down, which is why sessions kept inventing new near-duplicates. Counted as ONE system, not eleven decisions. Contrast figures are against white. ============================================================ */ --navy-950: #0a1330; /* 18.28 deepest. Section floors */ --navy-900: #152852; /* 14.41 dark panels */ --navy-800: #25315c; /* 12.56 dark cards */ --navy-700: #33406e; /* 10.00 raised dark surfaces */ --navy-600: #3f4a70; /* 8.66 most used tint on the site, 159 uses */ --navy-500: #4a5578; /* 7.34 body text alternative on light */ --navy-400: #55608a; /* 6.13 secondary text on light */ --navy-300: #8a93b2; /* 3.04 LARGE text and UI edges only, never body copy */ --navy-200: #93a0c8; /* 2.59 decorative and dividers only, never text */ --navy-100: #aab6db; /* 2.01 decorative only */ --navy-050: #e5e9f4; /* 1.21 light surface fills */ /* --- Lilac tints. Soft purple surfaces, never text --- */ --lilac-300: #c6b8db; --lilac-200: #d5c9e6; --lilac-100: #e4dcf0; /* ============================================================ CYAN / TEAL RAMP. The site uses a genuine cyan family beyond the single --colour-teal: bright accents on dark, deep teals for gradient ends, pale tints for surfaces. Documented 2026-07-31 rather than converged, because the steps are visibly distinct. ============================================================ */ --teal-700: #0e6f88; /* deep teal, gradient ends and dark accents */ --teal-600: #128aa5; /* mid-deep teal */ --teal-500: #1f97b4; /* mid teal */ --teal-400: #25a7c1; /* lighter mid teal */ --teal-300: #43b8ea; /* bright sky accent on dark */ --teal-200: #7fe4ff; /* pale bright cyan on dark */ --teal-150: #8ee9fb; /* palest bright cyan on dark */ --teal-100: #bff3fb; /* very pale cyan surface */ --teal-050: #eafaff; /* pale teal surface */ /* --- Amber, second step --- */ --colour-warning-deep: #e08a00; /* deeper amber. Fills and icons only. 2.69:1 on white, never text on light */ /* --- Green tint surfaces --- */ --colour-success-bg: #f0faf0; --colour-success-tint: #bff0cf; /* --- Legacy, kept deliberately --- */ --colour-pink-white: #ffeeff; /* Kept by Suzie 2026-07-31 for its 12 existing decorative uses on the live site. Superseded by --colour-near-white for surfaces. Do not use in new work, do not remove from the existing 12. */ /* --- Borders --- */ --colour-border-light: rgba(255, 255, 255, 0.06); /* on dark */ --colour-border-medium: rgba(255, 255, 255, 0.12); /* on dark */ --colour-border-muted: #E8E5EE; /* light dividers */ --colour-border-input: rgba(17, 34, 85, 0.5); /* form field edges. 3.17:1. Was 0.16 alpha (1.37:1) until 2026-07-31, which made input boxes effectively invisible */ /* ----- Typography ----- */ --font-heading: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-highlight: 'Permanent Marker', cursive; /* ----- Weight scale. These are the weights the live site actually uses, documented 2026-07-31 with a job each. Inter ships 300 to 900. ----- */ --w-light: 300; /* rare. Large quiet numerals and oversized quiet display only */ --w-body: 400; /* all running copy. The default */ --w-medium: 500; /* supporting copy that needs a touch more presence than body */ --w-semibold: 600; /* labels, eyebrows, small uppercase, table headers */ --w-bold: 700; /* the workhorse. Section headings, card titles, emphasis. By far the most used weight on the site */ --w-extrabold: 800; /* larger section headings and anything that must out-rank a 700 */ --w-black: 900; /* hero and page-title scale only. Reads heavy below about 30px */ /* PERMANENT MARKER RULE (Suzie, 2026-07-31): one highlighted word per SCREENFUL, not per page. A long scrolling page may carry several, provided no two are visible at once and the device does not become the pattern. Prefer a single word. Do not set phrases, headings, sentences or labels in it. Colour it --colour-highlight on dark, --colour-teal on light. */ /* Type scale */ --fs-hero: clamp(40px, 5.6vw, 76px); --fs-h1: clamp(32px, 5vw, 56px); --fs-h2: clamp(26px, 4vw, 44px); --fs-h3: clamp(20px, 3vw, 30px); --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 11px; /* Type weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; /* Effects */ --blur-sm: blur(12px); --blur-md: blur(14px); --blur-lg: blur(70px); /* Gradients */ --gradient-hero: linear-gradient(135deg, #112255 0%, #200939 100%); --gradient-ray: linear-gradient(180deg, rgba(51, 204, 238, 0.5), rgba(51, 204, 238, 0)); /* Shadows */ --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 26px 50px rgba(0, 0, 0, 0.4); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(0, 119, 153, 0.35); }