/* * ========================================================================== * 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: 15 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: 0; --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; --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; /* Theme Meta */ --theme-name: "Corporate Steel"; --theme-icon-bg: linear-gradient(135deg, #F4F6F9 0%, #D5DBE4 100%); --theme-icon-accent: #2E5C8A; } /* * ========================================================================== * 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; --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; /* 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; --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); /* 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; --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; /* Theme Meta */ --theme-name: "Ichizen Default"; --theme-icon-bg: linear-gradient(135deg, #FAFAFD 0%, #E2DFF0 100%); --theme-icon-accent: #3D0DDA; } /* * ========================================================================== * 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; --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; /* Theme Meta */ --theme-name: "Ledger Mono"; --theme-icon-bg: linear-gradient(135deg, #F2F3F5 0%, #CBCED4 100%); --theme-icon-accent: #2C3544; } /* * ========================================================================== * 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; --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; /* 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; --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; /* 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; --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); /* 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; --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; /* 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; --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; /* Theme Meta */ --theme-name: "Peach Fizz"; --theme-icon-bg: linear-gradient(135deg, #FEF8F4 0%, #F6EBE3 100%); --theme-icon-accent: #E87461; } /* * ========================================================================== * 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; --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; /* 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; --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; /* 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; --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; /* 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; --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); /* Theme Meta */ --theme-name: "Sunset Glow"; --theme-icon-bg: linear-gradient(135deg, #FF6B35 0%, #F25F5C 100%); --theme-icon-accent: #FFE066; } /* * ========================================================================== * 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; --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; /* 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"; }