/* ============================================================================ Cadence Design System — single source of truth for tokens & type. Two tiers: Tier 1 --cad-* universal Cadence primitives (brand, ramps, radii, type) Tier 2 semantic per surface family; COMPONENTS reference only these. The light/retail family is the default :root (the "Forest" look) and matches the historical index.html values byte-for-byte. A dark/manufacturing family is provided under [data-surface="dark"] for cadence-shell to adopt. Imported by: index.html (retail tenants). retail-afa-v2 + cadence-shell to follow. ============================================================================ */ /* ---- Tier 1: Cadence primitives (theme-independent) ---- */ :root { /* Brand — forest chrome + emerald accent (the product signature) */ --cad-forest-900: #0d2b1f; --cad-forest-700: #065F46; --cad-forest-600: #047857; --cad-forest-500: #03402E; --cad-emerald-500: #10B981; --cad-emerald-400: #34D399; --cad-emerald-300: #6EE7B7; --cad-mint: #7ee2b0; /* Neutral ramp — paper (light) → ink (text) → night (dark surfaces) */ --cad-white: #ffffff; --cad-paper: #fafaf9; --cad-paper-2: #f3f3f1; --cad-ink-900: #1a1a18; --cad-ink-600: #63625d; --cad-ink-500: #76756f; --cad-night: #14141a; --cad-night-2: #1c1c24; --cad-night-3: #26262f; --cad-bone: #f0efe8; /* Status / exception semantics (manage-by-exception) */ --cad-coral: #D85A30; --cad-amber: #BA7517; --cad-teal: #1D9E75; --cad-purple: #7F77DD; /* Geometry + type */ --cad-radius: 8px; --cad-radius-lg: 12px; --cad-sidebar-w: 240px; --cad-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cad-font-mono: 'IBM Plex Mono', monospace; --cad-font-display: 'Playfair Display', Georgia, serif; } /* ---- Tier 2: semantic tokens — LIGHT / RETAIL family (default "Forest") ---- Resolves identical to the historical index.html :root. */ :root { --bg: var(--cad-white); --bg2: var(--cad-paper); --bg3: var(--cad-paper-2); --text: var(--cad-ink-900); --text2: var(--cad-ink-600); --text3: var(--cad-ink-500); /* Cadence chrome — forest sidebar, constant across tenants */ --chrome-bg: var(--cad-forest-900); --chrome-text: #b8cfc2; --chrome-dim: #6e9c85; --chrome-bright: #f2f1ea; --chrome-icon: #8fb3a2; --chrome-mint: var(--cad-mint); --chrome-hover: rgba(255,255,255,0.06); --chrome-active: rgba(255,255,255,0.10); --chrome-line: rgba(255,255,255,0.10); --chrome-card: rgba(255,255,255,0.06); --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.16); --accent: var(--cad-forest-600); --accent-hover: var(--cad-forest-700); --accent-soft: #ECFDF5; --accent-text: var(--cad-forest-700); --teal: var(--cad-teal); --teal-light: rgba(29,158,117,0.08); --purple: var(--cad-purple); --purple-light: rgba(127,119,221,0.1); --coral: var(--cad-coral); --amber: var(--cad-amber); --radius: var(--cad-radius); --radius-lg: var(--cad-radius-lg); --sidebar-w: var(--cad-sidebar-w); } /* Retail dark mode (OS preference) — matches historical index.html override. */ @media (prefers-color-scheme: dark) { :root:not([data-surface]) { --bg: var(--cad-night); --bg2: var(--cad-night-2); --bg3: var(--cad-night-3); --text: var(--cad-bone); --text2: #9b9a95; --text3: #6b6a65; --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.16); --accent: var(--cad-emerald-500); --accent-hover: var(--cad-emerald-400); --accent-soft: rgba(16,185,129,0.12); --accent-text: var(--cad-emerald-300); --teal-light: rgba(29,158,117,0.12); --purple-light: rgba(127,119,221,0.12); } } /* ---- Tier 2: semantic tokens — DARK / MANUFACTURING family ---- Opt-in via (cadence-shell adopts in Layer 1d). Values mirror today's dwc.css so DWC/Golden are unchanged when migrated. Manufacturing keeps a dark work surface but the SAME forest chrome contract. */ [data-surface="dark"] { --bg: #0c0b0d; --bg2: #15131680; --bg3: #1e1b21; --text: var(--cad-bone); --text2: #a39d92; --text3: #6f6a62; --border: #2a2730; --border2: #3a3640; --chrome-bg: var(--cad-forest-900); --chrome-text: #b8cfc2; --chrome-dim: #6e9c85; --chrome-bright: #f2f1ea; --chrome-mint: var(--cad-mint); --accent: var(--cad-emerald-500); --accent-hover: var(--cad-emerald-400); --accent-soft: rgba(16,185,129,0.12); --accent-text: var(--cad-emerald-300); --radius: 10px; }