/* ============================================================================ Arc Cardinal — Colors & Type Foundations ---------------------------------------------------------------------------- Single source of truth for the Arc Cardinal portal design language. These tokens are lifted verbatim from the production portal (ArcHien-Tran/ arc-cardinal-portal, public/*.html + public/assets/portal-nav.js). The portal has TWO related-but-distinct surfaces: 1. AUTH surface (login / register / index) — simpler, blue-accented, on a neutral gray; system font stack. 2. PORTAL surface (welcome / dashboard / catalog / admin / knowledge) — the mature, canonical brand. Warm off-white canvas, DM Sans + DM Mono, a green gradient nav rail, a 6-hue "pinwheel" palette (drawn from the logo petals), and a pink→magenta gradient accent for AI ("Ask Arc"), avatars, and sign-out. Prefer the PORTAL tokens for new work. The AUTH tokens are namespaced under --auth-* and exist only to faithfully reproduce the sign-in/registration screens. Fonts: DM Sans (400/500/600) + DM Mono (400) are loaded from Google Fonts in production. Add this to : ========================================================================== */ :root { /* ---- Type families ----------------------------------------------------- */ --font: 'DM Sans', system-ui, -apple-system, sans-serif; /* all UI text */ --mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace; /* IDs, $, dates, metrics */ /* ---- Canvas & surfaces ------------------------------------------------- */ --bg: #f7f6f3; /* warm off-white page canvas */ --surface: #ffffff; /* cards, tables, modals, topbar */ --surface-sunk: #fafaf7; /* table header rows / sunk fills */ /* ---- Text -------------------------------------------------------------- */ --text-primary: #1a1917; /* near-black warm ink */ --text-secondary: #6b6a63; /* body / supporting */ --text-tertiary: #9c9a92; /* labels, hints, captions */ /* ---- Hairlines & borders (deliberately thin — 0.5px) ------------------- */ --border: rgba(0,0,0,0.09); /* default hairline */ --border-strong: rgba(0,0,0,0.15); /* inputs, emphasized edges */ --border-faint: rgba(0,0,0,0.06); /* card outline */ /* ---- Brand greens ------------------------------------------------------ */ /* Sidebar gradient (top→bottom) and the in-portal primary-action teal. */ --green: #1D9E75; /* brand green (active dots, charts) */ --green-rail-top: #1FA67D; /* nav rail gradient start */ --green-rail-mid: #178964; /* nav rail gradient middle */ --green-rail-bot: #0E6F50; /* nav rail gradient end */ --accent: #14684D; /* PRIMARY ACTION green (buttons, focus, filters) */ --accent-hover: #0F5A41; /* primary action hover */ --accent-bg: #E7F3EC; /* tinted accent surface */ --sidebar-bg: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #1FA67D 0%, #178964 55%, #0E6F50 100%); --sidebar-text: rgba(255,255,255,0.50); --sidebar-text-hover: rgba(255,255,255,0.85); --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(255,255,255,0.09); --sidebar-border: rgba(255,255,255,0.07); /* ---- AI / avatar / sign-out gradient (pink → magenta) ------------------ */ --magenta-grad: linear-gradient(135deg, #DB6E97 0%, #B84076 50%, #982E5E 100%); --magenta: #B84076; --magenta-deep: #982E5E; /* ---- Semantic status colors (soft tint + deep ink pairs) --------------- */ --green-bg: #E1F5EE; --green-text: #085041; /* success / approved */ --red: #E24B4A; --red-bg: #FCEBEB; --red-text: #791F1F; /* error / rejected */ --amber-bg: #FAEEDA; --amber-text: #633806; /* warning / pending */ --blue-bg: #E6F1FB; --blue-text: #0C447C; /* info */ --gray-bg: #F1EFE8; --gray-text: #444441; /* neutral / muted */ /* Status-badge exact pairs (used on pills: Pending / Approved / Rejected) */ --badge-pending-bg: #FBEDD3; --badge-pending-text: #7A4A0E; --badge-approved-bg: #DBEEC0; --badge-approved-text: #365E14; --badge-rejected-bg: #F8D6E1; --badge-rejected-text: #982E5E; /* ---- Pinwheel palette — 6 tint/ink pairs, cycled by index -------------- */ /* Drawn from the logo's petals. Used for stat cards, section tiles, ranked */ /* rows, avatars. Always pair the tint surface with its ink for icons/rank. */ --pin-1-tint: #CFEDE0; --pin-1-ink: #0F5A41; /* teal-green */ --pin-2-tint: #DBEEC0; --pin-2-ink: #365E14; /* lime */ --pin-3-tint: #F8E2BD; --pin-3-ink: #7A4A0E; /* amber */ --pin-4-tint: #F8D6E1; --pin-4-ink: #982E5E; /* pink */ --pin-5-tint: #D8D8EC; --pin-5-ink: #1E1E69; /* indigo */ --pin-6-tint: #D2E5F4; --pin-6-ink: #0C447C; /* blue */ /* ---- Radii ------------------------------------------------------------- */ --radius-sm: 6px; /* menu items, small controls */ --radius: 8px; /* buttons, inputs, pills base */ --radius-lg: 12px; /* menus, modals */ --radius-xl: 14px; /* cards (stat / section / table) */ --radius-pill: 20px; /* status badges, chips */ /* ---- Elevation --------------------------------------------------------- */ --shadow-card: 0 8px 22px rgba(0,0,0,0.06); /* card hover lift */ --shadow-pop: 0 12px 32px rgba(0,0,0,0.28); /* flyouts (on dark) */ --shadow-menu: 0 8px 24px rgba(0,0,0,0.12); /* light popovers */ --shadow-modal: 0 16px 48px rgba(0,0,0,0.18); /* modals */ /* ---- Motion ------------------------------------------------------------ */ --ease: 0.15s; /* default hover/color transition */ --ease-lift: 0.18s; /* card box-shadow/border */ --ease-press: 0.10s; /* active/press transform */ /* ========================================================================= AUTH SURFACE (login / register) — simpler blue-accented system. Use only to reproduce sign-in screens. ======================================================================= */ --auth-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --auth-blue: #2B6CB0; --auth-blue-hover: #2563a8; --auth-teal: #2C7A7B; --auth-pink: #D53F8C; /* required-field star */ --auth-gray-50: #F7FAFC; --auth-gray-100: #EDF2F7; --auth-gray-300: #CBD5E0; --auth-gray-500: #718096; --auth-gray-700: #2D3748; --auth-gray-900: #1A202C; --auth-error: #C53030; --auth-success: #276749; --auth-radius: 8px; --auth-shadow: 0 4px 24px rgba(0,0,0,0.08); } /* ============================================================================ SEMANTIC TYPE SCALE Lifted from the portal's recurring roles. Numbers are exact px from source. The portal is a dense data tool: weights top out at 600, sizes stay compact, and the mono face carries every number (IDs, money, dates, stat values). ========================================================================== */ /* Page title — e.g. "Dashboard", "Welcome back." */ .t-page-title { font-family: var(--font); font-size: 26px; font-weight: 500; letter-spacing: -0.005em; color: var(--text-primary); line-height: 1.2; } /* Page subtitle under a title */ .t-page-sub { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-secondary); } /* Card / section panel title */ .t-card-title { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--text-primary); } /* Tile / list item title */ .t-item-title { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.3; } /* Body / supporting copy */ .t-body { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.5; } /* Small UI text (inside controls, descriptions) */ .t-small { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--text-secondary); line-height: 1.5; } /* Section eyebrow / table header — UPPERCASE, tracked, tertiary */ .t-eyebrow { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } .t-eyebrow-sm { font-family: var(--font); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } /* Field label */ .t-label { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--text-secondary); } /* Hint / caption */ .t-hint { font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--text-tertiary); } /* Mono roles — every number, identifier, currency value, date and metric */ .t-metric { font-family: var(--mono); font-size: 30px; font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.1; } .t-mono { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-primary); } .t-mono-sm { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--text-tertiary); letter-spacing: 0.02em; }