/* ============================================================ kinship mfg — Color tokens ("Union White") ------------------------------------------------------------ Heritage style, modern and tech-forward. Lots of white, minimal color; color is a pop, never a coat. Read top → bottom as the brand hierarchy (hero first): 1. BRAND CORE — the named colors, led by the hero. 2. SCALES — tints/shades derived from the core. 3. MATERIALS — fabric naturals (swatches only, not UI). 4. STATUS — UI-only exceptions, OUTSIDE the brand palette. 5. ALIASES — semantic tokens components actually consume. Listing order = brand importance. Note this is a DIFFERENT axis from how much of a page each color may own, which runs the other way: white ≫ ink ≫ union ≫ cinnabar ≫ gold (color is a pop, never a coat — the hero is used least by area, most by intent). ============================================================ */ :root { /* ============================================================ 1. BRAND CORE — the named colors, hero first ============================================================ */ --cinnabar: #b42820; /* HERO — the one red / signature accent */ --union: #24344f; /* workwear navy — structural secondary */ --ink: #1b1d21; /* desaturated near-black — type */ --paper: #ffffff; /* white — the ground */ --gold: #c8860d; /* signal — highlights, meters, warnings */ /* ============================================================ 2. SCALES — tints & shades derived from the core (hero first) ============================================================ */ /* ---- Cinnabar: the hero / single brand red ---- Primary actions, links, eyebrows, small emphasis. The ONLY red used as a brand color. 6.4:1 on white — AA at any size. */ --cinnabar-900: #5e0f0a; --cinnabar-800: #731a0c; --cinnabar-700: #88180e; --cinnabar-600: #9e2017; --cinnabar-500: #b42820; /* = Cinnabar (primary accent) */ --cinnabar-400: #cb4b3e; --cinnabar-300: #da796f; --cinnabar-200: #eaa7a0; --cinnabar-100: #f9d5d1; /* ---- Union: workwear navy secondary ---- Deliberate brand moments: secondary buttons, dark sections (hero / CTA / footer via --surface-inverse), navy tags/rules. Should read unmistakably NAVY. */ --union-800: #18243a; /* deepest — inverse panels, depth */ --union-700: #1e2c45; --union-500: #24344f; /* = Union (the secondary) */ --union-400: #4d6088; --union-300: #8b99b4; --union-100: #dfe4ed; /* airy tint */ /* ---- Ink: desaturated cool near-black ---- TYPE, icons, hairline borders, photo scrims. Reads BLACK, not navy — low chroma so it never competes with Union. */ --ink-900: #1b1d21; /* wordmark / strongest type */ --ink-800: #2a2d33; --ink-700: #3d414a; /* body text */ --ink-600: #545862; --ink-500: #6e727c; /* muted text */ --ink-400: #8d919b; /* subtle text */ --ink-300: #b1b5bd; /* strong border */ /* ---- Paper: white → near-white grounds ---- Canvas reads as white; cards are pure white and lift with a hairline/shadow, not a tint. Steps are monotonic. */ --paper-0: #ffffff; /* cards, modals, inputs (raised) */ --paper-50: #fcfcfb; /* page canvas — reads white */ --paper-100: #f6f6f3; /* subtle fill / hover wash */ --paper-200: #eeede9; /* sunken fill */ --paper-300: #e2e0da; /* subtle border */ --paper-400: #cfccc4; /* default border / edge */ /* ---- Gold: the signal (used rarely) ---- */ --gold-600: #c8860d; --gold-100: #f7ead0; /* ============================================================ 3. MATERIALS — fabric naturals (SWATCHES ONLY, not UI grounds) True material colors (Pantone-referenced) for product/fabric contexts: swatch chips, material callouts. Never a page ground. ============================================================ */ --cloud-dancer: #f0eee9; /* Pantone 11-4201 */ --bone: #e8e1d3; --cream: #ddd4c0; --kraft: #cdc1aa; /* ============================================================ 4. STATUS — UI-only exceptions, OUTSIDE the brand palette For forms, alerts, validation only — NOT for brand visuals. Success/info sit intentionally outside brand. Warning reuses the brand Gold. Danger is a true UI red, deliberately distinct from Cinnabar so an error never reads as a brand accent. ============================================================ */ --success: #3f5a39; /* field green */ --success-soft: #e4ead9; --warning: var(--gold-600); --warning-soft: var(--gold-100); --danger: #c7402e; /* UI danger red — NOT a brand color */ --danger-soft: #fbe7e3; --info: #3d5a6b; /* slate */ --info-soft: #d9e3e8; /* ============================================================ 5. SEMANTIC ALIASES — reach for these in product code ============================================================ */ /* Surfaces */ --surface-canvas: var(--paper-50); --surface-card: var(--paper-0); --surface-raised: var(--paper-0); --surface-sunken: var(--paper-200); --surface-inverse: var(--union-800); /* dark sections are navy, not black */ --surface-accent: var(--cinnabar-500); --surface-accent-soft: var(--cinnabar-100); --surface-secondary: var(--union-500); --surface-secondary-soft: var(--union-100); /* Text */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-inverse: var(--paper-50); --text-accent: var(--cinnabar-600); --text-on-accent:var(--paper-0); --text-secondary:var(--union-500); --text-on-secondary: var(--paper-0); /* Borders / lines */ --border-subtle: var(--paper-300); --border-default: var(--paper-400); --border-strong: var(--ink-300); --border-ink: var(--ink-900); --border-accent: var(--cinnabar-500); /* Interactive (accent = primary actions) */ --accent: var(--cinnabar-500); --accent-hover: var(--cinnabar-600); --accent-active: var(--cinnabar-700); --accent-ring: color-mix(in oklch, var(--cinnabar-500) 35%, transparent); /* Interactive (secondary = union navy) */ --secondary: var(--union-500); --secondary-hover: var(--union-700); --secondary-active: var(--union-800); /* Interactive (ink = neutral dark) */ --ink-hover: var(--ink-800); --ink-active: var(--ink-900); /* Focus */ --focus-ring: var(--cinnabar-500); /* Status aliases (map to the UI-only status colors above) */ --status-success: var(--success); --status-success-soft: var(--success-soft); --status-warning: var(--warning); --status-warning-soft: var(--warning-soft); --status-danger: var(--danger); --status-danger-soft: var(--danger-soft); --status-info: var(--info); --status-info-soft: var(--info-soft); /* ============================================================ DEPRECATED aliases — kept so older work keeps rendering. · PINE (evergreen secondary) → now UNION navy. · GARNET / CLAY (prior accents) → CINNABAR. · --green-* / --red-* / --slate-* → status colors. Do NOT use in new work. ============================================================ */ --green-600: var(--success); --green-100: var(--success-soft); --amber-600: var(--warning); --amber-100: var(--warning-soft); --red-600: var(--danger); --red-100: var(--danger-soft); --slate-600: var(--info); --slate-100: var(--info-soft); --pine-800: var(--union-800); --pine-700: var(--union-700); --pine-500: var(--union-500); --pine-400: var(--union-400); --pine-300: var(--union-300); --pine-100: var(--union-100); --garnet-900: var(--cinnabar-900); --garnet-800: var(--cinnabar-800); --garnet-700: var(--cinnabar-700); --garnet-600: var(--cinnabar-600); --garnet-500: var(--cinnabar-500); --garnet-400: var(--cinnabar-400); --garnet-300: var(--cinnabar-300); --garnet-200: var(--cinnabar-200); --garnet-100: var(--cinnabar-100); --clay-800: var(--cinnabar-800); --clay-700: var(--cinnabar-700); --clay-600: var(--cinnabar-600); --clay-500: var(--cinnabar-500); --clay-400: var(--cinnabar-400); --clay-300: var(--cinnabar-300); --clay-200: var(--cinnabar-200); --clay-100: var(--cinnabar-100); }