/** * ============================================================================ * cenora-core-kit / core-tokens.css ยท core-v1.0 (from Business V3.3.1) * ---------------------------------------------------------------------------- * THE shared brand token layer for the Cenora product family. * Product-agnostic: no shell, layout, sidebar, topbar, sheet, or responsive * CSS lives here (that's all ๐Ÿ”ด business-only โ€” it stayed in the Business * tenant's apps/web/app/globals.css). This file is ONLY design tokens. * * โ”€โ”€ HOW THE TWO PRODUCTS USE THIS FILE โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ * โ€ข Cenora BUSINESS (desktop ERP) โ†’ applies these on a DARK or cream canvas, * uppercase Georgia wordmark, restrained shadows. It sets * for its dark mode. * โ€ข Cenora PERSONAL (mobile B2C) โ†’ applies these LIGHT: cream/sand surfaces, * warm gold accents, teal CTAs, a playful SCRIPT wordmark, larger radii. * Personal should stay in the default (light) :root โ€” do NOT set * data-theme="dark" unless you build a Personal dark mode later. * * The brand hues (teal + sand/gold) are constant across both products โ€” they * ARE the brand. Only surface/ink/radius/shadow application differs. * * Tailwind: mirror these as theme.extend tokens (bg-brand, text-success, โ€ฆ). * Never hardcode hex in components โ€” always reference a token. * ============================================================================ */ /* โ”€โ”€โ”€ LIGHT (default) โ€” Personal's home base, Business's cream canvas โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ :root { /* Brand โ€” teal. CONSTANT across products & themes. */ --brand: #0D4A4A; --brand-hover: #1A6B6B; --brand-mid: #1A6B6B; --brand-light: #2A8A8A; --brand-soft: #EAF3F3; /* Accent โ€” sand / gold-leaf. CONSTANT. Wordmark flourish, AI callouts, CTAs. */ --accent: #D4A96A; --accent-soft: #FBF1DC; --accent-deep: #A8843F; /* Warm neutrals */ --cream: #F7F2EB; --cream-deep: #F2EDE5; /* Ink (neutral grayscale, warm-biased) */ --ink: #1A1A1A; --ink-soft: #4A4A4A; --ink-mute: #8A8A8A; --ink-faint: #B5B0A8; /* Borders */ --divider: #E2DDD6; --divider-strong: #C9C1B4; --divider-soft: #EFEAE3; /* Status โ€” each has a -soft companion for fills/badges */ --success: #27704F; --success-soft: #DEEDE6; --warn: #C88A2E; --warn-soft: #FBF1DC; --danger: #C0392B; --danger-soft: #FBEAE8; --info: #2563EB; --info-soft: #DDE7FB; /* Surface */ --bg-app: #FBF8F2; --bg-surface: #FFFFFF; --bg-muted: #F2EDE5; /* Type โ€” three families. Business uses Georgia uppercase for its wordmark; * Personal swaps --font-display for a script face (see note below). */ --font-serif: Georgia, 'Times New Roman', serif; --font-sans: Arial, Helvetica, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Wordmark / display face. * Business: var(--font-serif) (Georgia), letter-spacing wide, uppercase. * Personal: override to a script, e.g. * :root { --font-display: 'Caveat', 'Marker Felt', cursive; } * Defaults to the serif so the token always resolves. */ --font-display: var(--font-serif); /* Radius scale โ€” NOT in the Business globals (which used Tailwind's rounded-* * utilities ad hoc). Added here as a portable scale so Personal can run a * softer, friendlier mobile geometry. Business may keep using tight radii. * Business feel โ†’ --radius-md โ‰ˆ 6px * Personal feel โ†’ bump these up (cards 16โ€“20px, pills 999px) */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Shadow โ€” restrained on light. Personal can soften/warm these further. */ --shadow-sm: 0 1px 2px rgba(15,20,25,.06), 0 0 0 1px rgba(15,20,25,.03); --shadow-md: 0 6px 16px -4px rgba(15,20,25,.10), 0 2px 4px rgba(15,20,25,.04); --shadow-lg: 0 18px 40px -12px rgba(15,20,25,.18), 0 4px 8px rgba(15,20,25,.06); --ring-focus: 0 0 0 3px rgba(212,169,106,.35); --scheme: light; color-scheme: light; } /* โ”€โ”€โ”€ BRAND COLOR THEMES โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ * Independent of light/dark. Applied via `data-brand` on . Each theme * swaps --brand* + --accent* only. Default :root above == the "teal" theme. * Personal can expose a subset of these (or just teal) in its own settings. * โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ :root[data-brand="teal"] { --brand: #0D4A4A; --brand-hover: #1A6B6B; --brand-mid: #1A6B6B; --brand-light: #2A8A8A; --brand-soft: #EAF3F3; --accent: #D4A96A; --accent-soft: #FBF1DC; --accent-deep: #A8843F; } :root[data-brand="ink"] { --brand: #1A2433; --brand-hover: #2A3548; --brand-mid: #2A3548; --brand-light: #3F4D66; --brand-soft: #E9ECF1; --accent: #C39A4C; --accent-soft: #F5E9D0; --accent-deep: #9C7733; } :root[data-brand="forest"] { --brand: #1F4A33; --brand-hover: #2A6B49; --brand-mid: #2A6B49; --brand-light: #3F8A60; --brand-soft: #EAF3EE; --accent: #C09A52; --accent-soft: #F4EAD2; --accent-deep: #927330; } :root[data-brand="burgundy"] { --brand: #5C1F2A; --brand-hover: #7A2C3A; --brand-mid: #7A2C3A; --brand-light: #993D4D; --brand-soft: #F5EAEB; --accent: #C9A152; --accent-soft: #F4EAD2; --accent-deep: #927330; } :root[data-brand="midnight"] { --brand: #1B2640; --brand-hover: #2E3B59; --brand-mid: #2E3B59; --brand-light: #4A5876; --brand-soft: #E7EAF2; --accent: #B8A1E0; --accent-soft: #EBE3F7; --accent-deep: #7556A8; } :root[data-brand="slate"] { --brand: #334155; --brand-hover: #475569; --brand-mid: #475569; --brand-light: #64748B; --brand-soft: #EAEEF3; --accent: #EA8A4B; --accent-soft: #FBE5D2; --accent-deep: #B45F25; } :root[data-brand="plum"] { --brand: #4A1942; --brand-hover: #6B2A5F; --brand-mid: #6B2A5F; --brand-light: #8E3F7E; --brand-soft: #F1E6EE; --accent: #D9A85C; --accent-soft: #F7ECD3; --accent-deep: #9F7530; } :root[data-brand="copper"] { --brand: #5C2A1B; --brand-hover: #7A3D2A; --brand-mid: #7A3D2A; --brand-light: #9B5238; --brand-soft: #F4E9E2; --accent: #D4A96A; --accent-soft: #FBF1DC; --accent-deep: #A8843F; } /* โ”€โ”€โ”€ DARK MODE โ€” Business desktop primarily โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ * `` flips all surface + ink tokens. Brand teal + * sand accent stay constant. Status colors stay vivid; their -soft variants * darken so they read on a dark surface. * * PERSONAL: you generally do NOT need this โ€” Personal lives light. Kept here * so the token contract is identical across products if Personal ever adds a * night mode. * โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ :root[data-theme="dark"] { --cream: #1B2A28; --cream-deep: #243433; --ink: #ECE5D5; --ink-soft: #BFB6A6; --ink-mute: #8E8676; --ink-faint: #5F5A52; --divider: #253635; --divider-strong: #2F4341; --divider-soft: #1C2A29; --brand-soft: #1A3F3D; --accent-soft: #3B2E14; --success-soft: #14302A; --warn-soft: #3A2C13; --danger-soft: #3A1815; --info-soft: #18223E; --bg-app: #0E1614; --bg-surface: #14211F; --bg-muted: #1B2A28; --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.04); --shadow-md: 0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.30); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.70), 0 4px 8px rgba(0,0,0,.35); --ring-focus: 0 0 0 3px rgba(212,169,106,.45); --scheme: dark; color-scheme: dark; } /* โ”€โ”€โ”€ MINIMAL GLOBALS the primitives assume โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ * The ui/* primitives reference these base behaviors. Safe for both products. * Selection + focus ring use the brand accent. NOTHING shell-specific here. * โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ * { box-sizing: border-box; } body { font-family: var(--font-sans); color: var(--ink); background: var(--bg-app); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: normal; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: none; box-shadow: var(--ring-focus); } ::selection { background: var(--accent); color: var(--ink); }