/* ============================================================================ ITEPL Brand — Color Tokens Indian Transformers and Electricals Pvt. Ltd. Source of truth for color. Reference var(--ite-*) tokens in product code; never hardcode hex values. Summarised for agents in CLAUDE.brand-snippet.md. ============================================================================ */ :root { /* --- Core brand ------------------------------------------------------- */ --ite-orange: #f26522; /* brand orange — accents, primary CTAs, highlights */ --ite-black: #000000; --ite-white: #ffffff; /* --- Orange ramp 50–900 ---------------------------------------------- 500 is the brand orange. 600/700 are the hover/active states. */ --ite-orange-50: #fdf3ec; --ite-orange-100: #fadcc9; --ite-orange-200: #f4bd9d; --ite-orange-300: #ee9c70; --ite-orange-400: #e98046; --ite-orange-500: #f26522; /* = --ite-orange */ --ite-orange-600: #c4541a; /* hover */ --ite-orange-700: #9d4215; /* active / pressed */ --ite-orange-800: #763110; --ite-orange-900: #4f210b; /* --- Neutral gray ramp 50–900 ---------------------------------------- Text, borders, backgrounds. Do not invent new grays. */ --ite-gray-50: #f7f7f8; --ite-gray-100: #ececee; --ite-gray-200: #d8d9dd; --ite-gray-300: #bbbdc3; --ite-gray-400: #95979f; --ite-gray-500: #71747c; --ite-gray-600: #565860; --ite-gray-700: #3e4046; --ite-gray-800: #27282d; --ite-gray-900: #131418; /* --- Semantic tokens -------------------------------------------------- Use these in UI; they map onto the ramps above. */ --ite-color-bg: var(--ite-white); --ite-color-bg-subtle: var(--ite-gray-50); --ite-color-bg-muted: var(--ite-gray-100); --ite-color-surface: var(--ite-white); --ite-color-text: var(--ite-gray-900); /* 18.4:1 on white — AAA */ --ite-color-text-muted: var(--ite-gray-700); /* 10.4:1 on white — AAA */ --ite-color-text-subtle: var(--ite-gray-600); /* 7.1:1 on white — AAA (lightest AAA-safe neutral) */ --ite-color-text-inverse: var(--ite-white); --ite-color-border: var(--ite-gray-200); --ite-color-border-strong: var(--ite-gray-300); --ite-color-accent: var(--ite-orange); --ite-color-accent-hover: var(--ite-orange-600); --ite-color-accent-active: var(--ite-orange-strong); /* One true accent-orange (R5): replaces the former brown (orange-700/800) on small text, CTA fills, pagination, toggles and section eyebrows. Reads clearly orange yet clears WCAG AA — 5.03:1 on white (small text AND white-on-fill). */ --ite-orange-strong: #bd4b12; /* Semantic status ------------------------------------------------------- Success green — the one recurring non-print hardcoded color, promoted to a token so do/don't tags and accessibility "pass" indicators are consistent across all pages and the portable kit. */ --ite-color-success: #1c7c4a; /* [BRAND EVOLUTION] Gate 3 Q6 — approved 2026-06-12 (fill/dot use) */ --ite-color-success-text: #0f5530; /* darker green for AAA text-on-light: 8.9:1 on white, 7.8:1 on the pass-tint */ --ite-color-success-bg: #e7f3ec; /* "pass" tag tint */ --ite-color-success-border: #b9ddc7; /* "pass" tag stroke */ /* Error / warning — mirror the success pair. Promoted from the recurring hardcoded reds/amber on fail tags, do/don't rules and rewrite panels so status colour is consistent across pages and the portable kit. */ --ite-color-danger: #9b1c1c; /* error red — fill/text (7.0:1 on white) */ --ite-color-danger-underline: #c0392b; /* avoid-list underline accent */ --ite-color-danger-bg: #fbeaea; /* "fail" tag tint */ --ite-color-danger-border: #f0c2c2; /* "fail" tag stroke */ --ite-color-danger-surface: #fbf4f2; /* rewrite "bad" panel surface */ --ite-color-danger-surface-border: #f0d9d2; /* rewrite "bad" panel stroke */ --ite-color-warn-text: #a85e2c; /* AA-grade amber (contrast score) */ /* CTA / button pairing — a deeper orange so WHITE text passes AA (6.5:1). Distinct from orange-500 SURFACES, which still take black text (below). */ --ite-cta-bg: var(--ite-orange-strong); /* #bd4b12 — white text 5.03:1 (AA) */ --ite-cta-bg-hover: var(--ite-orange-700); /* #9d4215 — deeper pressed/hover */ --ite-cta-bg-active: #5f1a0a; --ite-cta-text: var(--ite-white); /* Accessibility: brand orange passes AA only for large text & UI. For body-size text sitting on orange, use BLACK text. */ --ite-on-orange: var(--ite-black); /* AAA orange-as-text rule (the site claims WCAG 2.2 AAA). Vivid orange-500 #f26522 is a FILL / graphic only (3.15:1 on white — UI ≥3) and carries LARGE/bold display orange (AA-large ≥3:1). Small/normal orange TEXT on white uses orange-strong #bd4b12 (5.03:1 — AA). (R5 retune: the former AAA browns orange-700/800 read as brown, so the accent was unified to one true orange at AA.) In-body links use INK text + an orange-500 underline (a graphic accent ≥3:1; links carry more than colour). */ --ite-text-orange: var(--ite-orange-strong); /* small/normal orange text — AA 5.03:1 */ --ite-text-orange-lg: var(--ite-orange-500); /* large/bold orange display — AA-large */ --ite-link-underline: var(--ite-orange-500); /* link underline accent */ /* The orange brand background surface (e.g. hero blocks). On it, use white or black text only — never full-color or inverse logo. */ --ite-color-brand-bg: var(--ite-orange); /* --- Application chrome (always-dark navigation shell) ---------------- A self-contained dark-UI surface set for the sidebar / topbar / command chrome — deliberately darker than the neutral ramp and constant across light/dark page themes. Promoted from hardcodes so the shell themes from one place; NOT for content surfaces (use the ramp/semantic tokens there). */ --ite-chrome-bg: #0f1013; /* sidebar base */ --ite-chrome-bg-2: #0d0e11; /* search well (darker) */ --ite-chrome-bg-top: #1a1c20; /* rail-inner gradient top */ --ite-chrome-surface: #16181c; /* kbd / topbar input surfaces */ --ite-chrome-border: #2a2c31; /* chrome hairline border */ --ite-chrome-border-2: #26282d; /* chrome inner divider */ --ite-chrome-line: #34373e; /* kbd border / key edges */ } /* --- Dark surfaces ----------------------------------------------------- Optional: opt a region into dark by adding [data-ite-theme="dark"]. On dark, keep the brand orange (use the inverse logo: orange + white). */ [data-ite-theme="dark"] { /* Re-apply colour/background so descendants inherit the flipped values. Without this, `color` set on is inherited as a computed near-black and dark regions render dark-on-dark (e.g. an unstyled heading). */ color: var(--ite-color-text); background-color: var(--ite-color-bg); --ite-color-bg: var(--ite-gray-900); --ite-color-bg-subtle: var(--ite-gray-800); --ite-color-bg-muted: var(--ite-gray-700); --ite-color-surface: var(--ite-gray-800); --ite-color-text: var(--ite-gray-50); /* 17.2:1 on gray-900 — AAA */ --ite-color-text-muted: var(--ite-gray-200); /* 10.4:1 on gray-800 — AAA */ --ite-color-text-subtle: var(--ite-gray-300); /* 7.8:1 on gray-800 — AAA */ --ite-color-text-inverse: var(--ite-gray-900); /* On dark, orange text/accents stay AAA with orange-300 (8.4:1 on gray-900). */ --ite-text-orange: var(--ite-orange-300); --ite-text-orange-lg: var(--ite-orange-400); --ite-color-border: var(--ite-gray-700); --ite-color-border-strong: var(--ite-gray-600); /* On dark, lift the accent one step for contrast. */ --ite-color-accent: var(--ite-orange-400); --ite-color-accent-hover: var(--ite-orange-300); --ite-color-accent-active: var(--ite-orange-500); }