/* * ========================================================================== * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * ========================================================================== * This file is generated at build time by ui.CopyStylesWithTheme() * Default theme: corporate-steel | Font: ryta-minimal | All themes: 11 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/ui/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 everything */ [data-radius="full"] { --radius-sm: 9999px; --radius-md: 9999px; --radius-lg: 9999px; --radius-xl: 9999px; } /* 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; } /* None: borderless (shadow-driven depth) */ [data-border="none"] { --border-width: 0; --border-width-thick: 1px; --border-width-focus: 2px; } /* Heavy: more defined edges */ [data-border="heavy"] { --border-width: 2px; --border-width-thick: 3px; --border-width-focus: 3px; } /* ========================================================================== 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); /* Z-index layers */ --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-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-users: #B89830; --app-color-users-dark: #9A7E22; --app-color-users-light: #F7F3E5; --app-color-clients: #B8503C; --app-color-clients-dark: #943D2C; --app-color-clients-light: #F8EAE7; --app-color-inventory: #2E5C8A; --app-color-inventory-dark: #1E4470; --app-color-inventory-light: #EDF3F9; --app-color-services: #6B5BA8; --app-color-services-dark: #524588; --app-color-services-light: #F0EDF8; --app-color-locations: #C4694A; --app-color-locations-dark: #A85438; --app-color-locations-light: #F7EDE8; --app-color-assets: #3D7E8A; --app-color-assets-dark: #2D6470; --app-color-assets-light: #EAF2F5; --app-color-suppliers: #4A6490; --app-color-suppliers-dark: #364D73; --app-color-suppliers-light: #ECF0F6; --app-color-sales: #5D8A5D; --app-color-sales-dark: #477047; --app-color-sales-light: #ECF3EC; --app-color-purchases: #4A7A49; --app-color-purchases-dark: #366235; --app-color-purchases-light: #ECF2EB; --app-color-expenses: #B04848; --app-color-expenses-dark: #8E3838; --app-color-expenses-light: #F6EAEA; --app-color-reports: #3D8888; --app-color-reports-dark: #2E6B6B; --app-color-reports-light: #EAF2F2; --app-color-admin: #5A6B7C; --app-color-admin-dark: #435060; --app-color-admin-light: #EDF0F3; /* Theme Meta */ --theme-name: "Corporate Steel"; --theme-icon-bg: linear-gradient(135deg, #F4F6F9 0%, #D5DBE4 100%); --theme-icon-accent: #2E5C8A; } /* * ========================================================================== * 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-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-users: #FACC15; --app-color-users-dark: #EAB308; --app-color-users-light: rgba(250, 204, 21, 0.15); --app-color-clients: #FB923C; --app-color-clients-dark: #EA580C; --app-color-clients-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-services: #C084FC; --app-color-services-dark: #A855F7; --app-color-services-light: rgba(192, 132, 252, 0.15); --app-color-locations: #FB7185; --app-color-locations-dark: #F43F5E; --app-color-locations-light: rgba(251, 113, 133, 0.15); --app-color-assets: #22D3EE; --app-color-assets-dark: #06B6D4; --app-color-assets-light: rgba(34, 211, 238, 0.15); --app-color-suppliers: #818CF8; --app-color-suppliers-dark: #6366F1; --app-color-suppliers-light: rgba(129, 140, 248, 0.15); --app-color-sales: #4ADE80; --app-color-sales-dark: #22C55E; --app-color-sales-light: rgba(74, 222, 128, 0.15); --app-color-purchases: #34D399; --app-color-purchases-dark: #10B981; --app-color-purchases-light: rgba(52, 211, 153, 0.15); --app-color-expenses: #F87171; --app-color-expenses-dark: #EF4444; --app-color-expenses-light: rgba(248, 113, 113, 0.15); --app-color-reports: #2DD4BF; --app-color-reports-dark: #14B8A6; --app-color-reports-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); /* Theme Meta */ --theme-name: "Forest Night"; --theme-icon-bg: linear-gradient(135deg, #1A2922 0%, #0D1512 100%); --theme-icon-accent: #4ADE80; } /* * ========================================================================== * 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-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-users: #CA8A04; --app-color-users-dark: #A16207; --app-color-users-light: #FEFCE8; --app-color-clients: #DC2626; --app-color-clients-dark: #B91C1C; --app-color-clients-light: #FEF2F2; --app-color-inventory: #2563EB; --app-color-inventory-dark: #1D4ED8; --app-color-inventory-light: #EFF6FF; --app-color-services: #9333EA; --app-color-services-dark: #7E22CE; --app-color-services-light: #FAF5FF; --app-color-locations: #EA580C; --app-color-locations-dark: #C2410C; --app-color-locations-light: #FFF7ED; --app-color-assets: #0891B2; --app-color-assets-dark: #0E7490; --app-color-assets-light: #ECFEFF; --app-color-suppliers: #4F46E5; --app-color-suppliers-dark: #4338CA; --app-color-suppliers-light: #EEF2FF; --app-color-sales: #16A34A; --app-color-sales-dark: #15803D; --app-color-sales-light: #F0FDF4; --app-color-purchases: #059669; --app-color-purchases-dark: #047857; --app-color-purchases-light: #ECFDF5; --app-color-expenses: #E11D48; --app-color-expenses-dark: #BE123C; --app-color-expenses-light: #FFF1F2; --app-color-reports: #0D9488; --app-color-reports-dark: #0F766E; --app-color-reports-light: #F0FDFA; --app-color-admin: #64748B; --app-color-admin-dark: #475569; --app-color-admin-light: #F8FAFC; /* 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 RYTA 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 RYTA 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-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-users: #F59E0B; --app-color-users-dark: #D97706; --app-color-users-light: #FFFBEB; --app-color-clients: #EF4444; --app-color-clients-dark: #DC2626; --app-color-clients-light: #FEF2F2; --app-color-inventory: #3B82F6; --app-color-inventory-dark: #2563EB; --app-color-inventory-light: #EFF6FF; --app-color-services: #8B5CF6; --app-color-services-dark: #7C3AED; --app-color-services-light: #F5F3FF; --app-color-locations: #F97316; --app-color-locations-dark: #EA580C; --app-color-locations-light: #FFF7ED; --app-color-assets: #06B6D4; --app-color-assets-dark: #0891B2; --app-color-assets-light: #ECFEFF; --app-color-suppliers: #6366F1; --app-color-suppliers-dark: #4F46E5; --app-color-suppliers-light: #EEF2FF; --app-color-sales: #10B981; --app-color-sales-dark: #059669; --app-color-sales-light: #ECFDF5; --app-color-purchases: #22C55E; --app-color-purchases-dark: #16A34A; --app-color-purchases-light: #F0FDF4; --app-color-expenses: #F43F5E; --app-color-expenses-dark: #E11D48; --app-color-expenses-light: #FFF1F2; --app-color-reports: #14B8A6; --app-color-reports-dark: #0D9488; --app-color-reports-light: #F0FDFA; --app-color-admin: #64748B; --app-color-admin-dark: #475569; --app-color-admin-light: #F8FAFC; /* 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-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-users: #FFD400; --app-color-users-dark: #EAC100; --app-color-users-light: rgba(255, 212, 0, 0.15); --app-color-clients: #F4212E; --app-color-clients-dark: #DC1D28; --app-color-clients-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-services: #7856FF; --app-color-services-dark: #6340E0; --app-color-services-light: rgba(120, 86, 255, 0.15); --app-color-locations: #FF6F00; --app-color-locations-dark: #E66400; --app-color-locations-light: rgba(255, 111, 0, 0.15); --app-color-assets: #00C9DB; --app-color-assets-dark: #00B0C2; --app-color-assets-light: rgba(0, 201, 219, 0.15); --app-color-suppliers: #6C8EEF; --app-color-suppliers-dark: #5678D8; --app-color-suppliers-light: rgba(108, 142, 239, 0.15); --app-color-sales: #00BA7C; --app-color-sales-dark: #00A06A; --app-color-sales-light: rgba(0, 186, 124, 0.15); --app-color-purchases: #17C964; --app-color-purchases-dark: #12A050; --app-color-purchases-light: rgba(23, 201, 100, 0.15); --app-color-expenses: #FF4757; --app-color-expenses-dark: #E83D4C; --app-color-expenses-light: rgba(255, 71, 87, 0.15); --app-color-reports: #00B8D4; --app-color-reports-dark: #009DB3; --app-color-reports-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); /* 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-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-users: #A68B3C; --app-color-users-dark: #8A7430; --app-color-users-light: #F8F4E8; --app-color-clients: #A3543A; --app-color-clients-dark: #8A4530; --app-color-clients-light: #F7EDE9; --app-color-inventory: #3B5068; --app-color-inventory-dark: #2C3D50; --app-color-inventory-light: #ECF0F4; --app-color-services: #6E5A72; --app-color-services-dark: #574660; --app-color-services-light: #F2EEF3; --app-color-locations: #B06840; --app-color-locations-dark: #955535; --app-color-locations-light: #F7EDE6; --app-color-assets: #4A7878; --app-color-assets-dark: #3A6060; --app-color-assets-light: #ECF3F3; --app-color-suppliers: #4A6080; --app-color-suppliers-dark: #3A4C68; --app-color-suppliers-light: #ECF0F5; --app-color-sales: #5E7F5E; --app-color-sales-dark: #4A6548; --app-color-sales-light: #EDF3ED; --app-color-purchases: #4A7048; --app-color-purchases-dark: #3A5838; --app-color-purchases-light: #ECF2EC; --app-color-expenses: #A04848; --app-color-expenses-dark: #883838; --app-color-expenses-light: #F5EAEA; --app-color-reports: #408080; --app-color-reports-dark: #326565; --app-color-reports-light: #EBF2F2; --app-color-admin: #6B6862; --app-color-admin-dark: #525048; --app-color-admin-light: #F0EFED; /* 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-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-users: #E2A64B; --app-color-users-dark: #C88E38; --app-color-users-light: #FDF5E7; --app-color-clients: #E87461; --app-color-clients-dark: #D4604E; --app-color-clients-light: #FEF0ED; --app-color-inventory: #5B8DB8; --app-color-inventory-dark: #4A78A0; --app-color-inventory-light: #EDF4FA; --app-color-services: #B07BAD; --app-color-services-dark: #956E92; --app-color-services-light: #F6EFF5; --app-color-locations: #E09060; --app-color-locations-dark: #C87848; --app-color-locations-light: #FDF2E8; --app-color-assets: #50A0A8; --app-color-assets-dark: #3E8890; --app-color-assets-light: #EBF5F6; --app-color-suppliers: #6880B0; --app-color-suppliers-dark: #546A98; --app-color-suppliers-light: #EDF0F7; --app-color-sales: #5DAE8B; --app-color-sales-dark: #4A9575; --app-color-sales-light: #EBF7F1; --app-color-purchases: #4E9E70; --app-color-purchases-dark: #3E8660; --app-color-purchases-light: #EAF5EF; --app-color-expenses: #D86060; --app-color-expenses-dark: #C04848; --app-color-expenses-light: #FAEAEA; --app-color-reports: #4A9898; --app-color-reports-dark: #3A8080; --app-color-reports-light: #EBF4F4; --app-color-admin: #8A7E78; --app-color-admin-dark: #706560; --app-color-admin-light: #F3F0EE; /* Theme Meta */ --theme-name: "Peach Fizz"; --theme-icon-bg: linear-gradient(135deg, #FEF8F4 0%, #F6EBE3 100%); --theme-icon-accent: #E87461; } /* * ========================================================================== * THEME: RYTA DEFAULT * Official Ryta brand theme — deep indigo primary from ryta-v1.svg (#3D0DDA) * Clean, professional, modern — neutral whites with vibrant indigo accents * Think: SaaS dashboard, brand-forward admin, polished product UI * ========================================================================== */ [data-theme="ryta-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 — Ryta 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-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-users: #D69E2E; --app-color-users-dark: #B88620; --app-color-users-light: #FEFCE8; --app-color-clients: #E53E3E; --app-color-clients-dark: #C53030; --app-color-clients-light: #FEF0F0; --app-color-inventory: #2B6CB0; --app-color-inventory-dark: #225698; --app-color-inventory-light: #EBF4FF; --app-color-services: #805AD5; --app-color-services-dark: #6842B8; --app-color-services-light: #F3EEFA; --app-color-locations: #DD6B20; --app-color-locations-dark: #C05616; --app-color-locations-light: #FFF1E6; --app-color-assets: #0891B2; --app-color-assets-dark: #0E7490; --app-color-assets-light: #E6F7F9; --app-color-suppliers: #4F46E5; --app-color-suppliers-dark: #4338CA; --app-color-suppliers-light: #EEF2FF; --app-color-sales: #059669; --app-color-sales-dark: #047857; --app-color-sales-light: #ECFDF5; --app-color-purchases: #16A34A; --app-color-purchases-dark: #15803D; --app-color-purchases-light: #F0FDF4; --app-color-expenses: #DC2626; --app-color-expenses-dark: #B91C1C; --app-color-expenses-light: #FEF2F2; --app-color-reports: #0D9488; --app-color-reports-dark: #0F766E; --app-color-reports-light: #F0FDFA; --app-color-admin: #6B7280; --app-color-admin-dark: #4B5563; --app-color-admin-light: #F3F4F6; /* Theme Meta */ --theme-name: "Ryta Default"; --theme-icon-bg: linear-gradient(135deg, #FAFAFD 0%, #E2DFF0 100%); --theme-icon-accent: #3D0DDA; } /* * ========================================================================== * 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-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-users: #EAB308; --app-color-users-dark: #CA8A04; --app-color-users-light: #FEFCE8; --app-color-clients: #EF4444; --app-color-clients-dark: #DC2626; --app-color-clients-light: #FEF2F2; --app-color-inventory: #3B82F6; --app-color-inventory-dark: #2563EB; --app-color-inventory-light: #EFF6FF; --app-color-services: #8B5CF6; --app-color-services-dark: #7C3AED; --app-color-services-light: #F5F3FF; --app-color-locations: #F97316; --app-color-locations-dark: #EA580C; --app-color-locations-light: #FFF7ED; --app-color-assets: #06B6D4; --app-color-assets-dark: #0891B2; --app-color-assets-light: #ECFEFF; --app-color-suppliers: #6366F1; --app-color-suppliers-dark: #4F46E5; --app-color-suppliers-light: #EEF2FF; --app-color-sales: #22C55E; --app-color-sales-dark: #16A34A; --app-color-sales-light: #F0FDF4; --app-color-purchases: #10B981; --app-color-purchases-dark: #059669; --app-color-purchases-light: #ECFDF5; --app-color-expenses: #F43F5E; --app-color-expenses-dark: #E11D48; --app-color-expenses-light: #FFF1F2; --app-color-reports: #14B8A6; --app-color-reports-dark: #0D9488; --app-color-reports-light: #F0FDFA; --app-color-admin: #737373; --app-color-admin-dark: #525252; --app-color-admin-light: #F5F5F5; /* Theme Meta */ --theme-name: "shadcn Neutral"; --theme-icon-bg: linear-gradient(135deg, #FFFFFF 0%, #E5E5E5 100%); --theme-icon-accent: #171717; } /* * ========================================================================== * 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-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-users: #FFE066; --app-color-users-dark: #EAC840; --app-color-users-light: rgba(255, 224, 102, 0.15); --app-color-clients: #FF6B35; --app-color-clients-dark: #E85A25; --app-color-clients-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-services: #F25F5C; --app-color-services-dark: #D8504D; --app-color-services-light: rgba(242, 95, 92, 0.15); --app-color-locations: #FF8C42; --app-color-locations-dark: #E87830; --app-color-locations-light: rgba(255, 140, 66, 0.15); --app-color-assets: #4ECDC4; --app-color-assets-dark: #38B5AD; --app-color-assets-light: rgba(78, 205, 196, 0.15); --app-color-suppliers: #6B8EE0; --app-color-suppliers-dark: #5578C8; --app-color-suppliers-light: rgba(107, 142, 224, 0.15); --app-color-sales: #70C1B3; --app-color-sales-dark: #58A99B; --app-color-sales-light: rgba(112, 193, 179, 0.15); --app-color-purchases: #45B880; --app-color-purchases-dark: #35A068; --app-color-purchases-light: rgba(69, 184, 128, 0.15); --app-color-expenses: #FF5252; --app-color-expenses-dark: #E84040; --app-color-expenses-light: rgba(255, 82, 82, 0.15); --app-color-reports: #00B8D4; --app-color-reports-dark: #009DB3; --app-color-reports-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); /* 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-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-users: #D4A84B; --app-color-users-dark: #B8922F; --app-color-users-light: #FDF8ED; --app-color-clients: #C4654A; --app-color-clients-dark: #A3513A; --app-color-clients-light: #FDF3F0; --app-color-inventory: #3D5A73; --app-color-inventory-dark: #2D4558; --app-color-inventory-light: #EEF2F5; --app-color-services: #7C6BC4; --app-color-services-dark: #5A4FA0; --app-color-services-light: #F3F0FA; --app-color-locations: #E07C5A; --app-color-locations-dark: #C4613F; --app-color-locations-light: #FDF2ED; --app-color-assets: #4A8B96; --app-color-assets-dark: #367078; --app-color-assets-light: #EDF5F7; --app-color-suppliers: #5A74A8; --app-color-suppliers-dark: #445A88; --app-color-suppliers-light: #EFF2F8; --app-color-sales: #7A9E7A; --app-color-sales-dark: #5F7F5F; --app-color-sales-light: #F0F5F0; --app-color-purchases: #5B8C5A; --app-color-purchases-dark: #467345; --app-color-purchases-light: #EFF5EE; --app-color-expenses: #C45A5A; --app-color-expenses-dark: #A04040; --app-color-expenses-light: #FBEEEE; --app-color-reports: #4A9B9B; --app-color-reports-dark: #3A7B7B; --app-color-reports-light: #EDF6F6; --app-color-admin: #6B7C8D; --app-color-admin-dark: #4E5D6B; --app-color-admin-light: #F0F2F5; /* 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; } /* ========================================================================== 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 (Lexend Exa headings + Figtree body) */ [data-font="exa"] { --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Lexend Exa', 'Figtree', sans-serif; } /* Ryta Minimal (Lexend Exa everywhere — clean, geometric, modern) */ [data-font="ryta-minimal"] { --font-body: 'Lexend Exa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Lexend Exa', -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: ryta-minimal */ :root { data-font: "ryta-minimal"; }