/* ============================================================================ CARDCORE — design tokens ("Vault & Chip") The card is the hero. Cool paper for the desks people read all day; a deep vault indigo for the screens that live in a card room, a branch printer bay or a night batch window. Chip gold is used exactly where the product's own metaphor is: the credential itself. Every colour below exists in BOTH themes. Portals declare their default surface with data-theme on ; the user can always flip it. ==========================================================================*/ :root { /* ---------------------------------------------------------- typography */ --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ------------------------------------ brand hues (theme-invariant fills) These carry white text at any weight in both themes. Never use them as text colour on a light surface — use the -ink pair below. */ --ultra: #3B4FE4; /* CardCore primary — ultramarine */ --ultra-600: #2B3BC0; --ultra-700: #21309C; --chip: #C9922B; /* EMV chip gold — the credential */ --chip-600: #A87716; --vault: #1B2340; /* the vault / card room */ --vault-600: #121937; --jade: #0E9F76; /* naira-settled schemes, healthy, active */ --jade-600: #0A7C5B; --cyan: #1090C4; /* data, integration, movement */ --cyan-600: #0B719C; --amber: #E08A17; /* clock running, attention */ --amber-600: #B96D07; --rose: #DC3355; /* hotlist, breach, block */ --rose-600: #B7213F; --violet: #7B4BD8; /* Kore AI */ --violet-600: #6134BB; --korevra: #E8732C; /* the house mark */ /* ------------------------------------------------ white-safe fills Anything that carries white text or a white icon uses these, not the vivid hue above. They are deliberately theme-invariant: white sits on them in light AND dark, so they must not flip. All clear 4.5:1. */ --ultra-solid: #2F3FBF; --jade-solid: #07684C; --cyan-solid: #0A5B7D; --amber-solid: #8A5008; --chip-solid: #75500A; --rose-solid: #A81C38; --violet-solid: #5C31B8; --vault-solid: #1B2340; --korevra-solid: #B8531C; /* ------------------------------------------------------- light surfaces */ --bg: #F5F6FB; --bg-2: #ECEEF7; --bg-3: #E1E4F1; --card: #FFFFFF; --card-2: #FAFBFF; --line: rgba(13, 18, 40, 0.10); --line-2: rgba(13, 18, 40, 0.18); --ink: #0D1228; --ink-2: #38405E; --ink-3: #4E5674; --ink-4: #626A88; --inverse: #FFFFFF; /* ----------------------- accent inks (AA against --card and --bg above) */ --ultra-ink: #2635A8; --chip-ink: #75500A; --jade-ink: #076048; --cyan-ink: #0A5B7D; --amber-ink: #8A5008; --rose-ink: #A81C38; --violet-ink: #52299F; --vault-ink: #1B2340; /* ------------------------------- washes (chips, badges, callout blocks) */ --ultra-wash: rgba(59, 79, 228, 0.11); --chip-wash: rgba(201, 146, 43, 0.16); --jade-wash: rgba(14, 159, 118, 0.13); --cyan-wash: rgba(16, 144, 196, 0.13); --amber-wash: rgba(224, 138, 23, 0.15); --rose-wash: rgba(220, 51, 85, 0.12); --violet-wash: rgba(123, 75, 216, 0.12); --vault-wash: rgba(27, 35, 64, 0.08); /* ---------------------------------------------------------- scheme hues Used by the Scheme Switchboard and every card face. Naira-settled schemes read jade/gold; dollar-billed schemes read blue/red. */ --sch-verve: #12A05A; --sch-afrigo: #0B7A4B; --sch-mastercard: #E8501E; --sch-visa: #1A1F71; --sch-unionpay: #C8102E; --sch-papss: #8A6110; /* ------------------------------------------------------------ elevation */ --shadow-1: 0 1px 2px rgba(13, 18, 40, 0.06), 0 1px 3px rgba(13, 18, 40, 0.08); --shadow-2: 0 4px 14px rgba(13, 18, 40, 0.09), 0 1px 3px rgba(13, 18, 40, 0.06); --shadow-3: 0 18px 48px rgba(13, 18, 40, 0.16), 0 4px 12px rgba(13, 18, 40, 0.08); --shadow-card: 0 22px 45px -18px rgba(13, 18, 40, 0.55), 0 3px 10px rgba(13, 18, 40, 0.14); --glow-ultra: 0 0 0 4px rgba(59, 79, 228, 0.22); --glow-rose: 0 0 0 4px rgba(220, 51, 85, 0.22); /* ------------------------------------------------------------- geometry */ --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 26px; --r-card: 14px; /* ISO/IEC 7810 ID-1 corner, to scale */ --r-pill: 999px; /* --------------------------------------------------------------- motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 140ms; --t-base: 240ms; --t-slow: 480ms; /* --------------------------------------------------------------- layout */ --rail: 264px; --topbar: 60px; color-scheme: light; } /* ---- dark ---------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0D1A; --bg-2: #101527; --bg-3: #171D34; --card: #131A2E; --card-2: #1A2239; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.19); --ink: #EEF1FA; --ink-2: #C3CAE0; --ink-3: #A6AECB; --ink-4: #8189A9; --inverse: #0D1228; --ultra-ink: #90A0FF; --chip-ink: #E8BE68; --jade-ink: #45CFA5; --cyan-ink: #55C2ED; --amber-ink: #FFB44D; --rose-ink: #FF7C93; --violet-ink: #B694F5; --vault-ink: #B9C2E0; --ultra-wash: rgba(59, 79, 228, 0.24); --chip-wash: rgba(201, 146, 43, 0.22); --jade-wash: rgba(14, 159, 118, 0.20); --cyan-wash: rgba(16, 144, 196, 0.20); --amber-wash: rgba(224, 138, 23, 0.20); --rose-wash: rgba(220, 51, 85, 0.20); --violet-wash: rgba(123, 75, 216, 0.24); --vault-wash: rgba(185, 194, 224, 0.10); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.62); --shadow-card: 0 24px 50px -18px rgba(0, 0, 0, 0.8), 0 3px 10px rgba(0, 0, 0, 0.5); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0A0D1A; --bg-2: #101527; --bg-3: #171D34; --card: #131A2E; --card-2: #1A2239; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.19); --ink: #EEF1FA; --ink-2: #C3CAE0; --ink-3: #A6AECB; --ink-4: #8189A9; --inverse: #0D1228; --ultra-ink: #90A0FF; --chip-ink: #E8BE68; --jade-ink: #45CFA5; --cyan-ink: #55C2ED; --amber-ink: #FFB44D; --rose-ink: #FF7C93; --violet-ink: #B694F5; --vault-ink: #B9C2E0; --ultra-wash: rgba(59, 79, 228, 0.24); --chip-wash: rgba(201, 146, 43, 0.22); --jade-wash: rgba(14, 159, 118, 0.20); --cyan-wash: rgba(16, 144, 196, 0.20); --amber-wash: rgba(224, 138, 23, 0.20); --rose-wash: rgba(220, 51, 85, 0.20); --violet-wash: rgba(123, 75, 216, 0.24); --vault-wash: rgba(185, 194, 224, 0.10); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.62); --shadow-card: 0 24px 50px -18px rgba(0, 0, 0, 0.8), 0 3px 10px rgba(0, 0, 0, 0.5); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }