/* * Payroll's own design tokens. * * They lived in app/assets/tailwind/application.css, which made every "token-bound" * sheet in the app depend on the Tailwind bundle being linked: drop the bundle and * `border: … solid var(--border-default)` becomes invalid and collapses to none. * Plain CSS, so any layout can link it whether or not it links Tailwind. * * Values alias the engine's scales (ui/techfx/base), which must be linked first. */ :root { /* Font families */ --font-family-headline: "Space Grotesk", system-ui, sans-serif; --font-family-paragraph: "Work Sans", system-ui, sans-serif; /* Layout — maquina's sidebar.css reads these; they go with the gem, not with the header */ --sidebar-width: calc(var(--spacing) * 72); --sidebar-width-icon: 3rem; /* Core Colors */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); /* Card */ --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); /* Popover */ --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); /* Primary - Main brand color */ --primary: var(--color-primary-950); --primary-foreground: oklch(1 0 0); /* Secondary */ --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); /* Muted - Subtle backgrounds */ --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); /* Accent - Hover states */ --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); /* Success - Success states */ --success: oklch(0.92 0.04 168); --success-foreground: oklch(0.35 0.08 168); /* Warning - Warning states */ --warning: oklch(0.93 0.04 55); --warning-foreground: oklch(0.4 0.08 50); /* Destructive - Error/danger states */ --destructive: oklch(0.92 0.05 8); --destructive-foreground: oklch(0.4 0.12 8); /* Alert - Alert states */ --alert: var(--color-error-700); --alert-foreground: oklch(1 0 0); /* Borders & Inputs */ --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: var(--color-brand-secondary); /* Charts (optional) */ --chart-1: oklch(0.645 0.246 16); --chart-2: oklch(0.65 0.09 168); --chart-3: oklch(0.72 0.09 55); --chart-4: oklch(0.58 0.18 17); --chart-5: oklch(0.5 0.13 8); /* Sidebar — consumed by maquina's own CSS, so it outlives payroll's lack of a sidebar */ --sidebar: oklch(0.96 0 0); --sidebar-foreground: oklch(0.2 0 0); --sidebar-primary: var(--color-brand-secondary); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9 0 0); --sidebar-accent-foreground: oklch(0.145 0 0); --sidebar-border: oklch(0.88 0 0); --sidebar-ring: var(--color-brand-secondary); /* Semantic border colors (Figma tokens) */ --border-default: var(--color-grey-300); /* form/input borders */ --border-disabled: var(--color-grey-400); /* disabled/inactive borders */ --color-border-accent: var(--color-primary-200); --destructive-border: oklch(0.55 0.18 8); /* visible red border for error states */ /* Semantic background colors */ --color-background-secondary: var(--color-grey-100); --color-background-hover: var(--color-grey-200); --color-background-tertiary: var(--color-grey-200); /* Table row state colors */ --color-row-hover: var(--color-primary-50); --color-row-error: var(--color-error-100); /* Danger semantic colors. The banner bg is a [Legacy] Payroll Figma variable with no counterpart in the Tokens file — a literal hex, not a token waiting to be aliased. */ --color-danger-tertiary: #fef2f2; --color-text-danger-primary: var(--alert); /* Second danger red — not interchangeable with --color-text-danger-primary above. No DS/Figma scale counterpart (its hue sits off the --color-error-* scale entirely), so it's a literal value, not an alias. --payroll- prefixed: "danger-secondary" already exists in the engine (ui/techfx/theme, aliased to --color-error-600) for a different red. */ --payroll-color-text-danger-secondary: oklch(0.4 0.12 8); /* Warning semantic colors */ --color-warning-tertiary: #fef7e0; /* alert banner bg */ --color-text-warning-primary: #93370d; /* alert banner text */ /* Status badge colors */ --color-badge-success-bg: var(--color-secondary-50); --color-badge-success-text: var(--color-secondary-800); --color-badge-error-bg: #ffc9c9; /* [Legacy] Payroll Figma var, no DS token */ --color-badge-error-text: var(--alert); /* Brand aliases */ --color-brand-secondary: var(--color-primary-800); --color-brand-primary: var(--color-primary-950); /* Success semantic aliases (for components using non-shadcn variable names) */ --color-success-subtle: var(--success); --color-success-text: var(--success-foreground); --color-success-border: #abefc6; /* no DS token: the whole "Completed" chip is off-design-system */ /* Dark Mode */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.269 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.63 0.14 293); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --success: oklch(0.32 0.06 168); --success-foreground: oklch(0.82 0.06 168); --warning: oklch(0.36 0.06 55); --warning-foreground: oklch(0.86 0.06 55); --destructive: oklch(0.34 0.07 8); --destructive-foreground: oklch(0.88 0.06 8); --payroll-color-text-danger-secondary: oklch(0.88 0.06 8); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.45 0.16 293); --chart-1: oklch(0.712 0.194 13); --chart-2: oklch(0.72 0.09 168); --chart-3: oklch(0.78 0.09 55); --chart-4: oklch(0.645 0.246 16); --chart-5: oklch(0.58 0.13 8); --sidebar: oklch(0.14 0 0); --sidebar-foreground: oklch(0.9 0 0); --sidebar-primary: oklch(0.63 0.14 293); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.22 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(1 0 0 / 12%); --sidebar-ring: oklch(0.45 0.16 293); } }