/* ============================================================ Redesign · Phase 1 · Design Tokens ------------------------------------------------------------ These tokens are globally defined but NOT applied to the UI yet. Pages/components opt in by wrapping their root in `.v2` (see components scoped below). This lets us migrate the app page-by-page without breaking the current look. ============================================================ */ :root { /* --- Color · Surface (CFOAI v6 exact palette) --------- */ --v2-bg-app: #1C2B3A; /* body background */ --v2-bg-sidebar: #22334A; /* sidebar */ --v2-bg-surface-1: #22334A; /* card / panel surface */ --v2-bg-surface-2: #2A3E58; /* inputs, raised surfaces */ --v2-bg-surface-3: #304e68; /* hover over inputs */ --v2-bg-overlay: rgba(10, 18, 32, 0.75); /* modal scrim */ /* --- Color · Border (cool blue-grey, matching v6) ---- */ --v2-border-subtle: rgba(122, 143, 166, 0.13); /* #7A8FA618 */ --v2-border-strong: rgba(122, 143, 166, 0.26); /* #7A8FA633 */ --v2-border-focus: #B09E80; /* --- Color · Text ------------------------------------ */ --v2-text-primary: #ffffff; --v2-text-secondary: #C8D8E8; /* cool blue-white */ --v2-text-muted: #7A8FA6; /* blue-grey */ --v2-text-disabled: rgba(122, 143, 166, 0.4); --v2-text-on-accent: #1C2B3A; /* --- Color · Accent (gold/tan) ----------------------- */ --v2-accent: #B09E80; --v2-accent-hover: #C4B291; --v2-accent-pressed: #9C8A6E; --v2-accent-soft: rgba(176, 158, 128, 0.10); /* --- Color · Status ---------------------------------- */ --v2-status-pending: #d4a017; /* amber */ --v2-status-approved: #2ecc71; /* green */ --v2-status-received: #5da8e0; /* blue */ --v2-status-rejected: #e74c3c; /* red */ --v2-status-draft: #B09E80; /* gold */ --v2-danger: #e74c3c; --v2-danger-soft: rgba(231, 76, 60, 0.14); --v2-warning: #d4a017; --v2-warning-soft: rgba(212, 160, 23, 0.14); --v2-success: #2ecc71; --v2-success-soft: rgba(46, 204, 113, 0.14); --v2-info: #5da8e0; --v2-info-soft: rgba(93, 168, 224, 0.14); /* --- Typography · Family (CFOAI uses DM Sans) -------- */ --v2-font-sans: "DM Sans", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --v2-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono", Menlo, monospace; --v2-font-display: "DM Sans", "Inter", "Segoe UI", sans-serif; /* --- Typography · Scale ------------------------------ */ --v2-fs-xs: 0.6875rem; /* 11px — captions, meta */ --v2-fs-sm: 0.8125rem; /* 13px — secondary body */ --v2-fs-base: 0.875rem; /* 14px — body */ --v2-fs-md: 1rem; /* 16px — strong body */ --v2-fs-lg: 1.125rem; /* 18px — subheadings */ --v2-fs-xl: 1.375rem; /* 22px — page title */ --v2-fs-2xl: 1.75rem; /* 28px — hero number small */ --v2-fs-3xl: 2.25rem; /* 36px — hero number */ --v2-fs-4xl: 2.75rem; /* 44px — hero number XL */ /* --- Typography · Weight ----------------------------- */ --v2-fw-regular: 400; --v2-fw-medium: 500; --v2-fw-semibold: 600; --v2-fw-bold: 700; /* --- Typography · Line height / tracking ------------- */ --v2-lh-tight: 1.15; --v2-lh-snug: 1.3; --v2-lh-normal: 1.5; --v2-tracking-tight: -0.01em; --v2-tracking-normal: 0; --v2-tracking-wide: 0.04em; /* for section eyebrows */ --v2-tracking-wider: 0.08em; /* --- Spacing (4pt grid) ------------------------------ */ --v2-space-0: 0; --v2-space-1: 0.25rem; /* 4px */ --v2-space-2: 0.5rem; /* 8px */ --v2-space-3: 0.75rem; /* 12px */ --v2-space-4: 1rem; /* 16px */ --v2-space-5: 1.25rem; /* 20px */ --v2-space-6: 1.5rem; /* 24px */ --v2-space-7: 2rem; /* 32px */ --v2-space-8: 2.5rem; /* 40px */ --v2-space-9: 3rem; /* 48px */ --v2-space-10: 4rem; /* 64px */ /* --- Radius ------------------------------------------ */ --v2-radius-none: 0; --v2-radius-xs: 2px; --v2-radius-sm: 4px; --v2-radius-md: 8px; /* inputs, small controls (v6: 8px) */ --v2-radius-lg: 10px; /* buttons (v6: 10px) */ --v2-radius-xl: 14px; /* panels/cards (v6: 14px) */ --v2-radius-pill: 999px; /* --- Elevation (used sparingly in flat design) ------- */ --v2-shadow-none: none; --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --v2-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32); --v2-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.42); --v2-shadow-drawer: -12px 0 40px rgba(0, 0, 0, 0.45); /* --- Layout sizing ----------------------------------- */ --v2-sidebar-w: 232px; --v2-drawer-w: 384px; --v2-content-max: 1400px; --v2-topbar-h: 56px; /* --- Motion ------------------------------------------ */ --v2-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --v2-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --v2-dur-instant: 80ms; --v2-dur-fast: 140ms; --v2-dur-base: 220ms; --v2-dur-slow: 360ms; /* --- Z-index scale ----------------------------------- */ --v2-z-base: 1; --v2-z-sticky: 10; --v2-z-drawer: 100; --v2-z-modal: 200; --v2-z-toast: 300; } /* ============================================================ Opt-in root: any subtree wrapped in `.v2` gets the base typographic + color reset. Nothing outside `.v2` is affected. ============================================================ */ .v2 { background-color: var(--v2-bg-app); color: var(--v2-text-primary); font-family: var(--v2-font-sans); font-size: var(--v2-fs-base); font-weight: var(--v2-fw-regular); line-height: var(--v2-lh-normal); letter-spacing: var(--v2-tracking-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "ss03"; /* Inter stylistic alternates if loaded */ } .v2 ::selection { background-color: var(--v2-accent-soft); color: var(--v2-text-primary); } /* Number-heavy surfaces should render tabular figures so columns of money line up. Opt in with `.v2-numeric`. */ .v2 .v2-numeric, .v2-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; } /* Small helper for the uppercase section eyebrows seen in the mockups ("MAIN", "TRANSACTIONS", "IN YOUR BASKET"). */ .v2 .v2-eyebrow, .v2-eyebrow { font-size: var(--v2-fs-xs); font-weight: var(--v2-fw-medium); letter-spacing: var(--v2-tracking-wider); text-transform: uppercase; color: var(--v2-text-muted); }