/* * ========================================================================== * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * ========================================================================== * This file is generated at build time by ui.CopyStylesWithTheme() * Default theme: corporate-steel | Font: ichizen-default | All themes: 25 total * * To change default theme/font, set APP_THEME and APP_FONT env variables. * Users can switch themes at runtime via the theme switcher in the header. * To customize styles, edit files in packages/pyeza-golang/web/styles/ * ========================================================================== */ /* * ========================================================================== * DESIGN TOKENS - Radii, borders, transitions, z-index * ========================================================================== * Shared visual language tokens used across all apps. Themes control * colors and shadows; these tokens control structural styling. * * Included in generated main.css before theme variables so themes can * override individual values if needed (e.g., a theme with larger radii). * * App-specific layout dimensions (sidebar width, header height, etc.) * belong in each app's own css/app/layout.css, not here. * * CONFIGURABLE AXES (set via data attributes on ): * data-density → controls root font-size (see main-base.css) * data-radius → controls border-radius scale (none|sm|default|lg|full) * data-border → controls border weight (none|default|heavy) * data-theme → controls colors & shadows (see themes/*.css) * data-font → controls font family (see main-base.css) * ========================================================================== */ /* ========================================================================== RADIUS SCALE ========================================================================== Controls the corner rounding of all components. --radius-full and --radius-round are FUNCTIONAL shapes (pills, circles) and stay fixed regardless of the radius config. Usage: ========================================================================== */ /* Default radius scale */ :root, [data-radius="default"] { --radius-sm: 0.375rem; /* 6px — badges, small controls */ --radius-md: 0.625rem; /* 10px — buttons, inputs, chips */ --radius-lg: 1rem; /* 16px — cards, dialogs, panels */ --radius-xl: 1.5rem; /* 24px — large containers */ } /* None: sharp corners */ [data-radius="none"] { --radius-sm: 0; --radius-md: 0; --radius-lg: 0.125rem; /* 2px — subtle softening */ --radius-xl: 0.25rem; /* 4px — slight rounding */ } /* Small: subtle rounding */ [data-radius="sm"] { --radius-sm: 0.1875rem; /* 3px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ } /* Large: more rounded */ [data-radius="lg"] { --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.875rem; /* 14px */ --radius-lg: 1.25rem; /* 20px */ --radius-xl: 2rem; /* 32px */ } /* Full: pill-shaped small elements, generously rounded containers */ [data-radius="full"] { --radius-sm: 9999px; /* pills: badges, chips, small controls */ --radius-md: 9999px; /* pills: buttons, single-line inputs */ --radius-lg: 1.25rem; /* 20px: cards, dialogs, nav items, panels */ --radius-xl: 1.75rem; /* 28px: large containers */ } /* Functional shapes — always fixed regardless of radius config */ :root { --radius-full: 9999px; /* Pill shape */ --radius-round: 50%; /* Circle */ } /* ========================================================================== BORDER WEIGHT ========================================================================== Controls the thickness of borders across all components. Usage: ========================================================================== */ /* Default border weight */ :root, [data-border="default"] { --border-width: 1px; --border-width-thick: 2px; --border-width-focus: 2px; --border-width-accent: 3px; /* accent left-borders, status indicators */ --input-shadow: none; /* inputs use border, no extra shadow */ } /* None: borderless (shadow-driven depth) */ [data-border="none"] { --border-width: 0px; /* 0px not unitless 0: consumers compare it in max() with lengths (cell-grid.css --cg-line), and max() cannot mix 0 with */ --border-width-thick: 1px; --border-width-focus: 2px; --input-shadow: inset 0 0 0 1px var(--border-light); /* ghost border for input definition */ } /* Heavy: more defined edges */ [data-border="heavy"] { --border-width: 2px; --border-width-thick: 3px; --border-width-focus: 3px; --input-shadow: none; } /* ========================================================================== TRANSITIONS & ANIMATION ========================================================================== */ :root { /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; --transition-speed: 0.3s; /* Duration (for component animations) */ --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.4s; /* Easing Functions */ --ease-default: ease; --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spacing scale — used for padding, margin, gap */ --spacing-2xs: 0.25rem; /* 4px — tight internal padding */ --spacing-xs: 0.375rem; /* 6px — badge padding, small gaps */ --spacing-sm: 0.5rem; /* 8px — compact element gaps */ --spacing-sm-tight: 0.625rem; /* 10px — tight action/control gaps */ --spacing-md: 0.75rem; /* 12px — standard padding, form gaps */ --spacing-lg-tight: 0.875rem; /* 14px — compact card/activity gaps */ --spacing-lg: 1rem; /* 16px — card padding, section gaps */ --spacing-xl: 1.25rem; /* 20px — between sections */ --spacing-2xl: 1.5rem; /* 24px — info grid gaps, generous padding */ --spacing-3xl: 1.75rem; /* 28px — detail body padding */ --spacing-4xl: 2rem; /* 32px — section spacers */ --spacing-5xl: 2.5rem; /* 40px — page-level spacing */ --spacing-6xl: 3rem; /* 48px — deep indentation */ /* Component dimensions — structural heights for layout stability */ --table-toolbar-height: 4.5625rem; /* 73px — table toolbar + bulk toolbar min-height */ /* Icon sizes — structural dimensions for SVG/icon elements */ --icon-2xs: 0.875rem; /* 14px — inline icons, breadcrumbs, badges */ --icon-xs: 1rem; /* 16px — table cell icons, small actions */ --icon-sm: 1.25rem; /* 20px — sidebar icons, form helper icons */ --icon-md: 1.5rem; /* 24px — standard action icons, toolbar */ --icon-lg: 1.75rem; /* 28px — panel icons, coming-soon svg */ --icon-xl: 2rem; /* 32px — empty-state icons, large actions */ --icon-2xl: 2.5rem; /* 40px — dashboard activity icons */ --icon-3xl: 3rem; /* 48px — login page icons, hero icons */ /* Z-index layers */ --z-sidebar: 100; --z-sidebar-toggle: 200; --z-settings-overlay: 400; --z-settings-modal: 500; --z-popover: 1000; --z-modal-backdrop: 9998; --z-modal: 9999; } /* ========================================================================== MOBILE HEADER ADJUSTMENTS ========================================================================== */ @media (max-width: 768px) { .header { height: 3.5rem; padding: 0 1rem; } } /* * ========================================================================== * THEME: CORPORATE STEEL * Authoritative, polished business palette with steel blue accents * Think: quarterly reports, boardrooms, investor decks * ========================================================================== */ :root { /* Backgrounds */ --bg-base: #F4F6F9; --bg-sidebar: #EDF0F5; --bg-card: #FFFFFF; --bg-hover: #E8ECF2; --bg-input: #FFFFFF; --bg-overlay: rgba(25, 35, 55, 0.5); /* Text */ --text-primary: #1B2537; --text-secondary: #4A5568; --text-muted: #8895A7; --text-inverse: #FFFFFF; /* Primary Accent — authoritative steel blue */ --accent-primary: #2E5C8A; --accent-primary-light: #EDF3F9; --accent-primary-dark: #1E4470; /* Secondary Accents */ --accent-terracotta: #C0392B; --accent-terracotta-light: #FBEAE8; --accent-terracotta-dark: #962D22; --accent-sage: #27896D; --accent-sage-light: #E8F5F0; --accent-navy: #2E5C8A; --accent-navy-light: #EDF3F9; --accent-navy-dark: #1E4470; --accent-amber: #B8860B; --accent-amber-light: #FBF5E6; --accent-plum: #6C5B7B; --accent-slate: #5A6978; /* Status Colors */ --status-success: #27896D; --status-success-light: #E8F5F0; --status-warning: #B8860B; --status-warning-light: #FBF5E6; --status-error: #C0392B; --status-error-light: #FBEAE8; --status-info: #2E5C8A; --status-info-light: #EDF3F9; /* Borders & Shadows — crisp, structured */ --border: #D5DBE4; --border-light: #E4E9F0; --border-focus: var(--accent-primary); --border-default: #D5DBE4; --border-subtle: #E4E9F0; --bg-muted: #E8ECF2; --bg-subtle: #EDF0F5; --text-subtle: #8895A7; --shadow-sm: 0 1px 2px rgba(25, 35, 55, 0.05); --shadow-md: 0 4px 12px rgba(25, 35, 55, 0.07); --shadow-lg: 0 8px 24px rgba(25, 35, 55, 0.10); --shadow-card: 0 1px 4px rgba(25, 35, 55, 0.06), 0 1px 2px rgba(25, 35, 55, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(25, 35, 55, 0.15); --shadow-xl: 0 20px 50px rgba(25, 35, 55, 0.14); /* App Icon Colors — cooler, desaturated to match authoritative palette */ --app-color-user: #B89830; --app-color-user-dark: #9A7E22; --app-color-user-light: #F7F3E5; --app-color-client: #B8503C; --app-color-client-dark: #943D2C; --app-color-client-light: #F8EAE7; --app-color-inventory: #2E5C8A; --app-color-inventory-dark: #1E4470; --app-color-inventory-light: #EDF3F9; --app-color-service: #6B5BA8; --app-color-service-dark: #524588; --app-color-service-light: #F0EDF8; --app-color-location: #C4694A; --app-color-location-dark: #A85438; --app-color-location-light: #F7EDE8; --app-color-asset: #3D7E8A; --app-color-asset-dark: #2D6470; --app-color-asset-light: #EAF2F5; --app-color-supplier: #4A6490; --app-color-supplier-dark: #364D73; --app-color-supplier-light: #ECF0F6; --app-color-revenue: #5D8A5D; --app-color-revenue-dark: #477047; --app-color-revenue-light: #ECF3EC; --app-color-purchase: #4A7A49; --app-color-purchase-dark: #366235; --app-color-purchase-light: #ECF2EB; --app-color-expense: #B04848; --app-color-expense-dark: #8E3838; --app-color-expense-light: #F6EAEA; --app-color-cash: #D4A04D; --app-color-cash-dark: #B58840; --app-color-cash-light: #FBF5E8; --app-color-report: #3D8888; --app-color-report-dark: #2E6B6B; --app-color-report-light: #EAF2F2; --app-color-admin: #5A6B7C; --app-color-admin-dark: #435060; --app-color-admin-light: #EDF0F3; --app-color-job: #8A6D30; --app-color-job-dark: #6E5824; --app-color-job-light: #F5F0E5; --app-color-payroll: #306878; --app-color-payroll-dark: #225060; --app-color-payroll-light: #E8F2F5; --app-color-loan: #7A5828; --app-color-loan-dark: #60451E; --app-color-loan-light: #F5F0E6; --app-color-equity: #3A3878; --app-color-equity-dark: #2C2A60; --app-color-equity-light: #ECEEF6; --app-color-ledger: #2E6040; --app-color-ledger-dark: #1E4C30; --app-color-ledger-light: #E8F2EC; --app-color-home: #5A6B9A; --app-color-home-dark: #435280; --app-color-home-light: #EDF0F6; /* Theme Meta */ --theme-name: "Corporate Steel"; --theme-icon-bg: linear-gradient(135deg, #F4F6F9 0%, #D5DBE4 100%); --theme-icon-accent: #2E5C8A; } /* * ========================================================================== * THEME: ATELIER INK * Editorial gallery white — rich black type, oxblood accent, hairline rules * Think: fashion mastheads, museum wall labels, letterpress restraint * ========================================================================== */ [data-theme="atelier-ink"] { /* Backgrounds */ --bg-base: #FFFFFF; --bg-sidebar: #F7F5F2; --bg-card: #FFFFFF; --bg-hover: #F2EFEA; --bg-input: #FFFFFF; --bg-overlay: rgba(20, 18, 16, 0.55); /* Text */ --text-primary: #141210; --text-secondary: #4C4742; --text-muted: #948D85; --text-inverse: #FFFFFF; /* Primary Accent — oxblood */ --accent-primary: #7A1F2B; --accent-primary-light: #F7E9EA; --accent-primary-dark: #5C141E; /* Secondary Accents */ --accent-terracotta: #B4552D; --accent-terracotta-light: #F8EAE2; --accent-terracotta-dark: #90411F; --accent-sage: #556B4E; --accent-sage-light: #EBF0E9; --accent-navy: #2F3A56; --accent-navy-light: #EAEDF3; --accent-navy-dark: #212A42; --accent-amber: #A97B21; --accent-amber-light: #F7F0DF; --accent-plum: #6D4B71; --accent-slate: #6E6862; /* Status Colors */ --status-success: #43724B; --status-success-light: #E9F1EA; --status-warning: #A97B21; --status-warning-light: #F7F0DF; --status-error: #A8332E; --status-error-light: #F7E7E6; --status-info: #2F5D74; --status-info-light: #E7EFF3; /* Borders & Shadows — hairlines, near-invisible lift */ --border: #E3DED6; --border-light: #EEEAE3; --border-focus: var(--accent-primary); --border-default: #E3DED6; --border-subtle: #EEEAE3; --bg-muted: #F2EFEA; --bg-subtle: #F7F5F2; --text-subtle: #948D85; --shadow-sm: 0 1px 2px rgba(20, 18, 16, 0.04); --shadow-md: 0 3px 10px rgba(20, 18, 16, 0.06); --shadow-lg: 0 6px 20px rgba(20, 18, 16, 0.08); --shadow-card: 0 1px 3px rgba(20, 18, 16, 0.05); --shadow-card-hover: 0 2px 6px rgba(20, 18, 16, 0.07); --shadow-float: 0 10px 32px rgba(20, 18, 16, 0.12); --shadow-xl: 0 16px 44px rgba(20, 18, 16, 0.12); /* App Icon Colors — heritage pigments, restrained */ --app-color-user: #A97B21; --app-color-user-dark: #886218; --app-color-user-light: #F7F0DF; --app-color-client: #7A1F2B; --app-color-client-dark: #5C141E; --app-color-client-light: #F7E9EA; --app-color-inventory: #2F3A56; --app-color-inventory-dark: #212A42; --app-color-inventory-light: #EAEDF3; --app-color-service: #6D4B71; --app-color-service-dark: #553858; --app-color-service-light: #F0EBF1; --app-color-location: #B4552D; --app-color-location-dark: #90411F; --app-color-location-light: #F8EAE2; --app-color-asset: #3F6C74; --app-color-asset-dark: #2F535A; --app-color-asset-light: #E9F0F1; --app-color-supplier: #4A5878; --app-color-supplier-dark: #384460; --app-color-supplier-light: #ECEEF3; --app-color-revenue: #43724B; --app-color-revenue-dark: #32583A; --app-color-revenue-light: #E9F1EA; --app-color-purchase: #556B4E; --app-color-purchase-dark: #41533B; --app-color-purchase-light: #EBF0E9; --app-color-expense: #A8332E; --app-color-expense-dark: #862722; --app-color-expense-light: #F7E7E6; --app-color-cash: #9C7A2D; --app-color-cash-dark: #7D6122; --app-color-cash-light: #F5F0E1; --app-color-report: #2F5D74; --app-color-report-dark: #22475A; --app-color-report-light: #E7EFF3; --app-color-admin: #6E6862; --app-color-admin-dark: #55504B; --app-color-admin-light: #EFEDEB; --app-color-job: #86642C; --app-color-job-dark: #6A4F21; --app-color-job-light: #F3EEE2; --app-color-payroll: #3E6B69; --app-color-payroll-dark: #2F5250; --app-color-payroll-light: #E8F0F0; --app-color-loan: #7C5A26; --app-color-loan-dark: #62471D; --app-color-loan-light: #F2EDE1; --app-color-equity: #3D3D6B; --app-color-equity-dark: #2D2D52; --app-color-equity-light: #EBEBF2; --app-color-ledger: #2E5A3C; --app-color-ledger-dark: #21452D; --app-color-ledger-light: #E7F0EA; --app-color-home: #141210; --app-color-home-dark: #000000; --app-color-home-light: #EFEDEB; /* Theme Meta */ --theme-name: "Atelier Ink"; --theme-icon-bg: linear-gradient(135deg, #FFFFFF 0%, #E3DED6 100%); --theme-icon-accent: #7A1F2B; } /* * ========================================================================== * THEME: AURORA HAZE * Deep violet night sky with aurora teal, sky and magenta accents * Think: northern lights, nebula gradients, after-dark dashboards * ========================================================================== */ [data-theme="aurora-haze"] { /* Backgrounds */ --bg-base: #120F1E; --bg-sidebar: #171329; --bg-card: #1D1834; --bg-hover: #262043; --bg-input: #1D1834; --bg-overlay: rgba(10, 8, 20, 0.8); /* Text */ --text-primary: #E9E6F7; --text-secondary: #9D97BC; --text-muted: #6F6990; --text-inverse: #120F1E; /* Primary Accent — aurora violet */ --accent-primary: #8B7CF6; --accent-primary-light: rgba(139, 124, 246, 0.16); --accent-primary-dark: #6F5EE8; /* Secondary Accents */ --accent-terracotta: #EC5FA1; --accent-terracotta-light: rgba(236, 95, 161, 0.16); --accent-terracotta-dark: #D14A8B; --accent-sage: #34D399; --accent-sage-light: rgba(52, 211, 153, 0.15); --accent-navy: #38BDF8; --accent-navy-light: rgba(56, 189, 248, 0.15); --accent-navy-dark: #0EA5E9; --accent-amber: #FBBF24; --accent-amber-light: rgba(251, 191, 36, 0.15); --accent-plum: #C084FC; --accent-slate: #9D97BC; /* Status Colors */ --status-success: #34D399; --status-success-light: rgba(52, 211, 153, 0.15); --status-warning: #FBBF24; --status-warning-light: rgba(251, 191, 36, 0.15); --status-error: #FB7185; --status-error-light: rgba(251, 113, 133, 0.16); --status-info: #38BDF8; --status-info-light: rgba(56, 189, 248, 0.15); /* Borders & Shadows — nebula depth */ --border: #2C2650; --border-light: #37305F; --border-focus: var(--accent-primary); --border-default: #2C2650; --border-subtle: #37305F; --bg-muted: #262043; --bg-subtle: #171329; --text-subtle: #6F6990; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); /* App Icon Colors — aurora neon on violet dark, rgba light variants */ --app-color-user: #FBBF24; --app-color-user-dark: #D9A51E; --app-color-user-light: rgba(251, 191, 36, 0.15); --app-color-client: #EC5FA1; --app-color-client-dark: #D14A8B; --app-color-client-light: rgba(236, 95, 161, 0.16); --app-color-inventory: #38BDF8; --app-color-inventory-dark: #0EA5E9; --app-color-inventory-light: rgba(56, 189, 248, 0.15); --app-color-service: #8B7CF6; --app-color-service-dark: #6F5EE8; --app-color-service-light: rgba(139, 124, 246, 0.16); --app-color-location: #FB923C; --app-color-location-dark: #EA7A22; --app-color-location-light: rgba(251, 146, 60, 0.15); --app-color-asset: #2DD4BF; --app-color-asset-dark: #14B8A6; --app-color-asset-light: rgba(45, 212, 191, 0.15); --app-color-supplier: #818CF8; --app-color-supplier-dark: #6366F1; --app-color-supplier-light: rgba(129, 140, 248, 0.15); --app-color-revenue: #34D399; --app-color-revenue-dark: #10B981; --app-color-revenue-light: rgba(52, 211, 153, 0.15); --app-color-purchase: #4ADE80; --app-color-purchase-dark: #22C55E; --app-color-purchase-light: rgba(74, 222, 128, 0.15); --app-color-expense: #FB7185; --app-color-expense-dark: #F43F5E; --app-color-expense-light: rgba(251, 113, 133, 0.16); --app-color-cash: #FBBF24; --app-color-cash-dark: #D9A51E; --app-color-cash-light: rgba(251, 191, 36, 0.15); --app-color-report: #22D3EE; --app-color-report-dark: #06B6D4; --app-color-report-light: rgba(34, 211, 238, 0.15); --app-color-admin: #9D97BC; --app-color-admin-dark: #7F78A3; --app-color-admin-light: rgba(157, 151, 188, 0.16); --app-color-job: #F59E0B; --app-color-job-dark: #D48806; --app-color-job-light: rgba(245, 158, 11, 0.15); --app-color-payroll: #5EEAD4; --app-color-payroll-dark: #2DD4BF; --app-color-payroll-light: rgba(94, 234, 212, 0.15); --app-color-loan: #FCD34D; --app-color-loan-dark: #FBBF24; --app-color-loan-light: rgba(252, 211, 77, 0.15); --app-color-equity: #A78BFA; --app-color-equity-dark: #8B5CF6; --app-color-equity-light: rgba(167, 139, 250, 0.15); --app-color-ledger: #6EE7B7; --app-color-ledger-dark: #34D399; --app-color-ledger-light: rgba(110, 231, 183, 0.15); --app-color-home: #C084FC; --app-color-home-dark: #A855F7; --app-color-home-light: rgba(192, 132, 252, 0.15); /* Theme Meta */ --theme-name: "Aurora Haze"; --theme-icon-bg: linear-gradient(135deg, #1D1834 0%, #120F1E 100%); --theme-icon-accent: #8B7CF6; } /* * ========================================================================== * THEME: BLUEPRINT DRAFT * Cyanotype cobalt with drafting-cyan linework and redline markup * Think: architect's blueprints, technical pens, drafting tables * ========================================================================== */ [data-theme="blueprint-draft"] { /* Backgrounds */ --bg-base: #0C2340; --bg-sidebar: #0F2A4C; --bg-card: #123157; --bg-hover: #1A3D68; --bg-input: #123157; --bg-overlay: rgba(4, 15, 30, 0.8); /* Text */ --text-primary: #E6F1FB; --text-secondary: #9FBBD8; --text-muted: #6E8CAB; --text-inverse: #0C2340; /* Primary Accent — drafting cyan */ --accent-primary: #53C0F0; --accent-primary-light: rgba(83, 192, 240, 0.15); --accent-primary-dark: #2FA8DE; /* Secondary Accents */ --accent-terracotta: #EF6461; --accent-terracotta-light: rgba(239, 100, 97, 0.16); --accent-terracotta-dark: #D94F4C; --accent-sage: #4FD1A1; --accent-sage-light: rgba(79, 209, 161, 0.15); --accent-navy: #6C9BE8; --accent-navy-light: rgba(108, 155, 232, 0.15); --accent-navy-dark: #5583D1; --accent-amber: #F5C242; --accent-amber-light: rgba(245, 194, 66, 0.15); --accent-plum: #A78BDB; --accent-slate: #8FA8C2; /* Status Colors */ --status-success: #4FD1A1; --status-success-light: rgba(79, 209, 161, 0.15); --status-warning: #F5C242; --status-warning-light: rgba(245, 194, 66, 0.15); --status-error: #EF6461; --status-error-light: rgba(239, 100, 97, 0.16); --status-info: #53C0F0; --status-info-light: rgba(83, 192, 240, 0.15); /* Borders & Shadows — inked gridlines */ --border: #1D4470; --border-light: #275081; --border-focus: var(--accent-primary); --border-default: #1D4470; --border-subtle: #275081; --bg-muted: #1A3D68; --bg-subtle: #0F2A4C; --text-subtle: #6E8CAB; --shadow-sm: 0 1px 2px rgba(2, 10, 20, 0.3); --shadow-md: 0 4px 12px rgba(2, 10, 20, 0.4); --shadow-lg: 0 8px 24px rgba(2, 10, 20, 0.5); --shadow-card: 0 2px 8px rgba(2, 10, 20, 0.3); --shadow-card-hover: 0 2px 8px rgba(2, 10, 20, 0.4); --shadow-float: 0 12px 40px rgba(2, 10, 20, 0.55); --shadow-xl: 0 20px 50px rgba(2, 10, 20, 0.6); /* App Icon Colors — technical-pen brights on cobalt, rgba light variants */ --app-color-user: #F5C242; --app-color-user-dark: #DBA92C; --app-color-user-light: rgba(245, 194, 66, 0.15); --app-color-client: #EF6461; --app-color-client-dark: #D94F4C; --app-color-client-light: rgba(239, 100, 97, 0.16); --app-color-inventory: #53C0F0; --app-color-inventory-dark: #2FA8DE; --app-color-inventory-light: rgba(83, 192, 240, 0.15); --app-color-service: #A78BDB; --app-color-service-dark: #8E6FC7; --app-color-service-light: rgba(167, 139, 219, 0.15); --app-color-location: #F59E5B; --app-color-location-dark: #E08540; --app-color-location-light: rgba(245, 158, 91, 0.15); --app-color-asset: #45CFDB; --app-color-asset-dark: #29B6C3; --app-color-asset-light: rgba(69, 207, 219, 0.15); --app-color-supplier: #6C9BE8; --app-color-supplier-dark: #5583D1; --app-color-supplier-light: rgba(108, 155, 232, 0.15); --app-color-revenue: #4FD1A1; --app-color-revenue-dark: #35B788; --app-color-revenue-light: rgba(79, 209, 161, 0.15); --app-color-purchase: #6FDB8B; --app-color-purchase-dark: #4EC271; --app-color-purchase-light: rgba(111, 219, 139, 0.15); --app-color-expense: #F0798D; --app-color-expense-dark: #DB5F75; --app-color-expense-light: rgba(240, 121, 141, 0.16); --app-color-cash: #F5B93E; --app-color-cash-dark: #DBA029; --app-color-cash-light: rgba(245, 185, 62, 0.15); --app-color-report: #4FC3DB; --app-color-report-dark: #34A9C2; --app-color-report-light: rgba(79, 195, 219, 0.15); --app-color-admin: #8FA8C2; --app-color-admin-dark: #7590AD; --app-color-admin-light: rgba(143, 168, 194, 0.16); --app-color-job: #E8A94E; --app-color-job-dark: #D09037; --app-color-job-light: rgba(232, 169, 78, 0.15); --app-color-payroll: #62D5E8; --app-color-payroll-dark: #43BDD2; --app-color-payroll-light: rgba(98, 213, 232, 0.15); --app-color-loan: #F0CE6B; --app-color-loan-dark: #DBB64F; --app-color-loan-light: rgba(240, 206, 107, 0.15); --app-color-equity: #8E9FF0; --app-color-equity-dark: #7385DB; --app-color-equity-light: rgba(142, 159, 240, 0.15); --app-color-ledger: #6FE0B2; --app-color-ledger-dark: #4EC796; --app-color-ledger-light: rgba(111, 224, 178, 0.15); --app-color-home: #53C0F0; --app-color-home-dark: #2FA8DE; --app-color-home-light: rgba(83, 192, 240, 0.15); /* Theme Meta */ --theme-name: "Blueprint Draft"; --theme-icon-bg: linear-gradient(135deg, #0F2A4C 0%, #0C2340 100%); --theme-icon-accent: #53C0F0; } /* * ========================================================================== * THEME: BRUTALIST INK * Pure black/white with a single bold electric red accent * Think: industrial design, concrete typography, anti-vibe * ========================================================================== */ [data-theme="brutalist-ink"] { /* Backgrounds — stark, clean surfaces */ --bg-base: #FAFAFA; --bg-sidebar: #F0F0F0; --bg-card: #FFFFFF; --bg-hover: #E8E8E8; --bg-input: #FFFFFF; --bg-overlay: rgba(0, 0, 0, 0.6); /* Text — true black, maximum contrast */ --text-primary: #0A0A0A; --text-secondary: #3A3A3A; --text-muted: #6A6A6A; --text-inverse: #FFFFFF; /* Primary Accent — electric red, the single pop of color */ --accent-primary: #E02020; --accent-primary-light: #FEF0F0; --accent-primary-dark: #B81818; /* Secondary Accents — minimal, mostly achromatic */ --accent-terracotta: #E02020; --accent-terracotta-light: #FEF0F0; --accent-terracotta-dark: #B81818; --accent-sage: #1A1A1A; --accent-sage-light: #F0F0F0; --accent-navy: #0A0A0A; --accent-navy-light: #F0F0F0; --accent-navy-dark: #000000; --accent-amber: #E02020; --accent-amber-light: #FEF0F0; --accent-plum: #3A3A3A; --accent-slate: #6A6A6A; /* Status Colors — functional use of the accent + grayscale */ --status-success: #1A8A1A; --status-success-light: #E8F5E8; --status-warning: #CC7A00; --status-warning-light: #FFF5E0; --status-error: #E02020; --status-error-light: #FEF0F0; --status-info: #0A0A0A; --status-info-light: #F0F0F0; /* Borders & Shadows — hard edges, no ambiguity */ --border: #D0D0D0; --border-light: #E0E0E0; --border-focus: var(--accent-primary); --border-default: #D0D0D0; --border-subtle: #E0E0E0; --bg-muted: #E8E8E8; --bg-subtle: #F0F0F0; --text-subtle: #6A6A6A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.12); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.20); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.18); /* App Icon Colors — grayscale with red highlight */ --app-color-user: #E02020; --app-color-user-dark: #B81818; --app-color-user-light: #FEF0F0; --app-color-client: #0A0A0A; --app-color-client-dark: #000000; --app-color-client-light: #F0F0F0; --app-color-inventory: #3A3A3A; --app-color-inventory-dark: #1A1A1A; --app-color-inventory-light: #F0F0F0; --app-color-service: #6A6A6A; --app-color-service-dark: #4A4A4A; --app-color-service-light: #F2F2F2; --app-color-location: #E02020; --app-color-location-dark: #B81818; --app-color-location-light: #FEF0F0; --app-color-asset: #4A4A4A; --app-color-asset-dark: #2A2A2A; --app-color-asset-light: #F0F0F0; --app-color-supplier: #3A3A3A; --app-color-supplier-dark: #1A1A1A; --app-color-supplier-light: #F0F0F0; --app-color-revenue: #1A8A1A; --app-color-revenue-dark: #126812; --app-color-revenue-light: #E8F5E8; --app-color-purchase: #1A8A1A; --app-color-purchase-dark: #126812; --app-color-purchase-light: #E8F5E8; --app-color-expense: #E02020; --app-color-expense-dark: #B81818; --app-color-expense-light: #FEF0F0; --app-color-cash: #0A0A0A; --app-color-cash-dark: #000000; --app-color-cash-light: #F0F0F0; --app-color-report: #4A4A4A; --app-color-report-dark: #2A2A2A; --app-color-report-light: #F0F0F0; --app-color-admin: #6A6A6A; --app-color-admin-dark: #4A4A4A; --app-color-admin-light: #F2F2F2; --app-color-job: #3A3A3A; --app-color-job-dark: #1A1A1A; --app-color-job-light: #F0F0F0; --app-color-payroll: #4A4A4A; --app-color-payroll-dark: #2A2A2A; --app-color-payroll-light: #F0F0F0; --app-color-loan: #0A0A0A; --app-color-loan-dark: #000000; --app-color-loan-light: #F0F0F0; --app-color-equity: #3A3A3A; --app-color-equity-dark: #1A1A1A; --app-color-equity-light: #F0F0F0; --app-color-ledger: #1A8A1A; --app-color-ledger-dark: #126812; --app-color-ledger-light: #E8F5E8; --app-color-home: #3A3A3A; --app-color-home-dark: #1A1A1A; --app-color-home-light: #F0F0F0; /* Theme Meta */ --theme-name: "Brutalist Ink"; --theme-icon-bg: linear-gradient(135deg, #FAFAFA 0%, #D0D0D0 100%); --theme-icon-accent: #E02020; } /* * ========================================================================== * THEME: FOREST NIGHT * A nature-inspired dark green theme * ========================================================================== */ [data-theme="forest-night"] { /* Backgrounds */ --bg-base: #0D1512; --bg-sidebar: #131F1A; --bg-card: #1A2922; --bg-hover: #22352C; --bg-input: #1A2922; --bg-overlay: rgba(13, 21, 18, 0.8); /* Text */ --text-primary: #E8F0EC; --text-secondary: #9DB5A8; --text-muted: #6B8578; --text-inverse: #0D1512; /* Primary Accent */ --accent-primary: #4ADE80; --accent-primary-light: rgba(74, 222, 128, 0.15); --accent-primary-dark: #22C55E; /* Secondary Accents */ --accent-terracotta: #FB923C; --accent-terracotta-light: rgba(251, 146, 60, 0.15); --accent-terracotta-dark: #EA580C; --accent-sage: #4ADE80; --accent-sage-light: rgba(74, 222, 128, 0.15); --accent-navy: #38BDF8; --accent-navy-light: rgba(56, 189, 248, 0.15); --accent-navy-dark: #0EA5E9; --accent-amber: #FACC15; --accent-amber-light: rgba(250, 204, 21, 0.15); --accent-plum: #C084FC; --accent-slate: #9DB5A8; /* Status Colors */ --status-success: #4ADE80; --status-success-light: rgba(74, 222, 128, 0.15); --status-warning: #FACC15; --status-warning-light: rgba(250, 204, 21, 0.15); --status-error: #F87171; --status-error-light: rgba(248, 113, 113, 0.15); --status-info: #38BDF8; --status-info-light: rgba(56, 189, 248, 0.15); /* Borders & Shadows */ --border: #2D4038; --border-light: #3D5248; --border-focus: var(--accent-primary); --border-default: #2D4038; --border-subtle: #3D5248; --bg-muted: #22352C; --bg-subtle: #131F1A; --text-subtle: #6B8578; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); /* App Icon Colors — bright on dark, rgba light variants */ --app-color-user: #FACC15; --app-color-user-dark: #EAB308; --app-color-user-light: rgba(250, 204, 21, 0.15); --app-color-client: #FB923C; --app-color-client-dark: #EA580C; --app-color-client-light: rgba(251, 146, 60, 0.15); --app-color-inventory: #38BDF8; --app-color-inventory-dark: #0EA5E9; --app-color-inventory-light: rgba(56, 189, 248, 0.15); --app-color-service: #C084FC; --app-color-service-dark: #A855F7; --app-color-service-light: rgba(192, 132, 252, 0.15); --app-color-location: #FB7185; --app-color-location-dark: #F43F5E; --app-color-location-light: rgba(251, 113, 133, 0.15); --app-color-asset: #22D3EE; --app-color-asset-dark: #06B6D4; --app-color-asset-light: rgba(34, 211, 238, 0.15); --app-color-supplier: #818CF8; --app-color-supplier-dark: #6366F1; --app-color-supplier-light: rgba(129, 140, 248, 0.15); --app-color-revenue: #4ADE80; --app-color-revenue-dark: #22C55E; --app-color-revenue-light: rgba(74, 222, 128, 0.15); --app-color-purchase: #34D399; --app-color-purchase-dark: #10B981; --app-color-purchase-light: rgba(52, 211, 153, 0.15); --app-color-expense: #F87171; --app-color-expense-dark: #EF4444; --app-color-expense-light: rgba(248, 113, 113, 0.15); --app-color-cash: #FBBF24; --app-color-cash-dark: #D9A51E; --app-color-cash-light: rgba(251, 191, 36, 0.15); --app-color-report: #2DD4BF; --app-color-report-dark: #14B8A6; --app-color-report-light: rgba(45, 212, 191, 0.15); --app-color-admin: #9DB5A8; --app-color-admin-dark: #6B8578; --app-color-admin-light: rgba(157, 181, 168, 0.15); --app-color-job: #D97706; --app-color-job-dark: #B45309; --app-color-job-light: rgba(217, 119, 6, 0.15); --app-color-payroll: #22D3EE; --app-color-payroll-dark: #06B6D4; --app-color-payroll-light: rgba(34, 211, 238, 0.15); --app-color-loan: #FBBF24; --app-color-loan-dark: #D9A51E; --app-color-loan-light: rgba(251, 191, 36, 0.15); --app-color-equity: #818CF8; --app-color-equity-dark: #6366F1; --app-color-equity-light: rgba(129, 140, 248, 0.15); --app-color-ledger: #4ADE80; --app-color-ledger-dark: #22C55E; --app-color-ledger-light: rgba(74, 222, 128, 0.15); --app-color-home: #818CF8; --app-color-home-dark: #6366F1; --app-color-home-light: rgba(129, 140, 248, 0.15); /* Theme Meta */ --theme-name: "Forest Night"; --theme-icon-bg: linear-gradient(135deg, #1A2922 0%, #0D1512 100%); --theme-icon-accent: #4ADE80; } /* * ========================================================================== * THEME: ICHIZEN DEFAULT * Official Ichizen brand theme — deep indigo primary from ichizen-v1.svg (#3D0DDA) * Clean, professional, modern — neutral whites with vibrant indigo accents * Think: SaaS dashboard, brand-forward admin, polished product UI * ========================================================================== */ [data-theme="ichizen-default"] { /* Backgrounds — clean white with faint indigo tint */ --bg-base: #FAFAFD; --bg-sidebar: #F3F2FA; --bg-card: #FFFFFF; --bg-hover: #EEEDF8; --bg-input: #FFFFFF; --bg-overlay: rgba(14, 6, 42, 0.45); /* Text — near-black with blue undertone */ --text-primary: #0E062A; --text-secondary: #4A4460; --text-muted: #8E88A4; --text-inverse: #FFFFFF; /* Primary Accent — Ichizen brand indigo from SVG */ --accent-primary: #3D0DDA; --accent-primary-light: #EEEBFC; --accent-primary-dark: #2F0AAD; /* Secondary Accents */ --accent-terracotta: #E53E3E; --accent-terracotta-light: #FEF0F0; --accent-terracotta-dark: #C53030; --accent-sage: #0FA968; --accent-sage-light: #ECFDF3; --accent-navy: #2B6CB0; --accent-navy-light: #EBF4FF; --accent-navy-dark: #2256A0; --accent-amber: #D69E2E; --accent-amber-light: #FEFCE8; --accent-plum: #805AD5; --accent-slate: #6B7280; /* Status Colors */ --status-success: #0FA968; --status-success-light: #ECFDF3; --status-warning: #D69E2E; --status-warning-light: #FEFCE8; --status-error: #E53E3E; --status-error-light: #FEF0F0; --status-info: #2B6CB0; --status-info-light: #EBF4FF; /* Borders & Shadows — crisp, cool-toned */ --border: #E2DFF0; --border-light: #EEEDF5; --border-focus: var(--accent-primary); --border-default: #E2DFF0; --border-subtle: #EEEDF5; /* Subtle/muted surface + text — between card and hover, derived from theme scale */ --bg-muted: #EEEDF8; --bg-subtle: #F3F2FA; --text-subtle: #8E88A4; --shadow-sm: 0 1px 2px rgba(14, 6, 42, 0.04); --shadow-md: 0 4px 12px rgba(14, 6, 42, 0.06); --shadow-lg: 0 8px 24px rgba(14, 6, 42, 0.09); --shadow-card: 0 2px 8px rgba(14, 6, 42, 0.04), 0 1px 2px rgba(14, 6, 42, 0.05); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(14, 6, 42, 0.14); --shadow-xl: 0 20px 50px rgba(14, 6, 42, 0.12); /* App Icon Colors — vivid, modern, high-saturation */ --app-color-user: #D69E2E; --app-color-user-dark: #B88620; --app-color-user-light: #FEFCE8; --app-color-client: #E53E3E; --app-color-client-dark: #C53030; --app-color-client-light: #FEF0F0; --app-color-inventory: #2B6CB0; --app-color-inventory-dark: #225698; --app-color-inventory-light: #EBF4FF; --app-color-service: #805AD5; --app-color-service-dark: #6842B8; --app-color-service-light: #F3EEFA; --app-color-location: #DD6B20; --app-color-location-dark: #C05616; --app-color-location-light: #FFF1E6; --app-color-asset: #0891B2; --app-color-asset-dark: #0E7490; --app-color-asset-light: #E6F7F9; --app-color-supplier: #4F46E5; --app-color-supplier-dark: #4338CA; --app-color-supplier-light: #EEF2FF; --app-color-revenue: #059669; --app-color-revenue-dark: #047857; --app-color-revenue-light: #ECFDF5; --app-color-purchase: #16A34A; --app-color-purchase-dark: #15803D; --app-color-purchase-light: #F0FDF4; --app-color-expense: #DC2626; --app-color-expense-dark: #B91C1C; --app-color-expense-light: #FEF2F2; --app-color-cash: #B8860B; --app-color-cash-dark: #996F09; --app-color-cash-light: #FEF9E7; --app-color-report: #0D9488; --app-color-report-dark: #0F766E; --app-color-report-light: #F0FDFA; --app-color-admin: #6B7280; --app-color-admin-dark: #4B5563; --app-color-admin-light: #F3F4F6; --app-color-job: #B45309; --app-color-job-dark: #92400E; --app-color-job-light: #FFFBEB; --app-color-payroll: #0E7490; --app-color-payroll-dark: #0C6580; --app-color-payroll-light: #E6F7F9; --app-color-loan: #92400E; --app-color-loan-dark: #78350F; --app-color-loan-light: #FFFBEB; --app-color-equity: #3730A3; --app-color-equity-dark: #312E81; --app-color-equity-light: #EEF2FF; --app-color-ledger: #166534; --app-color-ledger-dark: #14532D; --app-color-ledger-light: #F0FDF4; --app-color-home: #4F46E5; --app-color-home-dark: #4338CA; --app-color-home-light: #EEF2FF; /* Theme Meta */ --theme-name: "Ichizen Default"; --theme-icon-bg: linear-gradient(135deg, #FAFAFD 0%, #E2DFF0 100%); --theme-icon-accent: #3D0DDA; } /* * ========================================================================== * THEME: KYOTO INDIGO * Washi-paper warmth with aizome indigo and a vermillion seal accent * Think: hand-dyed textiles, calligraphy ink, temple stationery * ========================================================================== */ [data-theme="kyoto-indigo"] { /* Backgrounds */ --bg-base: #F7F5F0; --bg-sidebar: #F0EDE5; --bg-card: #FFFFFF; --bg-hover: #EBE7DC; --bg-input: #FFFFFF; --bg-overlay: rgba(28, 32, 51, 0.5); /* Text */ --text-primary: #22263B; --text-secondary: #4E5370; --text-muted: #8B8FA3; --text-inverse: #FFFFFF; /* Primary Accent — deep aizome indigo */ --accent-primary: #2E4372; --accent-primary-light: #E9EDF6; --accent-primary-dark: #1F3055; /* Secondary Accents */ --accent-terracotta: #C43E2F; --accent-terracotta-light: #F9E9E6; --accent-terracotta-dark: #9C2F23; --accent-sage: #58805A; --accent-sage-light: #EAF2EA; --accent-navy: #2E4372; --accent-navy-light: #E9EDF6; --accent-navy-dark: #1F3055; --accent-amber: #C99118; --accent-amber-light: #F9F1DF; --accent-plum: #7A5C94; --accent-slate: #6A7183; /* Status Colors */ --status-success: #3E7D4E; --status-success-light: #E8F3EB; --status-warning: #C99118; --status-warning-light: #F9F1DF; --status-error: #C43E2F; --status-error-light: #F9E9E6; --status-info: #2E6E8E; --status-info-light: #E7F1F5; /* Borders & Shadows — soft washi grain */ --border: #DED9CC; --border-light: #E9E5DA; --border-focus: var(--accent-primary); --border-default: #DED9CC; --border-subtle: #E9E5DA; --bg-muted: #EBE7DC; --bg-subtle: #F0EDE5; --text-subtle: #8B8FA3; --shadow-sm: 0 1px 2px rgba(34, 38, 59, 0.05); --shadow-md: 0 4px 12px rgba(34, 38, 59, 0.07); --shadow-lg: 0 8px 24px rgba(34, 38, 59, 0.10); --shadow-card: 0 1px 4px rgba(34, 38, 59, 0.06), 0 1px 2px rgba(34, 38, 59, 0.04); --shadow-card-hover: 0 2px 8px rgba(34, 38, 59, 0.09); --shadow-float: 0 12px 40px rgba(34, 38, 59, 0.15); --shadow-xl: 0 20px 50px rgba(34, 38, 59, 0.14); /* App Icon Colors — muted Japanese traditional pigments */ --app-color-user: #B8912E; --app-color-user-dark: #967420; --app-color-user-light: #F8F2E2; --app-color-client: #C43E2F; --app-color-client-dark: #9C2F23; --app-color-client-light: #F9E9E6; --app-color-inventory: #2E4372; --app-color-inventory-dark: #1F3055; --app-color-inventory-light: #E9EDF6; --app-color-service: #7A5C94; --app-color-service-dark: #614878; --app-color-service-light: #F2EDF6; --app-color-location: #BC6A3C; --app-color-location-dark: #99532C; --app-color-location-light: #F8EEE6; --app-color-asset: #33707E; --app-color-asset-dark: #255762; --app-color-asset-light: #E8F1F3; --app-color-supplier: #4A5D8C; --app-color-supplier-dark: #384870; --app-color-supplier-light: #ECEFF6; --app-color-revenue: #3E7D4E; --app-color-revenue-dark: #2F633C; --app-color-revenue-light: #E8F3EB; --app-color-purchase: #58805A; --app-color-purchase-dark: #446546; --app-color-purchase-light: #EAF2EA; --app-color-expense: #AD4438; --app-color-expense-dark: #8A342B; --app-color-expense-light: #F7EAE8; --app-color-cash: #C99118; --app-color-cash-dark: #A67612; --app-color-cash-light: #F9F1DF; --app-color-report: #2E6E8E; --app-color-report-dark: #225670; --app-color-report-light: #E7F1F5; --app-color-admin: #6A7183; --app-color-admin-dark: #525868; --app-color-admin-light: #EEF0F3; --app-color-job: #8A6D30; --app-color-job-dark: #6E5624; --app-color-job-light: #F4F0E4; --app-color-payroll: #33707E; --app-color-payroll-dark: #255762; --app-color-payroll-light: #E8F1F3; --app-color-loan: #7A5828; --app-color-loan-dark: #60451E; --app-color-loan-light: #F4EFE6; --app-color-equity: #3D3A78; --app-color-equity-dark: #2E2B60; --app-color-equity-light: #ECECF6; --app-color-ledger: #2E6040; --app-color-ledger-dark: #1E4C30; --app-color-ledger-light: #E8F2EC; --app-color-home: #2E4372; --app-color-home-dark: #1F3055; --app-color-home-light: #E9EDF6; /* Theme Meta */ --theme-name: "Kyoto Indigo"; --theme-icon-bg: linear-gradient(135deg, #F7F5F0 0%, #DED9CC 100%); --theme-icon-accent: #2E4372; } /* * ========================================================================== * THEME: LEDGER MONO * Cool slate/steel gray with crisp high-contrast shadows * Think: spreadsheets, accounting ledgers, grid precision * ========================================================================== */ [data-theme="ledger-mono"] { /* Backgrounds — cool, clinical precision */ --bg-base: #F2F3F5; --bg-sidebar: #E8EAED; --bg-card: #FFFFFF; --bg-hover: #DCDFE3; --bg-input: #FFFFFF; --bg-overlay: rgba(20, 24, 30, 0.55); /* Text — near-black with cool undertones */ --text-primary: #14181E; --text-secondary: #4A5060; --text-muted: #7A808C; --text-inverse: #FFFFFF; /* Primary Accent — dark steel */ --accent-primary: #2C3544; --accent-primary-light: #EDEFF2; --accent-primary-dark: #1A2030; /* Secondary Accents — desaturated, data-focused */ --accent-terracotta: #C0392B; --accent-terracotta-light: #FBEAE8; --accent-terracotta-dark: #962D22; --accent-sage: #27896D; --accent-sage-light: #E8F5F0; --accent-navy: #2C3544; --accent-navy-light: #EDEFF2; --accent-navy-dark: #1A2030; --accent-amber: #A68A00; --accent-amber-light: #FBF5E0; --accent-plum: #5A5080; --accent-slate: #5C6370; /* Status Colors — high-contrast for data readability */ --status-success: #27896D; --status-success-light: #E8F5F0; --status-warning: #A68A00; --status-warning-light: #FBF5E0; --status-error: #C0392B; --status-error-light: #FBEAE8; --status-info: #2C5EA0; --status-info-light: #EBF0F8; /* Borders & Shadows — crisp, defined edges */ --border: #CBCED4; --border-light: #DCDFE3; --border-focus: var(--accent-primary); --border-default: #CBCED4; --border-subtle: #DCDFE3; --bg-muted: #DCDFE3; --bg-subtle: #E8EAED; --text-subtle: #7A808C; --shadow-sm: 0 1px 2px rgba(20, 24, 30, 0.06); --shadow-md: 0 4px 12px rgba(20, 24, 30, 0.09); --shadow-lg: 0 8px 24px rgba(20, 24, 30, 0.12); --shadow-card: 0 1px 3px rgba(20, 24, 30, 0.06), 0 1px 2px rgba(20, 24, 30, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.10); --shadow-float: 0 12px 40px rgba(20, 24, 30, 0.18); --shadow-xl: 0 20px 50px rgba(20, 24, 30, 0.16); /* App Icon Colors — muted, ledger-appropriate */ --app-color-user: #A68A00; --app-color-user-dark: #8A7200; --app-color-user-light: #F8F3E0; --app-color-client: #B04040; --app-color-client-dark: #903030; --app-color-client-light: #F6EAEA; --app-color-inventory: #2C5EA0; --app-color-inventory-dark: #1E4880; --app-color-inventory-light: #EBF0F8; --app-color-service: #5A5080; --app-color-service-dark: #443C68; --app-color-service-light: #EEECF4; --app-color-location: #B06038; --app-color-location-dark: #904A28; --app-color-location-light: #F6EDE6; --app-color-asset: #387880; --app-color-asset-dark: #286068; --app-color-asset-light: #E8F2F4; --app-color-supplier: #3C5890; --app-color-supplier-dark: #2C4470; --app-color-supplier-light: #E8EDF5; --app-color-revenue: #27896D; --app-color-revenue-dark: #1A6E55; --app-color-revenue-light: #E8F5F0; --app-color-purchase: #2A7840; --app-color-purchase-dark: #1E6030; --app-color-purchase-light: #E8F2EA; --app-color-expense: #C0392B; --app-color-expense-dark: #962D22; --app-color-expense-light: #FBEAE8; --app-color-cash: #A68A00; --app-color-cash-dark: #8A7200; --app-color-cash-light: #F8F3E0; --app-color-report: #287878; --app-color-report-dark: #1E6060; --app-color-report-light: #E8F2F2; --app-color-admin: #5C6370; --app-color-admin-dark: #444C58; --app-color-admin-light: #EDEEF0; --app-color-job: #8A6D20; --app-color-job-dark: #6E5818; --app-color-job-light: #F4EFE0; --app-color-payroll: #286878; --app-color-payroll-dark: #1E5060; --app-color-payroll-light: #E8EFF2; --app-color-loan: #7A5820; --app-color-loan-dark: #604418; --app-color-loan-light: #F2ECE0; --app-color-equity: #3A3878; --app-color-equity-dark: #2C2A60; --app-color-equity-light: #ECEEF6; --app-color-ledger: #2E6040; --app-color-ledger-dark: #1E4C30; --app-color-ledger-light: #E8F2EC; --app-color-home: #4A5080; --app-color-home-dark: #363C68; --app-color-home-light: #ECEEF5; /* Theme Meta */ --theme-name: "Ledger Mono"; --theme-icon-bg: linear-gradient(135deg, #F2F3F5 0%, #CBCED4 100%); --theme-icon-accent: #2C3544; } /* * ========================================================================== * THEME: MATCHA GARDEN * Calm matcha green with warm clay and pine-teal accents * Think: tea houses, moss gardens, quiet focus * ========================================================================== */ [data-theme="matcha-garden"] { /* Backgrounds */ --bg-base: #F3F6EF; --bg-sidebar: #EBF0E4; --bg-card: #FFFFFF; --bg-hover: #E4EBDA; --bg-input: #FFFFFF; --bg-overlay: rgba(38, 50, 32, 0.5); /* Text */ --text-primary: #26331F; --text-secondary: #51604A; --text-muted: #8A9682; --text-inverse: #FFFFFF; /* Primary Accent — deep matcha */ --accent-primary: #567A3E; --accent-primary-light: #ECF3E6; --accent-primary-dark: #42602E; /* Secondary Accents */ --accent-terracotta: #BC6742; --accent-terracotta-light: #F8ECE5; --accent-terracotta-dark: #98512F; --accent-sage: #6E9861; --accent-sage-light: #ECF4E9; --accent-navy: #3E6B71; --accent-navy-light: #E7F0F1; --accent-navy-dark: #2E5257; --accent-amber: #C29B3B; --accent-amber-light: #F8F2E2; --accent-plum: #8A6E9E; --accent-slate: #77826E; /* Status Colors */ --status-success: #4E8A50; --status-success-light: #E8F4E9; --status-warning: #C29B3B; --status-warning-light: #F8F2E2; --status-error: #C05248; --status-error-light: #F8E9E7; --status-info: #3E6B71; --status-info-light: #E7F0F1; /* Borders & Shadows — soft leaf-litter */ --border: #DCE3D2; --border-light: #E6ECDD; --border-focus: var(--accent-primary); --border-default: #DCE3D2; --border-subtle: #E6ECDD; --bg-muted: #E4EBDA; --bg-subtle: #EBF0E4; --text-subtle: #8A9682; --shadow-sm: 0 1px 2px rgba(38, 50, 32, 0.05); --shadow-md: 0 4px 12px rgba(38, 50, 32, 0.07); --shadow-lg: 0 8px 24px rgba(38, 50, 32, 0.10); --shadow-card: 0 1px 4px rgba(38, 50, 32, 0.06), 0 1px 2px rgba(38, 50, 32, 0.04); --shadow-card-hover: 0 2px 8px rgba(38, 50, 32, 0.09); --shadow-float: 0 12px 40px rgba(38, 50, 32, 0.15); --shadow-xl: 0 20px 50px rgba(38, 50, 32, 0.14); /* App Icon Colors — botanical, earth-toned */ --app-color-user: #B3922F; --app-color-user-dark: #927621; --app-color-user-light: #F7F1DF; --app-color-client: #BC6742; --app-color-client-dark: #98512F; --app-color-client-light: #F8ECE5; --app-color-inventory: #3E6B71; --app-color-inventory-dark: #2E5257; --app-color-inventory-light: #E7F0F1; --app-color-service: #8A6E9E; --app-color-service-dark: #6F577F; --app-color-service-light: #F2EEF6; --app-color-location: #B5713A; --app-color-location-dark: #92592B; --app-color-location-light: #F7EEE4; --app-color-asset: #4B8A7E; --app-color-asset-dark: #396D63; --app-color-asset-light: #E9F3F1; --app-color-supplier: #5C7291; --app-color-supplier-dark: #475A75; --app-color-supplier-light: #EBEFF4; --app-color-revenue: #4E8A50; --app-color-revenue-dark: #3C6E3E; --app-color-revenue-light: #E8F4E9; --app-color-purchase: #6E9861; --app-color-purchase-dark: #577C4C; --app-color-purchase-light: #ECF4E9; --app-color-expense: #B15048; --app-color-expense-dark: #8F3E37; --app-color-expense-light: #F7EAE8; --app-color-cash: #C29B3B; --app-color-cash-dark: #A07E2C; --app-color-cash-light: #F8F2E2; --app-color-report: #46818D; --app-color-report-dark: #356671; --app-color-report-light: #E8F1F3; --app-color-admin: #77826E; --app-color-admin-dark: #5D6755; --app-color-admin-light: #EFF1ED; --app-color-job: #8F7A34; --app-color-job-dark: #726127; --app-color-job-light: #F4F1E3; --app-color-payroll: #3E7E86; --app-color-payroll-dark: #2F636A; --app-color-payroll-light: #E7F1F2; --app-color-loan: #866A34; --app-color-loan-dark: #6B5428; --app-color-loan-light: #F4EFE4; --app-color-equity: #55558E; --app-color-equity-dark: #414173; --app-color-equity-light: #EDEDF4; --app-color-ledger: #35704A; --app-color-ledger-dark: #275939; --app-color-ledger-light: #E6F1EA; --app-color-home: #567A3E; --app-color-home-dark: #42602E; --app-color-home-light: #ECF3E6; /* Theme Meta */ --theme-name: "Matcha Garden"; --theme-icon-bg: linear-gradient(135deg, #F3F6EF 0%, #DCE3D2 100%); --theme-icon-accent: #567A3E; } /* * ========================================================================== * THEME: MIDNIGHT SCHOLAR * Dark academia — espresso wood, antique brass, parchment text * Think: library reading rooms after hours, leather-bound ledgers * ========================================================================== */ [data-theme="midnight-scholar"] { /* Backgrounds */ --bg-base: #16120D; --bg-sidebar: #1D1812; --bg-card: #241E16; --bg-hover: #2E261C; --bg-input: #241E16; --bg-overlay: rgba(10, 8, 5, 0.8); /* Text */ --text-primary: #EDE4D3; --text-secondary: #B3A78F; --text-muted: #857A64; --text-inverse: #16120D; /* Primary Accent — antique brass */ --accent-primary: #CBA135; --accent-primary-light: rgba(203, 161, 53, 0.15); --accent-primary-dark: #A88425; /* Secondary Accents */ --accent-terracotta: #C25546; --accent-terracotta-light: rgba(194, 85, 70, 0.16); --accent-terracotta-dark: #9E4236; --accent-sage: #7FA05F; --accent-sage-light: rgba(127, 160, 95, 0.16); --accent-navy: #5D7BA6; --accent-navy-light: rgba(93, 123, 166, 0.16); --accent-navy-dark: #48628A; --accent-amber: #D9A441; --accent-amber-light: rgba(217, 164, 65, 0.16); --accent-plum: #9B7FB0; --accent-slate: #8C8272; /* Status Colors */ --status-success: #7FA05F; --status-success-light: rgba(127, 160, 95, 0.16); --status-warning: #D9A441; --status-warning-light: rgba(217, 164, 65, 0.16); --status-error: #C25546; --status-error-light: rgba(194, 85, 70, 0.16); --status-info: #5D7BA6; --status-info-light: rgba(93, 123, 166, 0.16); /* Borders & Shadows — candle-lit depth */ --border: #383021; --border-light: #453B2A; --border-focus: var(--accent-primary); --border-default: #383021; --border-subtle: #453B2A; --bg-muted: #2E261C; --bg-subtle: #1D1812; --text-subtle: #857A64; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); /* App Icon Colors — burnished library hues, rgba light variants */ --app-color-user: #D9A441; --app-color-user-dark: #B8882F; --app-color-user-light: rgba(217, 164, 65, 0.16); --app-color-client: #C25546; --app-color-client-dark: #9E4236; --app-color-client-light: rgba(194, 85, 70, 0.16); --app-color-inventory: #5D7BA6; --app-color-inventory-dark: #48628A; --app-color-inventory-light: rgba(93, 123, 166, 0.16); --app-color-service: #9B7FB0; --app-color-service-dark: #7F6494; --app-color-service-light: rgba(155, 127, 176, 0.16); --app-color-location: #C97F4A; --app-color-location-dark: #A66538; --app-color-location-light: rgba(201, 127, 74, 0.16); --app-color-asset: #6FA3A0; --app-color-asset-dark: #578683; --app-color-asset-light: rgba(111, 163, 160, 0.16); --app-color-supplier: #8493B8; --app-color-supplier-dark: #69789E; --app-color-supplier-light: rgba(132, 147, 184, 0.16); --app-color-revenue: #7FA05F; --app-color-revenue-dark: #66844A; --app-color-revenue-light: rgba(127, 160, 95, 0.16); --app-color-purchase: #94AE6A; --app-color-purchase-dark: #799253; --app-color-purchase-light: rgba(148, 174, 106, 0.16); --app-color-expense: #B85C50; --app-color-expense-dark: #96473D; --app-color-expense-light: rgba(184, 92, 80, 0.16); --app-color-cash: #CBA135; --app-color-cash-dark: #A88425; --app-color-cash-light: rgba(203, 161, 53, 0.16); --app-color-report: #6F9EA8; --app-color-report-dark: #58828B; --app-color-report-light: rgba(111, 158, 168, 0.16); --app-color-admin: #8C8272; --app-color-admin-dark: #71685A; --app-color-admin-light: rgba(140, 130, 114, 0.16); --app-color-job: #B08D3F; --app-color-job-dark: #91732F; --app-color-job-light: rgba(176, 141, 63, 0.16); --app-color-payroll: #5F9490; --app-color-payroll-dark: #4A7875; --app-color-payroll-light: rgba(95, 148, 144, 0.16); --app-color-loan: #A98A55; --app-color-loan-dark: #8B7042; --app-color-loan-light: rgba(169, 138, 85, 0.16); --app-color-equity: #7D7BB3; --app-color-equity-dark: #636197; --app-color-equity-light: rgba(125, 123, 179, 0.16); --app-color-ledger: #6D9A72; --app-color-ledger-dark: #567E5B; --app-color-ledger-light: rgba(109, 154, 114, 0.16); --app-color-home: #CBA135; --app-color-home-dark: #A88425; --app-color-home-light: rgba(203, 161, 53, 0.16); /* Theme Meta */ --theme-name: "Midnight Scholar"; --theme-icon-bg: linear-gradient(135deg, #241E16 0%, #16120D 100%); --theme-icon-accent: #CBA135; } /* * ========================================================================== * THEME: MINIMAL LIGHT * Ultra-clean, bright and airy design * ========================================================================== */ [data-theme="minimal-light"] { /* Backgrounds */ --bg-base: #FFFFFF; --bg-sidebar: #FAFAFA; --bg-card: #FFFFFF; --bg-hover: #F5F5F5; --bg-input: #FFFFFF; --bg-overlay: rgba(0, 0, 0, 0.4); /* Text */ --text-primary: #171717; --text-secondary: #525252; --text-muted: #A3A3A3; --text-inverse: #FFFFFF; /* Primary Accent */ --accent-primary: #171717; --accent-primary-light: #F5F5F5; --accent-primary-dark: #000000; /* Secondary Accents */ --accent-terracotta: #DC2626; --accent-terracotta-light: #FEF2F2; --accent-terracotta-dark: #B91C1C; --accent-sage: #16A34A; --accent-sage-light: #F0FDF4; --accent-navy: #2563EB; --accent-navy-light: #EFF6FF; --accent-navy-dark: #1D4ED8; --accent-amber: #CA8A04; --accent-amber-light: #FEFCE8; --accent-plum: #9333EA; --accent-slate: #64748B; /* Status Colors */ --status-success: #16A34A; --status-success-light: #F0FDF4; --status-warning: #CA8A04; --status-warning-light: #FEFCE8; --status-error: #DC2626; --status-error-light: #FEF2F2; --status-info: #2563EB; --status-info-light: #EFF6FF; /* Borders & Shadows */ --border: #E5E5E5; --border-light: #F5F5F5; --border-focus: var(--accent-primary); --border-default: #E5E5E5; --border-subtle: #F5F5F5; --bg-muted: #F5F5F5; --bg-subtle: #FAFAFA; --text-subtle: #A3A3A3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15); /* App Icon Colors — crisp, high-contrast Tailwind tones */ --app-color-user: #CA8A04; --app-color-user-dark: #A16207; --app-color-user-light: #FEFCE8; --app-color-client: #DC2626; --app-color-client-dark: #B91C1C; --app-color-client-light: #FEF2F2; --app-color-inventory: #2563EB; --app-color-inventory-dark: #1D4ED8; --app-color-inventory-light: #EFF6FF; --app-color-service: #9333EA; --app-color-service-dark: #7E22CE; --app-color-service-light: #FAF5FF; --app-color-location: #EA580C; --app-color-location-dark: #C2410C; --app-color-location-light: #FFF7ED; --app-color-asset: #0891B2; --app-color-asset-dark: #0E7490; --app-color-asset-light: #ECFEFF; --app-color-supplier: #4F46E5; --app-color-supplier-dark: #4338CA; --app-color-supplier-light: #EEF2FF; --app-color-revenue: #16A34A; --app-color-revenue-dark: #15803D; --app-color-revenue-light: #F0FDF4; --app-color-purchase: #059669; --app-color-purchase-dark: #047857; --app-color-purchase-light: #ECFDF5; --app-color-expense: #E11D48; --app-color-expense-dark: #BE123C; --app-color-expense-light: #FFF1F2; --app-color-cash: #A16207; --app-color-cash-dark: #854D06; --app-color-cash-light: #FEF3C7; --app-color-report: #0D9488; --app-color-report-dark: #0F766E; --app-color-report-light: #F0FDFA; --app-color-admin: #64748B; --app-color-admin-dark: #475569; --app-color-admin-light: #F8FAFC; --app-color-job: #B45309; --app-color-job-dark: #92400E; --app-color-job-light: #FFFBEB; --app-color-payroll: #0E7490; --app-color-payroll-dark: #0C6580; --app-color-payroll-light: #ECFEFF; --app-color-loan: #92400E; --app-color-loan-dark: #78350F; --app-color-loan-light: #FFF7ED; --app-color-equity: #3730A3; --app-color-equity-dark: #312E81; --app-color-equity-light: #EEF2FF; --app-color-ledger: #166534; --app-color-ledger-dark: #14532D; --app-color-ledger-light: #F0FDF4; --app-color-home: #4F46E5; --app-color-home-dark: #4338CA; --app-color-home-light: #EEF2FF; /* Theme Meta */ --theme-name: "Minimal Light"; --theme-icon-bg: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%); --theme-icon-accent: #171717; } /* * ========================================================================== * THEME: MODERN RETAIL * Vibrant indigo primary with a clean, blue-tinted neutral palette * Matches ICHIZEN brand identity — logo infinity symbol in #4318D9 * ========================================================================== */ [data-theme="modern-retail"] { /* Backgrounds — clean with slight blue tint */ --bg-base: #FAFAFE; --bg-sidebar: #F4F3FB; --bg-card: #FFFFFF; --bg-hover: #EEEDF5; --bg-input: #FFFFFF; --bg-overlay: rgba(15, 13, 26, 0.45); /* Text — deep blue-black */ --text-primary: #0F0D1A; --text-secondary: #4A4658; --text-muted: #8E8A9D; --text-inverse: #FFFFFF; /* Primary Accent — vibrant indigo from ICHIZEN logo */ --accent-primary: #4318D9; --accent-primary-light: #EDE9FC; --accent-primary-dark: #3712B5; /* Secondary Accents */ --accent-terracotta: #EF4444; --accent-terracotta-light: #FEF2F2; --accent-terracotta-dark: #DC2626; --accent-sage: #10B981; --accent-sage-light: #ECFDF5; --accent-navy: #3B82F6; --accent-navy-light: #EFF6FF; --accent-navy-dark: #2563EB; --accent-amber: #F59E0B; --accent-amber-light: #FFFBEB; --accent-plum: #8B5CF6; --accent-slate: #64748B; /* Status Colors */ --status-success: #10B981; --status-success-light: #ECFDF5; --status-warning: #F59E0B; --status-warning-light: #FFFBEB; --status-error: #EF4444; --status-error-light: #FEF2F2; --status-info: #3B82F6; --status-info-light: #EFF6FF; /* Borders & Shadows — cool-toned, subtle */ --border: #E5E3EE; --border-light: #F0EEF5; --border-focus: var(--accent-primary); --border-default: #E5E3EE; --border-subtle: #F0EEF5; --bg-muted: #EEEDF5; --bg-subtle: #F4F3FB; --text-subtle: #8E8A9D; --shadow-sm: 0 1px 2px rgba(15, 13, 26, 0.04); --shadow-md: 0 4px 12px rgba(15, 13, 26, 0.06); --shadow-lg: 0 8px 24px rgba(15, 13, 26, 0.08); --shadow-card: 0 2px 8px rgba(15, 13, 26, 0.04), 0 1px 2px rgba(15, 13, 26, 0.06); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(15, 13, 26, 0.14); --shadow-xl: 0 20px 50px rgba(15, 13, 26, 0.11); /* App Icon Colors — vibrant, brand-forward */ --app-color-user: #F59E0B; --app-color-user-dark: #D97706; --app-color-user-light: #FFFBEB; --app-color-client: #EF4444; --app-color-client-dark: #DC2626; --app-color-client-light: #FEF2F2; --app-color-inventory: #3B82F6; --app-color-inventory-dark: #2563EB; --app-color-inventory-light: #EFF6FF; --app-color-service: #8B5CF6; --app-color-service-dark: #7C3AED; --app-color-service-light: #F5F3FF; --app-color-location: #F97316; --app-color-location-dark: #EA580C; --app-color-location-light: #FFF7ED; --app-color-asset: #06B6D4; --app-color-asset-dark: #0891B2; --app-color-asset-light: #ECFEFF; --app-color-supplier: #6366F1; --app-color-supplier-dark: #4F46E5; --app-color-supplier-light: #EEF2FF; --app-color-revenue: #10B981; --app-color-revenue-dark: #059669; --app-color-revenue-light: #ECFDF5; --app-color-purchase: #22C55E; --app-color-purchase-dark: #16A34A; --app-color-purchase-light: #F0FDF4; --app-color-expense: #F43F5E; --app-color-expense-dark: #E11D48; --app-color-expense-light: #FFF1F2; --app-color-cash: #D97706; --app-color-cash-dark: #B45309; --app-color-cash-light: #FFF7ED; --app-color-report: #14B8A6; --app-color-report-dark: #0D9488; --app-color-report-light: #F0FDFA; --app-color-admin: #64748B; --app-color-admin-dark: #475569; --app-color-admin-light: #F8FAFC; --app-color-job: #D97706; --app-color-job-dark: #B45309; --app-color-job-light: #FFFBEB; --app-color-payroll: #0891B2; --app-color-payroll-dark: #0E7490; --app-color-payroll-light: #ECFEFF; --app-color-loan: #D97706; --app-color-loan-dark: #B45309; --app-color-loan-light: #FFFBEB; --app-color-equity: #4F46E5; --app-color-equity-dark: #4338CA; --app-color-equity-light: #EEF2FF; --app-color-ledger: #16A34A; --app-color-ledger-dark: #15803D; --app-color-ledger-light: #F0FDF4; --app-color-home: #4318D9; --app-color-home-dark: #3712B5; --app-color-home-light: #EDE9FC; /* Theme Meta */ --theme-name: "Modern Retail"; --theme-icon-bg: linear-gradient(135deg, #FAFAFE 0%, #E5E3EE 100%); --theme-icon-accent: #4318D9; } /* * ========================================================================== * THEME: OCEAN DEEP * A deep, professional blue theme with cyan accents * ========================================================================== */ [data-theme="ocean-deep"] { /* Backgrounds */ --bg-base: #0F1419; --bg-sidebar: #15202B; --bg-card: #192734; --bg-hover: #22303C; --bg-input: #192734; --bg-overlay: rgba(15, 20, 25, 0.8); /* Text */ --text-primary: #E7E9EA; --text-secondary: #8B98A5; --text-muted: #6E767D; --text-inverse: #0F1419; /* Primary Accent */ --accent-primary: #1D9BF0; --accent-primary-light: rgba(29, 155, 240, 0.15); --accent-primary-dark: #1A8CD8; /* Secondary Accents */ --accent-terracotta: #F4212E; --accent-terracotta-light: rgba(244, 33, 46, 0.15); --accent-terracotta-dark: #DC1D28; --accent-sage: #00BA7C; --accent-sage-light: rgba(0, 186, 124, 0.15); --accent-navy: #1D9BF0; --accent-navy-light: rgba(29, 155, 240, 0.15); --accent-navy-dark: #1A8CD8; --accent-amber: #FFD400; --accent-amber-light: rgba(255, 212, 0, 0.15); --accent-plum: #7856FF; --accent-slate: #8B98A5; /* Status Colors */ --status-success: #00BA7C; --status-success-light: rgba(0, 186, 124, 0.15); --status-warning: #FFD400; --status-warning-light: rgba(255, 212, 0, 0.15); --status-error: #F4212E; --status-error-light: rgba(244, 33, 46, 0.15); --status-info: #1D9BF0; --status-info-light: rgba(29, 155, 240, 0.15); /* Borders & Shadows */ --border: #2F3336; --border-light: #38444D; --border-focus: var(--accent-primary); --border-default: #2F3336; --border-subtle: #38444D; --bg-muted: #22303C; --bg-subtle: #15202B; --text-subtle: #6E767D; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); /* App Icon Colors — vivid neon on dark, rgba light variants */ --app-color-user: #FFD400; --app-color-user-dark: #EAC100; --app-color-user-light: rgba(255, 212, 0, 0.15); --app-color-client: #F4212E; --app-color-client-dark: #DC1D28; --app-color-client-light: rgba(244, 33, 46, 0.15); --app-color-inventory: #1D9BF0; --app-color-inventory-dark: #1A8CD8; --app-color-inventory-light: rgba(29, 155, 240, 0.15); --app-color-service: #7856FF; --app-color-service-dark: #6340E0; --app-color-service-light: rgba(120, 86, 255, 0.15); --app-color-location: #FF6F00; --app-color-location-dark: #E66400; --app-color-location-light: rgba(255, 111, 0, 0.15); --app-color-asset: #00C9DB; --app-color-asset-dark: #00B0C2; --app-color-asset-light: rgba(0, 201, 219, 0.15); --app-color-supplier: #6C8EEF; --app-color-supplier-dark: #5678D8; --app-color-supplier-light: rgba(108, 142, 239, 0.15); --app-color-revenue: #00BA7C; --app-color-revenue-dark: #00A06A; --app-color-revenue-light: rgba(0, 186, 124, 0.15); --app-color-purchase: #17C964; --app-color-purchase-dark: #12A050; --app-color-purchase-light: rgba(23, 201, 100, 0.15); --app-color-expense: #FF4757; --app-color-expense-dark: #E83D4C; --app-color-expense-light: rgba(255, 71, 87, 0.15); --app-color-cash: #F59E0B; --app-color-cash-dark: #D48806; --app-color-cash-light: rgba(245, 158, 11, 0.15); --app-color-report: #00B8D4; --app-color-report-dark: #009DB3; --app-color-report-light: rgba(0, 184, 212, 0.15); --app-color-admin: #8B98A5; --app-color-admin-dark: #6E767D; --app-color-admin-light: rgba(139, 152, 165, 0.15); --app-color-job: #D97706; --app-color-job-dark: #B45309; --app-color-job-light: rgba(217, 119, 6, 0.15); --app-color-payroll: #22D3EE; --app-color-payroll-dark: #06B6D4; --app-color-payroll-light: rgba(34, 211, 238, 0.15); --app-color-loan: #FBBF24; --app-color-loan-dark: #D9A51E; --app-color-loan-light: rgba(251, 191, 36, 0.15); --app-color-equity: #818CF8; --app-color-equity-dark: #6366F1; --app-color-equity-light: rgba(129, 140, 248, 0.15); --app-color-ledger: #4ADE80; --app-color-ledger-dark: #22C55E; --app-color-ledger-light: rgba(74, 222, 128, 0.15); --app-color-home: #7856FF; --app-color-home-dark: #6340E0; --app-color-home-light: rgba(120, 86, 255, 0.15); /* Theme Meta */ --theme-name: "Ocean Deep"; --theme-icon-bg: linear-gradient(135deg, #15202B 0%, #0F1419 100%); --theme-icon-accent: #1D9BF0; } /* * ========================================================================== * THEME: PAPER & INK * Ultra-minimal editorial palette — warm off-white paper, near-black ink * Think: broadsheet newspapers, letterpress, typeset manuscripts * ========================================================================== */ [data-theme="paper-ink"] { /* Backgrounds — warm paper tones */ --bg-base: #F9F7F3; --bg-sidebar: #F3F0EA; --bg-card: #FEFDFB; --bg-hover: #EDEBE5; --bg-input: #FEFDFB; --bg-overlay: rgba(30, 28, 25, 0.45); /* Text — true ink black with warm undertone */ --text-primary: #1E1C19; --text-secondary: #5C5850; --text-muted: #9E9A92; --text-inverse: #FEFDFB; /* Primary Accent — near-black, ink-like */ --accent-primary: #2D2A25; --accent-primary-light: #F0EEEA; --accent-primary-dark: #1A1816; /* Secondary Accents — muted, editorial palette */ --accent-terracotta: #A3543A; --accent-terracotta-light: #F7EDE9; --accent-terracotta-dark: #8A4530; --accent-sage: #5E7F5E; --accent-sage-light: #EDF3ED; --accent-navy: #3B5068; --accent-navy-light: #ECF0F4; --accent-navy-dark: #2C3D50; --accent-amber: #A68B3C; --accent-amber-light: #F8F4E8; --accent-plum: #6E5A72; --accent-slate: #6B6862; /* Status Colors — restrained, tasteful */ --status-success: #5E7F5E; --status-success-light: #EDF3ED; --status-warning: #A68B3C; --status-warning-light: #F8F4E8; --status-error: #A3543A; --status-error-light: #F7EDE9; --status-info: #3B5068; --status-info-light: #ECF0F4; /* Borders & Shadows — delicate, barely-there */ --border: #DDD9D2; --border-light: #EAE7E1; --border-focus: var(--accent-primary); --border-default: #DDD9D2; --border-subtle: #EAE7E1; --bg-muted: #EDEBE5; --bg-subtle: #F3F0EA; --text-subtle: #9E9A92; --shadow-sm: 0 1px 2px rgba(30, 28, 25, 0.03); --shadow-md: 0 4px 12px rgba(30, 28, 25, 0.05); --shadow-lg: 0 8px 24px rgba(30, 28, 25, 0.07); --shadow-card: 0 1px 3px rgba(30, 28, 25, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(30, 28, 25, 0.10); --shadow-xl: 0 20px 50px rgba(30, 28, 25, 0.09); /* App Icon Colors — muted, desaturated, editorial ink tones */ --app-color-user: #A68B3C; --app-color-user-dark: #8A7430; --app-color-user-light: #F8F4E8; --app-color-client: #A3543A; --app-color-client-dark: #8A4530; --app-color-client-light: #F7EDE9; --app-color-inventory: #3B5068; --app-color-inventory-dark: #2C3D50; --app-color-inventory-light: #ECF0F4; --app-color-service: #6E5A72; --app-color-service-dark: #574660; --app-color-service-light: #F2EEF3; --app-color-location: #B06840; --app-color-location-dark: #955535; --app-color-location-light: #F7EDE6; --app-color-asset: #4A7878; --app-color-asset-dark: #3A6060; --app-color-asset-light: #ECF3F3; --app-color-supplier: #4A6080; --app-color-supplier-dark: #3A4C68; --app-color-supplier-light: #ECF0F5; --app-color-revenue: #5E7F5E; --app-color-revenue-dark: #4A6548; --app-color-revenue-light: #EDF3ED; --app-color-purchase: #4A7048; --app-color-purchase-dark: #3A5838; --app-color-purchase-light: #ECF2EC; --app-color-expense: #A04848; --app-color-expense-dark: #883838; --app-color-expense-light: #F5EAEA; --app-color-cash: #B89860; --app-color-cash-dark: #9A7E4C; --app-color-cash-light: #F8F3EB; --app-color-report: #408080; --app-color-report-dark: #326565; --app-color-report-light: #EBF2F2; --app-color-admin: #6B6862; --app-color-admin-dark: #525048; --app-color-admin-light: #F0EFED; --app-color-job: #8A6B30; --app-color-job-dark: #705525; --app-color-job-light: #F5F0E6; --app-color-payroll: #3A6870; --app-color-payroll-dark: #2C5258; --app-color-payroll-light: #EAF1F2; --app-color-loan: #8A6230; --app-color-loan-dark: #704E25; --app-color-loan-light: #F5F0E6; --app-color-equity: #424080; --app-color-equity-dark: #323068; --app-color-equity-light: #EEEDF5; --app-color-ledger: #3A6848; --app-color-ledger-dark: #2C5238; --app-color-ledger-light: #EAF1ED; --app-color-home: #4E5580; --app-color-home-dark: #3A4068; --app-color-home-light: #EEEDF5; /* Theme Meta */ --theme-name: "Paper & Ink"; --theme-icon-bg: linear-gradient(135deg, #F9F7F3 0%, #DDD9D2 100%); --theme-icon-accent: #2D2A25; } /* * ========================================================================== * THEME: PEACH FIZZ * Friendly, approachable, informal — warm peach and soft coral tones * Think: casual team apps, startup dashboards, Friday vibes * ========================================================================== */ [data-theme="peach-fizz"] { /* Backgrounds — soft, warm, inviting */ --bg-base: #FEF8F4; --bg-sidebar: #FAF0EA; --bg-card: #FFFFFF; --bg-hover: #F6EBE3; --bg-input: #FFFFFF; --bg-overlay: rgba(70, 45, 30, 0.4); /* Text — warm dark brown, not harsh black */ --text-primary: #3D2E24; --text-secondary: #7A6558; --text-muted: #B09D92; --text-inverse: #FFFFFF; /* Primary Accent — friendly peach-coral */ --accent-primary: #E87461; --accent-primary-light: #FEF0ED; --accent-primary-dark: #D4604E; /* Secondary Accents — cheerful, varied */ --accent-terracotta: #E87461; --accent-terracotta-light: #FEF0ED; --accent-terracotta-dark: #D4604E; --accent-sage: #5DAE8B; --accent-sage-light: #EBF7F1; --accent-navy: #5B8DB8; --accent-navy-light: #EDF4FA; --accent-navy-dark: #4A78A0; --accent-amber: #E2A64B; --accent-amber-light: #FDF5E7; --accent-plum: #B07BAD; --accent-slate: #8A7E78; /* Status Colors — softer, friendlier */ --status-success: #5DAE8B; --status-success-light: #EBF7F1; --status-warning: #E2A64B; --status-warning-light: #FDF5E7; --status-error: #E87461; --status-error-light: #FEF0ED; --status-info: #5B8DB8; --status-info-light: #EDF4FA; /* Borders & Shadows — soft, rounded feel */ --border: #EBE0D8; --border-light: #F3ECE6; --border-focus: var(--accent-primary); --border-default: #EBE0D8; --border-subtle: #F3ECE6; --bg-muted: #F6EBE3; --bg-subtle: #FAF0EA; --text-subtle: #B09D92; --shadow-sm: 0 1px 3px rgba(70, 45, 30, 0.05); --shadow-md: 0 4px 14px rgba(70, 45, 30, 0.07); --shadow-lg: 0 8px 28px rgba(70, 45, 30, 0.09); --shadow-card: 0 2px 10px rgba(70, 45, 30, 0.05), 0 1px 3px rgba(70, 45, 30, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 14px 44px rgba(70, 45, 30, 0.14); --shadow-xl: 0 22px 56px rgba(70, 45, 30, 0.12); /* App Icon Colors — soft, warm, approachable */ --app-color-user: #E2A64B; --app-color-user-dark: #C88E38; --app-color-user-light: #FDF5E7; --app-color-client: #E87461; --app-color-client-dark: #D4604E; --app-color-client-light: #FEF0ED; --app-color-inventory: #5B8DB8; --app-color-inventory-dark: #4A78A0; --app-color-inventory-light: #EDF4FA; --app-color-service: #B07BAD; --app-color-service-dark: #956E92; --app-color-service-light: #F6EFF5; --app-color-location: #E09060; --app-color-location-dark: #C87848; --app-color-location-light: #FDF2E8; --app-color-asset: #50A0A8; --app-color-asset-dark: #3E8890; --app-color-asset-light: #EBF5F6; --app-color-supplier: #6880B0; --app-color-supplier-dark: #546A98; --app-color-supplier-light: #EDF0F7; --app-color-revenue: #5DAE8B; --app-color-revenue-dark: #4A9575; --app-color-revenue-light: #EBF7F1; --app-color-purchase: #4E9E70; --app-color-purchase-dark: #3E8660; --app-color-purchase-light: #EAF5EF; --app-color-expense: #D86060; --app-color-expense-dark: #C04848; --app-color-expense-light: #FAEAEA; --app-color-cash: #C9A75B; --app-color-cash-dark: #AB8D48; --app-color-cash-light: #FBF6EB; --app-color-report: #4A9898; --app-color-report-dark: #3A8080; --app-color-report-light: #EBF4F4; --app-color-admin: #8A7E78; --app-color-admin-dark: #706560; --app-color-admin-light: #F3F0EE; --app-color-job: #C89040; --app-color-job-dark: #A87830; --app-color-job-light: #FBF3E8; --app-color-payroll: #4A9098; --app-color-payroll-dark: #387880; --app-color-payroll-light: #EBF4F5; --app-color-loan: #C08840; --app-color-loan-dark: #A07030; --app-color-loan-light: #FBF4E8; --app-color-equity: #7068B8; --app-color-equity-dark: #5858A0; --app-color-equity-light: #F0EEF8; --app-color-ledger: #509868; --app-color-ledger-dark: #3E8050; --app-color-ledger-light: #EBF5EF; --app-color-home: #6268A8; --app-color-home-dark: #4E5390; --app-color-home-light: #F0EFF7; /* Theme Meta */ --theme-name: "Peach Fizz"; --theme-icon-bg: linear-gradient(135deg, #FEF8F4 0%, #F6EBE3 100%); --theme-icon-accent: #E87461; } /* * ========================================================================== * THEME: RISO POP * Risograph print pop — cream paper, cobalt/pink/acid spot inks, * hard-offset ink shadows, chunky outlines. Loud on purpose. * Think: zine fairs, screen-printed gig posters, riso duotones * ========================================================================== */ [data-theme="riso-pop"] { /* Backgrounds */ --bg-base: #FBF6EA; --bg-sidebar: #F5EDDA; --bg-card: #FFFFFF; --bg-hover: #F1E8D2; --bg-input: #FFFFFF; --bg-overlay: rgba(24, 20, 45, 0.55); /* Text */ --text-primary: #17153A; --text-secondary: #45426B; --text-muted: #8B87A8; --text-inverse: #FFFCF3; /* Primary Accent — riso cobalt ink */ --accent-primary: #2B3FE0; --accent-primary-light: #E4E7FD; --accent-primary-dark: #1E2DB0; /* Secondary Accents */ --accent-terracotta: #F0388B; --accent-terracotta-light: #FDE3F0; --accent-terracotta-dark: #C22370; --accent-sage: #00A25D; --accent-sage-light: #DFF5EA; --accent-navy: #2B3FE0; --accent-navy-light: #E4E7FD; --accent-navy-dark: #1E2DB0; --accent-amber: #F5A300; --accent-amber-light: #FEF0D2; --accent-plum: #7C3AED; --accent-slate: #5E5B80; /* Status Colors */ --status-success: #00A25D; --status-success-light: #DFF5EA; --status-warning: #F5A300; --status-warning-light: #FEF0D2; --status-error: #E23A2E; --status-error-light: #FBE2DF; --status-info: #2B3FE0; --status-info-light: #E4E7FD; /* Borders & Shadows — ink outlines, hard offset print shadows */ --border: #262350; --border-light: #E8E0CC; --border-focus: var(--accent-primary); --border-default: #262350; --border-subtle: #E8E0CC; --bg-muted: #F1E8D2; --bg-subtle: #F5EDDA; --text-subtle: #8B87A8; --shadow-sm: 2px 2px 0 rgba(23, 21, 58, 0.9); --shadow-md: 4px 4px 0 rgba(23, 21, 58, 0.9); --shadow-lg: 6px 6px 0 rgba(23, 21, 58, 0.9); --shadow-card: 3px 3px 0 rgba(23, 21, 58, 0.85); --shadow-card-hover: 5px 5px 0 rgba(23, 21, 58, 0.9); --shadow-float: 8px 8px 0 rgba(23, 21, 58, 0.9); --shadow-xl: 10px 10px 0 rgba(23, 21, 58, 0.9); /* App Icon Colors — spot-ink brights with pastel plates */ --app-color-user: #F5A300; --app-color-user-dark: #CC8800; --app-color-user-light: #FEF0D2; --app-color-client: #F0388B; --app-color-client-dark: #C22370; --app-color-client-light: #FDE3F0; --app-color-inventory: #2B3FE0; --app-color-inventory-dark: #1E2DB0; --app-color-inventory-light: #E4E7FD; --app-color-service: #7C3AED; --app-color-service-dark: #6229C4; --app-color-service-light: #F0E7FD; --app-color-location: #F06D28; --app-color-location-dark: #C85417; --app-color-location-light: #FDEAE0; --app-color-asset: #0E9BAA; --app-color-asset-dark: #0A7B87; --app-color-asset-light: #DFF3F5; --app-color-supplier: #4756D6; --app-color-supplier-dark: #3542B3; --app-color-supplier-light: #E8EAFB; --app-color-revenue: #00A25D; --app-color-revenue-dark: #00814A; --app-color-revenue-light: #DFF5EA; --app-color-purchase: #3FAE3F; --app-color-purchase-dark: #2F8C2F; --app-color-purchase-light: #E5F4E5; --app-color-expense: #E23A2E; --app-color-expense-dark: #BA2B21; --app-color-expense-light: #FBE2DF; --app-color-cash: #E0940B; --app-color-cash-dark: #B87807; --app-color-cash-light: #FBF0D9; --app-color-report: #0E86C4; --app-color-report-dark: #0A6A9C; --app-color-report-light: #DFEFF8; --app-color-admin: #5E5B80; --app-color-admin-dark: #484566; --app-color-admin-light: #ECEBF2; --app-color-job: #B87F0F; --app-color-job-dark: #93650A; --app-color-job-light: #F8EFDA; --app-color-payroll: #0F8F86; --app-color-payroll-dark: #0B716A; --app-color-payroll-light: #DFF2F1; --app-color-loan: #A16A15; --app-color-loan-dark: #80530F; --app-color-loan-light: #F5ECDC; --app-color-equity: #4438B8; --app-color-equity-dark: #342A94; --app-color-equity-light: #E7E5F7; --app-color-ledger: #0B7A47; --app-color-ledger-dark: #086038; --app-color-ledger-light: #DEF1E7; --app-color-home: #2B3FE0; --app-color-home-dark: #1E2DB0; --app-color-home-light: #E4E7FD; /* Theme Meta */ --theme-name: "Riso Pop"; --theme-icon-bg: linear-gradient(135deg, #FBF6EA 0%, #F0388B 100%); --theme-icon-accent: #2B3FE0; } /* * ========================================================================== * THEME: SALON BLUSH * Soft pink/mauve/rose palette with gentle warm shadows * Think: luxury spa, beauty salon, feminine elegance * ========================================================================== */ [data-theme="salon-blush"] { /* Backgrounds — soft pink-white warmth */ --bg-base: #FDF8F8; --bg-sidebar: #F9F1F2; --bg-card: #FFFFFF; --bg-hover: #F5ECED; --bg-input: #FFFFFF; --bg-overlay: rgba(72, 40, 48, 0.45); /* Text — warm rose-brown tones */ --text-primary: #3D2027; --text-secondary: #7A5D65; --text-muted: #A8929A; --text-inverse: #FFFFFF; /* Primary Accent — dusty rose */ --accent-primary: #C97B8B; --accent-primary-light: #FDF2F4; --accent-primary-dark: #A85E6E; /* Secondary Accents */ --accent-terracotta: #D4726A; --accent-terracotta-light: #FDF0EF; --accent-terracotta-dark: #B85A52; --accent-sage: #7BA88E; --accent-sage-light: #F0F6F2; --accent-navy: #6B7FA3; --accent-navy-light: #F0F3F8; --accent-navy-dark: #526488; --accent-amber: #CDA25A; --accent-amber-light: #FBF6EC; --accent-plum: #9B6B9E; --accent-slate: #8A7880; /* Status Colors */ --status-success: #7BA88E; --status-success-light: #F0F6F2; --status-warning: #CDA25A; --status-warning-light: #FBF6EC; --status-error: #D4726A; --status-error-light: #FDF0EF; --status-info: #6B7FA3; --status-info-light: #F0F3F8; /* Borders & Shadows — gentle, diffused warmth */ --border: #EADDE0; --border-light: #F2E8EB; --border-focus: var(--accent-primary); --border-default: #EADDE0; --border-subtle: #F2E8EB; --bg-muted: #F5ECED; --bg-subtle: #F9F1F2; --text-subtle: #A8929A; --shadow-sm: 0 1px 2px rgba(72, 40, 48, 0.04); --shadow-md: 0 4px 12px rgba(72, 40, 48, 0.06); --shadow-lg: 0 8px 24px rgba(72, 40, 48, 0.08); --shadow-card: 0 2px 8px rgba(72, 40, 48, 0.04), 0 1px 2px rgba(72, 40, 48, 0.05); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.07); --shadow-float: 0 12px 40px rgba(72, 40, 48, 0.12); --shadow-xl: 0 20px 50px rgba(72, 40, 48, 0.10); /* App Icon Colors — soft pastels with rose undertones */ --app-color-user: #CDA25A; --app-color-user-dark: #B38B45; --app-color-user-light: #FBF6EC; --app-color-client: #C97B8B; --app-color-client-dark: #A85E6E; --app-color-client-light: #FDF2F4; --app-color-inventory: #6B7FA3; --app-color-inventory-dark: #526488; --app-color-inventory-light: #F0F3F8; --app-color-service: #9B6B9E; --app-color-service-dark: #7E5280; --app-color-service-light: #F5EFF6; --app-color-location: #D4886A; --app-color-location-dark: #B87058; --app-color-location-light: #FDF2EF; --app-color-asset: #5E9BA3; --app-color-asset-dark: #48808A; --app-color-asset-light: #EDF5F6; --app-color-supplier: #7080A8; --app-color-supplier-dark: #586890; --app-color-supplier-light: #F0F2F8; --app-color-revenue: #7BA88E; --app-color-revenue-dark: #608C73; --app-color-revenue-light: #F0F6F2; --app-color-purchase: #68A070; --app-color-purchase-dark: #508558; --app-color-purchase-light: #EEF5EF; --app-color-expense: #C96A6A; --app-color-expense-dark: #A85252; --app-color-expense-light: #FBEEEE; --app-color-cash: #C9A55B; --app-color-cash-dark: #AB8D48; --app-color-cash-light: #FBF6EB; --app-color-report: #5E9B9B; --app-color-report-dark: #488080; --app-color-report-light: #EDF5F5; --app-color-admin: #8A7880; --app-color-admin-dark: #6E5E65; --app-color-admin-light: #F3EFF1; --app-color-job: #B88548; --app-color-job-dark: #9A6E38; --app-color-job-light: #F8F1E6; --app-color-payroll: #5E8DA3; --app-color-payroll-dark: #48738A; --app-color-payroll-light: #EDF3F6; --app-color-loan: #A8804A; --app-color-loan-dark: #8C6838; --app-color-loan-light: #F6F1E8; --app-color-equity: #6E68A0; --app-color-equity-dark: #565080; --app-color-equity-light: #F0EFF6; --app-color-ledger: #5A8068; --app-color-ledger-dark: #446850; --app-color-ledger-light: #EEF4F0; --app-color-home: #6878A8; --app-color-home-dark: #546090; --app-color-home-light: #F0F2F8; /* Theme Meta */ --theme-name: "Salon Blush"; --theme-icon-bg: linear-gradient(135deg, #FDF8F8 0%, #EADDE0 100%); --theme-icon-accent: #C97B8B; } /* * ========================================================================== * THEME: SHADCN NEUTRAL * Faithful port of the shadcn/ui default neutral theme * Clean monochrome palette — achromatic grays, zero chroma * Think: shadcn/ui components, Tailwind defaults, zinc-based UI * ========================================================================== */ [data-theme="shadcn-neutral"] { /* Backgrounds — pure white, subtle gray layers */ --bg-base: #FFFFFF; --bg-sidebar: #FAFAFA; --bg-card: #FFFFFF; --bg-hover: #F5F5F5; --bg-input: #FFFFFF; --bg-overlay: rgba(10, 10, 10, 0.5); /* Text — true neutral, no warm/cool undertone */ --text-primary: #0A0A0A; --text-secondary: #525252; --text-muted: #737373; --text-inverse: #FAFAFA; /* Primary Accent — near-black (shadcn convention: primary = dark) */ --accent-primary: #171717; --accent-primary-light: #F5F5F5; --accent-primary-dark: #0A0A0A; /* Secondary Accents — Tailwind standard color scale */ --accent-terracotta: #EF4444; --accent-terracotta-light: #FEF2F2; --accent-terracotta-dark: #DC2626; --accent-sage: #22C55E; --accent-sage-light: #F0FDF4; --accent-navy: #3B82F6; --accent-navy-light: #EFF6FF; --accent-navy-dark: #2563EB; --accent-amber: #EAB308; --accent-amber-light: #FEFCE8; --accent-plum: #8B5CF6; --accent-slate: #737373; /* Status Colors — standard Tailwind semantic colors */ --status-success: #22C55E; --status-success-light: #F0FDF4; --status-warning: #EAB308; --status-warning-light: #FEFCE8; --status-error: #EF4444; --status-error-light: #FEF2F2; --status-info: #3B82F6; --status-info-light: #EFF6FF; /* Borders & Shadows — clean, minimal depth */ --border: #E5E5E5; --border-light: #F5F5F5; --border-focus: var(--accent-primary); --border-default: #E5E5E5; --border-subtle: #F5F5F5; --bg-muted: #F5F5F5; --bg-subtle: #FAFAFA; --text-subtle: #737373; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.09); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15); /* App Icon Colors — standard Tailwind color scale */ --app-color-user: #EAB308; --app-color-user-dark: #CA8A04; --app-color-user-light: #FEFCE8; --app-color-client: #EF4444; --app-color-client-dark: #DC2626; --app-color-client-light: #FEF2F2; --app-color-inventory: #3B82F6; --app-color-inventory-dark: #2563EB; --app-color-inventory-light: #EFF6FF; --app-color-service: #8B5CF6; --app-color-service-dark: #7C3AED; --app-color-service-light: #F5F3FF; --app-color-location: #F97316; --app-color-location-dark: #EA580C; --app-color-location-light: #FFF7ED; --app-color-asset: #06B6D4; --app-color-asset-dark: #0891B2; --app-color-asset-light: #ECFEFF; --app-color-supplier: #6366F1; --app-color-supplier-dark: #4F46E5; --app-color-supplier-light: #EEF2FF; --app-color-revenue: #22C55E; --app-color-revenue-dark: #16A34A; --app-color-revenue-light: #F0FDF4; --app-color-purchase: #10B981; --app-color-purchase-dark: #059669; --app-color-purchase-light: #ECFDF5; --app-color-expense: #F43F5E; --app-color-expense-dark: #E11D48; --app-color-expense-light: #FFF1F2; --app-color-cash: #CA8A04; --app-color-cash-dark: #A87303; --app-color-cash-light: #FEFCE8; --app-color-report: #14B8A6; --app-color-report-dark: #0D9488; --app-color-report-light: #F0FDFA; --app-color-admin: #737373; --app-color-admin-dark: #525252; --app-color-admin-light: #F5F5F5; --app-color-job: #D97706; --app-color-job-dark: #B45309; --app-color-job-light: #FFFBEB; --app-color-payroll: #0E7490; --app-color-payroll-dark: #0C6580; --app-color-payroll-light: #ECFEFF; --app-color-loan: #92400E; --app-color-loan-dark: #78350F; --app-color-loan-light: #FFFBEB; --app-color-equity: #3730A3; --app-color-equity-dark: #312E81; --app-color-equity-light: #EEF2FF; --app-color-ledger: #166534; --app-color-ledger-dark: #14532D; --app-color-ledger-light: #F0FDF4; --app-color-home: #6366F1; --app-color-home-dark: #4F46E5; --app-color-home-light: #EEF2FF; /* Theme Meta */ --theme-name: "shadcn Neutral"; --theme-icon-bg: linear-gradient(135deg, #FFFFFF 0%, #E5E5E5 100%); --theme-icon-accent: #171717; } /* * ========================================================================== * THEME: SOFT CLAY * Earthy terracotta/sage/warm neutrals with minimal soft shadows * Think: pottery studio, organic products, modern premium * ========================================================================== */ [data-theme="soft-clay"] { /* Backgrounds — warm clay-white earth tones */ --bg-base: #FAF7F4; --bg-sidebar: #F3EDE7; --bg-card: #FFFFFF; --bg-hover: #EDE6DE; --bg-input: #FFFFFF; --bg-overlay: rgba(58, 42, 30, 0.45); /* Text — warm espresso tones */ --text-primary: #2E2118; --text-secondary: #6B5B4E; --text-muted: #9A8C80; --text-inverse: #FFFFFF; /* Primary Accent — warm terracotta */ --accent-primary: #B8704A; --accent-primary-light: #FAF0EA; --accent-primary-dark: #975838; /* Secondary Accents — earthy palette */ --accent-terracotta: #B8704A; --accent-terracotta-light: #FAF0EA; --accent-terracotta-dark: #975838; --accent-sage: #6B8E6B; --accent-sage-light: #F0F4F0; --accent-navy: #5A7080; --accent-navy-light: #EFF2F5; --accent-navy-dark: #445868; --accent-amber: #C49840; --accent-amber-light: #FBF4E6; --accent-plum: #886878; --accent-slate: #706058; /* Status Colors — desaturated earth tones */ --status-success: #6B8E6B; --status-success-light: #F0F4F0; --status-warning: #C49840; --status-warning-light: #FBF4E6; --status-error: #B85A4A; --status-error-light: #FAF0EE; --status-info: #5A7080; --status-info-light: #EFF2F5; /* Borders & Shadows — minimal, soft diffusion */ --border: #E4DACF; --border-light: #EDE6DE; --border-focus: var(--accent-primary); --border-default: #E4DACF; --border-subtle: #EDE6DE; --bg-muted: #EDE6DE; --bg-subtle: #F3EDE7; --text-subtle: #9A8C80; --shadow-sm: 0 1px 3px rgba(58, 42, 30, 0.03); --shadow-md: 0 4px 12px rgba(58, 42, 30, 0.05); --shadow-lg: 0 8px 24px rgba(58, 42, 30, 0.07); --shadow-card: 0 2px 8px rgba(58, 42, 30, 0.03), 0 1px 3px rgba(58, 42, 30, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-float: 0 12px 40px rgba(58, 42, 30, 0.10); --shadow-xl: 0 20px 50px rgba(58, 42, 30, 0.09); /* App Icon Colors — warm earthy tones throughout */ --app-color-user: #C49840; --app-color-user-dark: #A88030; --app-color-user-light: #FBF4E6; --app-color-client: #B8704A; --app-color-client-dark: #975838; --app-color-client-light: #FAF0EA; --app-color-inventory: #5A7080; --app-color-inventory-dark: #445868; --app-color-inventory-light: #EFF2F5; --app-color-service: #886878; --app-color-service-dark: #6E5060; --app-color-service-light: #F4EFF2; --app-color-location: #C07850; --app-color-location-dark: #A06040; --app-color-location-light: #FAF0EA; --app-color-asset: #508878; --app-color-asset-dark: #3C6E60; --app-color-asset-light: #EDF4F2; --app-color-supplier: #5A6880; --app-color-supplier-dark: #445068; --app-color-supplier-light: #EFF1F5; --app-color-revenue: #6B8E6B; --app-color-revenue-dark: #547254; --app-color-revenue-light: #F0F4F0; --app-color-purchase: #5A8058; --app-color-purchase-dark: #446844; --app-color-purchase-light: #EEF3EE; --app-color-expense: #B85A4A; --app-color-expense-dark: #984438; --app-color-expense-light: #FAEDEA; --app-color-cash: #C49840; --app-color-cash-dark: #A88030; --app-color-cash-light: #FBF4E6; --app-color-report: #508888; --app-color-report-dark: #3C6E6E; --app-color-report-light: #EDF4F4; --app-color-admin: #706058; --app-color-admin-dark: #584840; --app-color-admin-light: #F2EEEB; --app-color-job: #A07838; --app-color-job-dark: #886028; --app-color-job-light: #F6EFE2; --app-color-payroll: #507880; --app-color-payroll-dark: #3C6068; --app-color-payroll-light: #EDF2F4; --app-color-loan: #907040; --app-color-loan-dark: #785830; --app-color-loan-light: #F4EDE2; --app-color-equity: #585488; --app-color-equity-dark: #403C6E; --app-color-equity-light: #EEEDF4; --app-color-ledger: #4A7858; --app-color-ledger-dark: #386044; --app-color-ledger-light: #EDF2EE; --app-color-home: #5A6080; --app-color-home-dark: #444A68; --app-color-home-light: #EEEEF4; /* Theme Meta */ --theme-name: "Soft Clay"; --theme-icon-bg: linear-gradient(135deg, #FAF7F4 0%, #E4DACF 100%); --theme-icon-accent: #B8704A; } /* * ========================================================================== * THEME: SUNSET GLOW * Warm, vibrant orange and coral tones * ========================================================================== */ [data-theme="sunset-glow"] { /* Backgrounds */ --bg-base: #1A1615; --bg-sidebar: #231E1C; --bg-card: #2D2624; --bg-hover: #3A312E; --bg-input: #2D2624; --bg-overlay: rgba(26, 22, 21, 0.8); /* Text */ --text-primary: #FFF5F0; --text-secondary: #C9B8B0; --text-muted: #8A7A72; --text-inverse: #1A1615; /* Primary Accent */ --accent-primary: #FF6B35; --accent-primary-light: rgba(255, 107, 53, 0.15); --accent-primary-dark: #E85A25; /* Secondary Accents */ --accent-terracotta: #FF6B35; --accent-terracotta-light: rgba(255, 107, 53, 0.15); --accent-terracotta-dark: #E85A25; --accent-sage: #70C1B3; --accent-sage-light: rgba(112, 193, 179, 0.15); --accent-navy: #247BA0; --accent-navy-light: rgba(36, 123, 160, 0.15); --accent-navy-dark: #1D6585; --accent-amber: #FFE066; --accent-amber-light: rgba(255, 224, 102, 0.15); --accent-plum: #F25F5C; --accent-slate: #C9B8B0; /* Status Colors */ --status-success: #70C1B3; --status-success-light: rgba(112, 193, 179, 0.15); --status-warning: #FFE066; --status-warning-light: rgba(255, 224, 102, 0.15); --status-error: #F25F5C; --status-error-light: rgba(242, 95, 92, 0.15); --status-info: #247BA0; --status-info-light: rgba(36, 123, 160, 0.15); /* Borders & Shadows */ --border: #3D3432; --border-light: #4A3F3C; --border-focus: var(--accent-primary); --border-default: #3D3432; --border-subtle: #4A3F3C; --bg-muted: #3A312E; --bg-subtle: #231E1C; --text-subtle: #8A7A72; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); /* App Icon Colors — warm fiery tones, rgba light variants */ --app-color-user: #FFE066; --app-color-user-dark: #EAC840; --app-color-user-light: rgba(255, 224, 102, 0.15); --app-color-client: #FF6B35; --app-color-client-dark: #E85A25; --app-color-client-light: rgba(255, 107, 53, 0.15); --app-color-inventory: #247BA0; --app-color-inventory-dark: #1D6585; --app-color-inventory-light: rgba(36, 123, 160, 0.15); --app-color-service: #F25F5C; --app-color-service-dark: #D8504D; --app-color-service-light: rgba(242, 95, 92, 0.15); --app-color-location: #FF8C42; --app-color-location-dark: #E87830; --app-color-location-light: rgba(255, 140, 66, 0.15); --app-color-asset: #4ECDC4; --app-color-asset-dark: #38B5AD; --app-color-asset-light: rgba(78, 205, 196, 0.15); --app-color-supplier: #6B8EE0; --app-color-supplier-dark: #5578C8; --app-color-supplier-light: rgba(107, 142, 224, 0.15); --app-color-revenue: #70C1B3; --app-color-revenue-dark: #58A99B; --app-color-revenue-light: rgba(112, 193, 179, 0.15); --app-color-purchase: #45B880; --app-color-purchase-dark: #35A068; --app-color-purchase-light: rgba(69, 184, 128, 0.15); --app-color-expense: #FF5252; --app-color-expense-dark: #E84040; --app-color-expense-light: rgba(255, 82, 82, 0.15); --app-color-cash: #D4A574; --app-color-cash-dark: #B88A5C; --app-color-cash-light: rgba(212, 165, 116, 0.15); --app-color-report: #00B8D4; --app-color-report-dark: #009DB3; --app-color-report-light: rgba(0, 184, 212, 0.15); --app-color-admin: #C9B8B0; --app-color-admin-dark: #A89890; --app-color-admin-light: rgba(201, 184, 176, 0.15); --app-color-job: #C87A45; --app-color-job-dark: #A86430; --app-color-job-light: rgba(200, 122, 69, 0.15); --app-color-payroll: #22D3EE; --app-color-payroll-dark: #06B6D4; --app-color-payroll-light: rgba(34, 211, 238, 0.15); --app-color-loan: #FBBF24; --app-color-loan-dark: #D9A51E; --app-color-loan-light: rgba(251, 191, 36, 0.15); --app-color-equity: #818CF8; --app-color-equity-dark: #6366F1; --app-color-equity-light: rgba(129, 140, 248, 0.15); --app-color-ledger: #4ADE80; --app-color-ledger-dark: #22C55E; --app-color-ledger-light: rgba(74, 222, 128, 0.15); --app-color-home: #6B8EE0; --app-color-home-dark: #5578C8; --app-color-home-light: rgba(107, 142, 224, 0.15); /* Theme Meta */ --theme-name: "Sunset Glow"; --theme-icon-bg: linear-gradient(135deg, #FF6B35 0%, #F25F5C 100%); --theme-icon-accent: #FFE066; } /* * ========================================================================== * THEME: TERMINAL PHOSPHOR * True-black CRT with P1 phosphor green — shadows are glows, not drops * Think: green-screen terminals, server rooms, machine rooms at 3am * ========================================================================== */ [data-theme="terminal-phosphor"] { /* Backgrounds */ --bg-base: #050A06; --bg-sidebar: #081108; --bg-card: #0B150C; --bg-hover: #122112; --bg-input: #0B150C; --bg-overlay: rgba(2, 5, 3, 0.85); /* Text */ --text-primary: #BFF5C8; --text-secondary: #6FBF7E; --text-muted: #4A8455; --text-inverse: #050A06; /* Primary Accent — phosphor green */ --accent-primary: #34E86B; --accent-primary-light: rgba(52, 232, 107, 0.12); --accent-primary-dark: #22C455; /* Secondary Accents */ --accent-terracotta: #FF5540; --accent-terracotta-light: rgba(255, 85, 64, 0.14); --accent-terracotta-dark: #E03E2B; --accent-sage: #58D08A; --accent-sage-light: rgba(88, 208, 138, 0.13); --accent-navy: #35BBD4; --accent-navy-light: rgba(53, 187, 212, 0.13); --accent-navy-dark: #22A0B8; --accent-amber: #FFB627; --accent-amber-light: rgba(255, 182, 39, 0.13); --accent-plum: #9B6BE8; --accent-slate: #5E7A64; /* Status Colors */ --status-success: #34E86B; --status-success-light: rgba(52, 232, 107, 0.12); --status-warning: #FFB627; --status-warning-light: rgba(255, 182, 39, 0.13); --status-error: #FF5540; --status-error-light: rgba(255, 85, 64, 0.14); --status-info: #35BBD4; --status-info-light: rgba(53, 187, 212, 0.13); /* Borders & Shadows — phosphor glow instead of drop shadow */ --border: #163A1D; --border-light: #1E4A26; --border-focus: var(--accent-primary); --border-default: #163A1D; --border-subtle: #1E4A26; --bg-muted: #122112; --bg-subtle: #081108; --text-subtle: #4A8455; --shadow-sm: 0 0 6px rgba(52, 232, 107, 0.10); --shadow-md: 0 0 14px rgba(52, 232, 107, 0.14); --shadow-lg: 0 0 24px rgba(52, 232, 107, 0.16); --shadow-card: 0 0 10px rgba(52, 232, 107, 0.10); --shadow-card-hover: 0 0 16px rgba(52, 232, 107, 0.18); --shadow-float: 0 0 32px rgba(52, 232, 107, 0.20); --shadow-xl: 0 0 44px rgba(52, 232, 107, 0.22); /* App Icon Colors — phosphor set: greens, cyans, ambers, alert reds */ --app-color-user: #FFB627; --app-color-user-dark: #E09D15; --app-color-user-light: rgba(255, 182, 39, 0.13); --app-color-client: #FF5540; --app-color-client-dark: #E03E2B; --app-color-client-light: rgba(255, 85, 64, 0.14); --app-color-inventory: #35BBD4; --app-color-inventory-dark: #22A0B8; --app-color-inventory-light: rgba(53, 187, 212, 0.13); --app-color-service: #9B6BE8; --app-color-service-dark: #8052CC; --app-color-service-light: rgba(155, 107, 232, 0.13); --app-color-location: #FF8A3D; --app-color-location-dark: #E07128; --app-color-location-light: rgba(255, 138, 61, 0.13); --app-color-asset: #2FD6C3; --app-color-asset-dark: #1DB8A6; --app-color-asset-light: rgba(47, 214, 195, 0.13); --app-color-supplier: #64A8E8; --app-color-supplier-dark: #4B8CCC; --app-color-supplier-light: rgba(100, 168, 232, 0.13); --app-color-revenue: #34E86B; --app-color-revenue-dark: #22C455; --app-color-revenue-light: rgba(52, 232, 107, 0.12); --app-color-purchase: #8FE83A; --app-color-purchase-dark: #74C427; --app-color-purchase-light: rgba(143, 232, 58, 0.12); --app-color-expense: #FF6B6B; --app-color-expense-dark: #E05252; --app-color-expense-light: rgba(255, 107, 107, 0.13); --app-color-cash: #E8D23A; --app-color-cash-dark: #C4B027; --app-color-cash-light: rgba(232, 210, 58, 0.12); --app-color-report: #3AE8D2; --app-color-report-dark: #27C4B0; --app-color-report-light: rgba(58, 232, 210, 0.12); --app-color-admin: #5E7A64; --app-color-admin-dark: #49604E; --app-color-admin-light: rgba(94, 122, 100, 0.14); --app-color-job: #D0A83A; --app-color-job-dark: #B08C27; --app-color-job-light: rgba(208, 168, 58, 0.13); --app-color-payroll: #58D0D0; --app-color-payroll-dark: #3FB4B4; --app-color-payroll-light: rgba(88, 208, 208, 0.13); --app-color-loan: #E8B93A; --app-color-loan-dark: #C49D27; --app-color-loan-light: rgba(232, 185, 58, 0.13); --app-color-equity: #7BA8F0; --app-color-equity-dark: #5E8CD6; --app-color-equity-light: rgba(123, 168, 240, 0.13); --app-color-ledger: #58E89B; --app-color-ledger-dark: #3FC480; --app-color-ledger-light: rgba(88, 232, 155, 0.12); --app-color-home: #34E86B; --app-color-home-dark: #22C455; --app-color-home-light: rgba(52, 232, 107, 0.12); /* Theme Meta */ --theme-name: "Terminal Phosphor"; --theme-icon-bg: linear-gradient(135deg, #0B150C 0%, #050A06 100%); --theme-icon-accent: #34E86B; } /* * ========================================================================== * THEME: ULTRAMARINE * Klein-blue duotone — one color, total commitment; blue-white paper, * ultramarine ink, blue-tinted shadows. Alarm red is the only outsider. * Think: Yves Klein, silkscreen monochromes, international style posters * ========================================================================== */ [data-theme="ultramarine"] { /* Backgrounds */ --bg-base: #F4F6FF; --bg-sidebar: #E9EDFE; --bg-card: #FFFFFF; --bg-hover: #E1E7FD; --bg-input: #FFFFFF; --bg-overlay: rgba(15, 32, 150, 0.5); /* Text */ --text-primary: #101A66; --text-secondary: #3D4AA0; --text-muted: #8792CC; --text-inverse: #FFFFFF; /* Primary Accent — Klein ultramarine */ --accent-primary: #1433C7; --accent-primary-light: #E5E9FC; --accent-primary-dark: #0C22A0; /* Secondary Accents */ --accent-terracotta: #E8442B; --accent-terracotta-light: #FCE6E1; --accent-terracotta-dark: #C33118; --accent-sage: #1F9D61; --accent-sage-light: #E2F4EA; --accent-navy: #1433C7; --accent-navy-light: #E5E9FC; --accent-navy-dark: #0C22A0; --accent-amber: #E8A20C; --accent-amber-light: #FBF0D7; --accent-plum: #5A2FD0; --accent-slate: #5F6AA8; /* Status Colors */ --status-success: #1F9D61; --status-success-light: #E2F4EA; --status-warning: #E8A20C; --status-warning-light: #FBF0D7; --status-error: #E8442B; --status-error-light: #FCE6E1; --status-info: #1433C7; --status-info-light: #E5E9FC; /* Borders & Shadows — blue-cast lines and lift */ --border: #CBD4F4; --border-light: #DEE4FA; --border-focus: var(--accent-primary); --border-default: #CBD4F4; --border-subtle: #DEE4FA; --bg-muted: #E1E7FD; --bg-subtle: #E9EDFE; --text-subtle: #8792CC; --shadow-sm: 0 1px 2px rgba(20, 51, 199, 0.06); --shadow-md: 0 4px 12px rgba(20, 51, 199, 0.10); --shadow-lg: 0 8px 24px rgba(20, 51, 199, 0.13); --shadow-card: 0 1px 4px rgba(20, 51, 199, 0.08), 0 1px 2px rgba(20, 51, 199, 0.05); --shadow-card-hover: 0 3px 10px rgba(20, 51, 199, 0.14); --shadow-float: 0 12px 40px rgba(20, 51, 199, 0.18); --shadow-xl: 0 20px 50px rgba(20, 51, 199, 0.17); /* App Icon Colors — a ramp of blues; money keeps semantic hues */ --app-color-user: #4C63E8; --app-color-user-dark: #3549C7; --app-color-user-light: #E9EDFD; --app-color-client: #1433C7; --app-color-client-dark: #0C22A0; --app-color-client-light: #E5E9FC; --app-color-inventory: #2377D6; --app-color-inventory-dark: #175EB3; --app-color-inventory-light: #E5F0FB; --app-color-service: #5A2FD0; --app-color-service-dark: #4620AD; --app-color-service-light: #EBE6FA; --app-color-location: #0C64A8; --app-color-location-dark: #084D85; --app-color-location-light: #E2EFF7; --app-color-asset: #1289B4; --app-color-asset-dark: #0C6C91; --app-color-asset-light: #E3F2F8; --app-color-supplier: #3D4AA0; --app-color-supplier-dark: #2D3781; --app-color-supplier-light: #E8EAF4; --app-color-revenue: #1F9D61; --app-color-revenue-dark: #157D4B; --app-color-revenue-light: #E2F4EA; --app-color-purchase: #12867A; --app-color-purchase-dark: #0C6A60; --app-color-purchase-light: #E2F2F1; --app-color-expense: #E8442B; --app-color-expense-dark: #C33118; --app-color-expense-light: #FCE6E1; --app-color-cash: #E8A20C; --app-color-cash-dark: #C28608; --app-color-cash-light: #FBF0D7; --app-color-report: #0891B2; --app-color-report-dark: #067490; --app-color-report-light: #E1F3F7; --app-color-admin: #5F6AA8; --app-color-admin-dark: #495389; --app-color-admin-light: #ECEEF5; --app-color-job: #2352C7; --app-color-job-dark: #1840A3; --app-color-job-light: #E6EBFA; --app-color-payroll: #1273C4; --app-color-payroll-dark: #0D5BA0; --app-color-payroll-light: #E3EFF9; --app-color-loan: #8A6D15; --app-color-loan-dark: #6E570F; --app-color-loan-light: #F4EFDC; --app-color-equity: #3A2F9E; --app-color-equity-dark: #2B2280; --app-color-equity-light: #E8E6F5; --app-color-ledger: #146B8A; --app-color-ledger-dark: #0E546D; --app-color-ledger-light: #E3EFF4; --app-color-home: #1433C7; --app-color-home-dark: #0C22A0; --app-color-home-light: #E5E9FC; /* Theme Meta */ --theme-name: "Ultramarine"; --theme-icon-bg: linear-gradient(135deg, #F4F6FF 0%, #1433C7 100%); --theme-icon-accent: #1433C7; } /* * ========================================================================== * THEME: VELVET NOIR * Wine-black velvet with dusty rose and champagne — plush, low-lit luxury * Think: cocktail lounges, jewel boxes, opera intermissions * ========================================================================== */ [data-theme="velvet-noir"] { /* Backgrounds */ --bg-base: #1A0C12; --bg-sidebar: #211016; --bg-card: #281419; --bg-hover: #331A21; --bg-input: #281419; --bg-overlay: rgba(10, 4, 7, 0.8); /* Text */ --text-primary: #F2E4E4; --text-secondary: #C09FA6; --text-muted: #8A6B72; --text-inverse: #1A0C12; /* Primary Accent — dusty rose */ --accent-primary: #DB8598; --accent-primary-light: rgba(219, 133, 152, 0.14); --accent-primary-dark: #C46A80; /* Secondary Accents */ --accent-terracotta: #D96C57; --accent-terracotta-light: rgba(217, 108, 87, 0.15); --accent-terracotta-dark: #B85543; --accent-sage: #7FAE8B; --accent-sage-light: rgba(127, 174, 139, 0.14); --accent-navy: #7A88C2; --accent-navy-light: rgba(122, 136, 194, 0.14); --accent-navy-dark: #6371AB; --accent-amber: #D9B36A; --accent-amber-light: rgba(217, 179, 106, 0.14); --accent-plum: #B37FC6; --accent-slate: #997F86; /* Status Colors */ --status-success: #7FAE8B; --status-success-light: rgba(127, 174, 139, 0.14); --status-warning: #D9B36A; --status-warning-light: rgba(217, 179, 106, 0.14); --status-error: #D96C57; --status-error-light: rgba(217, 108, 87, 0.15); --status-info: #7A88C2; --status-info-light: rgba(122, 136, 194, 0.14); /* Borders & Shadows — velvet folds, deep pooled dark */ --border: #3D2029; --border-light: #4A2A34; --border-focus: var(--accent-primary); --border-default: #3D2029; --border-subtle: #4A2A34; --bg-muted: #331A21; --bg-subtle: #211016; --text-subtle: #8A6B72; --shadow-sm: 0 2px 4px rgba(8, 2, 5, 0.4); --shadow-md: 0 6px 16px rgba(8, 2, 5, 0.45); --shadow-lg: 0 10px 28px rgba(8, 2, 5, 0.5); --shadow-card: 0 3px 10px rgba(8, 2, 5, 0.4); --shadow-card-hover: 0 5px 14px rgba(8, 2, 5, 0.5); --shadow-float: 0 16px 44px rgba(8, 2, 5, 0.6); --shadow-xl: 0 24px 56px rgba(8, 2, 5, 0.65); /* App Icon Colors — jewel-box tones, rgba light variants */ --app-color-user: #D9B36A; --app-color-user-dark: #BD9752; --app-color-user-light: rgba(217, 179, 106, 0.14); --app-color-client: #DB8598; --app-color-client-dark: #C46A80; --app-color-client-light: rgba(219, 133, 152, 0.14); --app-color-inventory: #7A88C2; --app-color-inventory-dark: #6371AB; --app-color-inventory-light: rgba(122, 136, 194, 0.14); --app-color-service: #B37FC6; --app-color-service-dark: #9966AC; --app-color-service-light: rgba(179, 127, 198, 0.14); --app-color-location: #D98D5F; --app-color-location-dark: #BD744A; --app-color-location-light: rgba(217, 141, 95, 0.14); --app-color-asset: #6FAEA8; --app-color-asset-dark: #58928C; --app-color-asset-light: rgba(111, 174, 168, 0.14); --app-color-supplier: #9297C9; --app-color-supplier-dark: #797EB1; --app-color-supplier-light: rgba(146, 151, 201, 0.14); --app-color-revenue: #7FAE8B; --app-color-revenue-dark: #689273; --app-color-revenue-light: rgba(127, 174, 139, 0.14); --app-color-purchase: #96B87C; --app-color-purchase-dark: #7C9C64; --app-color-purchase-light: rgba(150, 184, 124, 0.14); --app-color-expense: #D96C57; --app-color-expense-dark: #B85543; --app-color-expense-light: rgba(217, 108, 87, 0.15); --app-color-cash: #D9A84E; --app-color-cash-dark: #BD8E3B; --app-color-cash-light: rgba(217, 168, 78, 0.14); --app-color-report: #74A3B8; --app-color-report-dark: #5D889C; --app-color-report-light: rgba(116, 163, 184, 0.14); --app-color-admin: #997F86; --app-color-admin-dark: #7E666D; --app-color-admin-light: rgba(153, 127, 134, 0.14); --app-color-job: #C29A56; --app-color-job-dark: #A68043; --app-color-job-light: rgba(194, 154, 86, 0.14); --app-color-payroll: #6BA8A0; --app-color-payroll-dark: #548C85; --app-color-payroll-light: rgba(107, 168, 160, 0.14); --app-color-loan: #BA9A62; --app-color-loan-dark: #9E804D; --app-color-loan-light: rgba(186, 154, 98, 0.14); --app-color-equity: #8D82C9; --app-color-equity-dark: #746AB1; --app-color-equity-light: rgba(141, 130, 201, 0.14); --app-color-ledger: #82B394; --app-color-ledger-dark: #6A977B; --app-color-ledger-light: rgba(130, 179, 148, 0.14); --app-color-home: #DB8598; --app-color-home-dark: #C46A80; --app-color-home-light: rgba(219, 133, 152, 0.14); /* Theme Meta */ --theme-name: "Velvet Noir"; --theme-icon-bg: linear-gradient(135deg, #281419 0%, #1A0C12 100%); --theme-icon-accent: #DB8598; } /* * ========================================================================== * THEME: WARM CREAM (Default) * A sophisticated, warm palette with terracotta accents * ========================================================================== */ [data-theme="warm-cream"] { /* Backgrounds */ --bg-base: #FAF8F5; --bg-sidebar: #F5F2ED; --bg-card: #FFFFFF; --bg-hover: #F0EDE7; --bg-input: #FFFFFF; --bg-overlay: rgba(44, 40, 37, 0.5); /* Text */ --text-primary: #2C2825; --text-secondary: #6B6560; --text-muted: #9C9690; --text-inverse: #FFFFFF; /* Primary Accent */ --accent-primary: #C4654A; --accent-primary-light: #FDF3F0; --accent-primary-dark: #A3513A; /* Secondary Accents */ --accent-terracotta: #C4654A; --accent-terracotta-light: #FDF3F0; --accent-terracotta-dark: #A3513A; --accent-sage: #7A9E7A; --accent-sage-light: #F0F5F0; --accent-navy: #3D5A73; --accent-navy-light: #EEF2F5; --accent-navy-dark: #2D4558; --accent-amber: #D4A84B; --accent-amber-light: #FDF8ED; --accent-plum: #8B6B8E; --accent-slate: #5C6B73; /* Status Colors */ --status-success: #7A9E7A; --status-success-light: #F0F5F0; --status-warning: #D4A84B; --status-warning-light: #FDF8ED; --status-error: #C4654A; --status-error-light: #FDF3F0; --status-info: #3D5A73; --status-info-light: #EEF2F5; /* Borders & Shadows */ --border: #E8E4DE; --border-light: #F0ECE6; --border-focus: var(--accent-primary); --border-default: #E8E4DE; --border-subtle: #F0ECE6; --bg-muted: #F0EDE7; --bg-subtle: #F5F2ED; --text-subtle: #9C9690; --shadow-sm: 0 1px 2px rgba(44, 40, 37, 0.04); --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.06); --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.08); --shadow-card: 0 2px 8px rgba(44, 40, 37, 0.04), 0 1px 2px rgba(44, 40, 37, 0.06); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-float: 0 12px 40px rgba(44, 40, 37, 0.15); --shadow-xl: 0 20px 50px rgba(44, 40, 37, 0.12); /* App Icon Colors — per-app hues for sidebar switcher Each app gets base, dark (gradient end), light (inactive bg). 12 hues spread ~30° across the color wheel for distinguishability. */ --app-color-user: #D4A84B; --app-color-user-dark: #B8922F; --app-color-user-light: #FDF8ED; --app-color-client: #C4654A; --app-color-client-dark: #A3513A; --app-color-client-light: #FDF3F0; --app-color-inventory: #3D5A73; --app-color-inventory-dark: #2D4558; --app-color-inventory-light: #EEF2F5; --app-color-service: #7C6BC4; --app-color-service-dark: #5A4FA0; --app-color-service-light: #F3F0FA; --app-color-location: #E07C5A; --app-color-location-dark: #C4613F; --app-color-location-light: #FDF2ED; --app-color-asset: #4A8B96; --app-color-asset-dark: #367078; --app-color-asset-light: #EDF5F7; --app-color-supplier: #5A74A8; --app-color-supplier-dark: #445A88; --app-color-supplier-light: #EFF2F8; --app-color-revenue: #7A9E7A; --app-color-revenue-dark: #5F7F5F; --app-color-revenue-light: #F0F5F0; --app-color-purchase: #5B8C5A; --app-color-purchase-dark: #467345; --app-color-purchase-light: #EFF5EE; --app-color-expense: #C45A5A; --app-color-expense-dark: #A04040; --app-color-expense-light: #FBEEEE; --app-color-cash: #C9A75B; --app-color-cash-dark: #AB8D48; --app-color-cash-light: #FBF6EB; --app-color-report: #4A9B9B; --app-color-report-dark: #3A7B7B; --app-color-report-light: #EDF6F6; --app-color-admin: #6B7C8D; --app-color-admin-dark: #4E5D6B; --app-color-admin-light: #F0F2F5; --app-color-job: #B08040; --app-color-job-dark: #946830; --app-color-job-light: #F8F2E8; --app-color-payroll: #4A8896; --app-color-payroll-dark: #367078; --app-color-payroll-light: #EDF4F6; --app-color-loan: #A87840; --app-color-loan-dark: #8C6030; --app-color-loan-light: #F8F3E8; --app-color-equity: #5C5898; --app-color-equity-dark: #464278; --app-color-equity-light: #F0EFF7; --app-color-ledger: #527060; --app-color-ledger-dark: #3E5848; --app-color-ledger-light: #EFF4F1; --app-color-home: #5A5898; --app-color-home-dark: #464278; --app-color-home-light: #F0EFF7; /* Theme Meta */ --theme-name: "Warm Cream"; --theme-icon-bg: linear-gradient(135deg, #FAF8F5 0%, #E8E4DE 100%); --theme-icon-accent: #C4654A; } /* * ========================================================================== * MAIN-BASE.CSS - Core Base Styles (Density, Reset, Typography) * ========================================================================== * This file contains: * - Density control via root font-size * - Core typography & resets * - Scrollbar & selection styles * * THEME COLORS are NOT included here - they come from themes/*.css * * All dimensions in component styles use rem units, so they scale with: * :root { font-size: 16px; } /* Default - 100% */ * :root { font-size: 14.4px; } /* Compact - 90% */ * :root { font-size: 12.8px; } /* Dense - 80% */ * ========================================================================== */ /* ========================================================================== DENSITY CONTROL ========================================================================== Control the overall UI density by adjusting the root font-size. All rem-based dimensions in component styles will scale accordingly. Usage: Add data-density attribute to or Example: ========================================================================== */ /* Default density (100%) */ :root, html, [data-density="default"] { font-size: 16px; } /* Compact density (90%) - tighter spacing, smaller elements */ [data-density="compact"] { font-size: 14.4px; } /* Dense density (80%) - maximum information density */ [data-density="dense"] { font-size: 12.8px; } /* Comfortable density (110%) - more spacious, easier to read */ [data-density="comfortable"] { font-size: 17.6px; } /* ========================================================================== TYPE SCALE ========================================================================== Font-size tokens used across all components and domain packages. All values in rem so they scale with data-density. Domain packages MUST use these tokens instead of hardcoded rem/px font sizes. Pyeza component CSS (typography.css, form.css, etc.) references these. 19-step scale: dense small end (UI metadata), graduated large end (headings). ========================================================================== */ :root { /* UI metadata text */ --text-2xs: 0.6875rem; /* 11px — micro labels, superscripts */ --text-xs: 0.75rem; /* 12px — badge text, uppercase category headers */ --text-sm: 0.8125rem; /* 13px — secondary text, table cells, descriptions */ --text-md: 0.875rem; /* 14px — form labels, helper text */ --text-base: 0.9375rem; /* 15px — body text, list items */ /* Component headings */ --text-lg: 1.0625rem; /* 17px — section labels, overline text */ --text-xl: 1.125rem; /* 18px — card titles, dialog titles, panel headings */ --text-2xl: 1.25rem; /* 20px — page subtitles, sheet titles */ --text-3xl: 1.375rem; /* 22px — empty-state titles, report titles */ /* Page-level headings */ --text-4xl: 1.5rem; /* 24px — H3 section headers */ --text-5xl: 1.75rem; /* 28px — H2 page titles, prominent headings */ --text-6xl: 1.875rem; /* 30px — H2 alternate, large section headers */ --text-7xl: 2rem; /* 32px — stat values, login/signup titles */ --text-8xl: 2.25rem; /* 36px — H1 hero headers */ --text-9xl: 3rem; /* 48px — display text */ /* Mono font family — for numeric displays, code, masked values */ --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Font weight — three semantic tiers */ --font-weight-medium: 500; /* body emphasis, field values */ --font-weight-semibold: 600; /* section titles, labels, buttons, card headers */ --font-weight-bold: 700; /* major totals, hero amounts, stat values */ /* Letter spacing (tracking) */ --tracking-normal: 0.05em; /* standard uppercase metadata labels */ --tracking-wide: 0.06em; /* financial statement section headers */ /* Line height (leading) */ --leading-none: 1; /* badge text, single-line items */ --leading-tight: 1.3; /* compact card content, data cells */ --leading-normal: 1.5; /* body descriptions, form labels */ --leading-relaxed: 1.6; /* notes, prose blocks, journal entries */ } /* ========================================================================== FONT VARIATIONS ========================================================================== Font family variations controlled via data-font attribute. Default: Figtree body + Playfair Display headings ========================================================================== */ /* Default: Figtree body + Playfair Display headings */ [data-font="default"], :root { --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, serif; } /* Serif (Playfair Display) */ [data-font="serif"] { --font-body: 'Playfair Display', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; } /* Monospace (JetBrains Mono) */ [data-font="mono"] { --font-body: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --font-display: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; } /* Rounded (Nunito) */ [data-font="rounded"] { --font-body: 'Nunito', 'Quicksand', sans-serif; --font-display: 'Nunito', 'Quicksand', sans-serif; } /* Condensed (Barlow Condensed) */ [data-font="condensed"] { --font-body: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; } /* Exa (Bricolage Grotesque headings + Figtree body) */ [data-font="exa"] { --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', 'Figtree', sans-serif; } /* Ichizen Minimal (Bricolage Grotesque everywhere — quirky, geometric, editorial) */ [data-font="ichizen-minimal"] { --font-body: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ========================================================================== BASE RESET & TYPOGRAPHY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-slow), color var(--transition-slow); } /* ========================================================================== SELECTION STYLES ========================================================================== */ ::selection { background: var(--accent-primary); color: var(--text-inverse); } /* ========================================================================== SCROLLBAR STYLES ========================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-base); } /* Default font from configuration: ichizen-default */ :root { data-font: "ichizen-default"; }