/* ============================================================================= Design tokens — Songon Manage Navy + warm gray, conservative finance. Layered: primitive → semantic → component, with legacy aliases for back-compat. ============================================================================= */ :root { color-scheme: light; accent-color: var(--brand-600); /* ---- Type ------------------------------------------------------------- */ --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", ui-monospace, monospace; --font-numeric: "Inter", system-ui, sans-serif; /* Fluid type — clamp(min, ideal, max). Tuned for a 360–1440px range. */ --text-xs: clamp(0.75rem, 0.74rem + 0.05vw, 0.8125rem); --text-sm: clamp(0.8125rem, 0.80rem + 0.10vw, 0.875rem); --text-base: clamp(0.9375rem, 0.91rem + 0.13vw, 1rem); --text-lg: clamp(1.0625rem, 1.04rem + 0.13vw, 1.125rem); --text-xl: clamp(1.1875rem, 1.15rem + 0.18vw, 1.25rem); --text-2xl: clamp(1.375rem, 1.32rem + 0.27vw, 1.5rem); --text-3xl: clamp(1.625rem, 1.50rem + 0.62vw, 2rem); --text-4xl: clamp(1.875rem, 1.70rem + 0.85vw, 2.5rem); --weight-normal: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed:1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.06em; /* ---- Spacing ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Fluid page gutter so dense screens get more breathing room. */ --gutter: clamp(var(--space-4), 1.5vw + var(--space-3), var(--space-8)); /* ---- Radii ------------------------------------------------------------ */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 9999px; --radius-full: 9999px; /* legacy alias */ /* ---- Layout ----------------------------------------------------------- */ --max-width: 1280px; --sidebar-width: 248px; --sidebar-collapsed: 64px; /* ---- Motion ----------------------------------------------------------- */ /* Restrained, finance-appropriate motion: quick and confident, never bouncy. Curves follow the Material-3 emphasized/standard families. Every component references these tokens, so timing is tuned here once. The global prefers-reduced-motion guard in reset.css neutralizes all of it for users who ask for less. */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* general in/out */ --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* larger movements */ --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1); /* entrances */ --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* subtle overshoot */ --duration-fast: 120ms; /* hovers, color/border shifts */ --duration-base: 200ms; /* dialogs, toasts, popovers */ --duration-slow: 320ms; /* off-canvas sidebar, progress fills */ --transition: 160ms; /* ============================================================ Primitive palette — OKLCH, navy + warm gray, restrained. Use semantic tokens below in components, not these directly. ============================================================ */ --navy-50: oklch(0.972 0.012 260); --navy-100: oklch(0.940 0.020 260); --navy-200: oklch(0.870 0.035 260); --navy-300: oklch(0.760 0.060 260); --navy-400: oklch(0.620 0.090 260); --navy-500: oklch(0.480 0.115 260); --navy-600: oklch(0.380 0.105 260); --navy-700: oklch(0.295 0.085 260); --navy-800: oklch(0.225 0.065 260); --navy-900: oklch(0.160 0.045 260); --navy-950: oklch(0.110 0.035 260); /* Warm gray — slight 75° hue, never blue-leaning. Reads as "paper". */ --gray-50: oklch(0.985 0.004 75); --gray-100: oklch(0.965 0.005 75); --gray-200: oklch(0.925 0.006 75); --gray-300: oklch(0.870 0.008 75); --gray-400: oklch(0.770 0.010 75); --gray-500: oklch(0.620 0.011 75); --gray-600: oklch(0.475 0.011 75); --gray-700: oklch(0.360 0.010 75); --gray-800: oklch(0.265 0.008 75); --gray-900: oklch(0.180 0.007 75); --gray-950: oklch(0.120 0.006 75); /* Accent — quiet brass/gold, used sparingly for highlight rows. */ --gold-100: oklch(0.95 0.045 80); --gold-300: oklch(0.85 0.090 80); --gold-500: oklch(0.72 0.130 80); --gold-700: oklch(0.55 0.110 75); /* Status — finance-conservative. Forest, oxblood, amber. */ --green-100: oklch(0.945 0.030 155); --green-500: oklch(0.580 0.130 155); --green-600: oklch(0.480 0.130 155); --green-700: oklch(0.400 0.110 155); --red-100: oklch(0.945 0.030 25); --red-500: oklch(0.555 0.180 25); --red-600: oklch(0.470 0.170 25); --red-700: oklch(0.395 0.140 25); --amber-100: oklch(0.955 0.045 70); --amber-500: oklch(0.720 0.155 65); --amber-700: oklch(0.560 0.130 60); /* ============================================================ Semantic tokens — use these in components. ============================================================ */ /* Surfaces */ --surface-canvas: var(--gray-50); /* page bg */ --surface-raised: #ffffff; /* cards */ --surface-sunken: var(--gray-100); /* table-row alt, input bg */ --surface-overlay: oklch(0.16 0.04 260 / 0.55); --surface-inverse: var(--navy-700); /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-700); --text-muted: var(--gray-600); --text-subtle: var(--gray-500); --text-inverse: #ffffff; --text-brand: var(--navy-700); --text-link: var(--navy-600); /* Borders & dividers */ --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-focus: var(--navy-500); /* Brand / actions */ --brand-50: var(--navy-50); --brand-100: var(--navy-100); --brand-300: var(--navy-300); --brand-500: var(--navy-500); --brand-600: var(--navy-600); --brand-700: var(--navy-700); --brand-900: var(--navy-900); /* Status — fg + bg pairs */ --success-fg: var(--green-700); --success-bg: var(--green-100); --success-default: var(--green-600); --danger-fg: var(--red-700); --danger-bg: var(--red-100); --danger-default: var(--red-600); --warning-fg: var(--amber-700); --warning-bg: var(--amber-100); --warning-default: var(--amber-500); --info-fg: var(--navy-700); --info-bg: var(--navy-100); /* Elevation — subdued, finance-document feel. Tinted toward navy. */ --elev-1: 0 1px 2px oklch(0.20 0.06 260 / 0.06); --elev-2: 0 1px 2px oklch(0.20 0.06 260 / 0.06), 0 2px 6px oklch(0.20 0.06 260 / 0.06); --elev-3: 0 2px 4px oklch(0.20 0.06 260 / 0.06), 0 8px 24px oklch(0.20 0.06 260 / 0.10); --elev-4: 0 4px 8px oklch(0.20 0.06 260 / 0.08), 0 24px 48px oklch(0.20 0.06 260 / 0.16); /* Focus ring — two-stop for visibility on any surface. */ --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--brand-500); --focus-ring-inverse: 0 0 0 2px var(--navy-800), 0 0 0 4px #ffffff; /* ============================================================ Legacy aliases — every variable used by existing CSS/HTML. Keep these so nothing breaks when we change the palette. ============================================================ */ --font-primary: var(--font-sans); --color-black: var(--text-primary); --color-white: #ffffff; --color-text: var(--text-primary); --color-bg: var(--surface-canvas); --color-light: var(--surface-canvas); --color-primary: var(--brand-700); --color-blue: var(--brand-500); --color-dark-blue: var(--brand-700); --color-red: var(--danger-default); --color-border: var(--border-default); --color-muted: var(--text-muted); --color-gray-50: var(--gray-50); --color-gray-100: var(--gray-100); --color-gray-200: var(--gray-200); --color-gray-300: var(--gray-300); --color-gray-400: var(--gray-400); --color-gray-500: var(--gray-500); --color-gray-600: var(--gray-600); --color-gray-700: var(--gray-700); --color-gray-800: var(--gray-800); --color-success: var(--success-fg); --color-success-light: var(--success-bg); --color-warning: var(--warning-default); --color-warning-light: var(--warning-bg); --color-danger: var(--danger-default); --color-danger-light: var(--danger-bg); --color-error: var(--danger-default); --shadow-sm: var(--elev-1); --shadow: var(--elev-2); --shadow-lg: var(--elev-3); }