/* * ========================================================================== * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * ========================================================================== * This file is generated at build time by ui.CopyStylesWithTheme() * Default theme: shadcn-neutral | Font: default | All themes: 10 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; } /* * ========================================================================== * 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 * ========================================================================== */ :root { /* 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); /* Theme Meta */ --theme-name: "shadcn Neutral"; --theme-icon-bg: linear-gradient(135deg, #FFFFFF 0%, #E5E5E5 100%); --theme-icon-accent: #171717; } /* * ========================================================================== * THEME: CORPORATE STEEL * Authoritative, polished business palette with steel blue accents * Think: quarterly reports, boardrooms, investor decks * ========================================================================== */ [data-theme="corporate-steel"] { /* 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); /* 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); /* 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); /* 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); /* 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); /* 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); /* 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); /* Theme Meta */ --theme-name: "Peach Fizz"; --theme-icon-bg: linear-gradient(135deg, #FEF8F4 0%, #F6EBE3 100%); --theme-icon-accent: #E87461; } /* * ========================================================================== * 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); /* 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); /* 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; } /* ========================================================================== 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: default */ :root { data-font: "default"; }