311 lines
8.3 KiB
CSS
311 lines
8.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root, [data-theme="soft-light"] {
|
|
/* Soft Light (Default theme) */
|
|
--bg-app: #EFEEE8;
|
|
--bg-workspace: #F3F1EB;
|
|
--bg-section: #F0EEE8;
|
|
--surface-default: #F8F6F0;
|
|
--surface-raised: #FBF9F3;
|
|
--surface-muted: #E9E7E0;
|
|
--surface-sunken: #E5E3DC;
|
|
--surface-hover: #EEECE5;
|
|
--surface-selected: #E2E9E1;
|
|
--surface-disabled: #E7E5DF;
|
|
|
|
--sidebar-bg: #252722;
|
|
--sidebar-deep: #20221E;
|
|
--sidebar-surface: #2B2D27;
|
|
--sidebar-hover: #30332C;
|
|
--sidebar-active: #34382F;
|
|
--sidebar-border: #3A3D35;
|
|
--sidebar-text: #D8D8D0;
|
|
--sidebar-text-secondary: #A9ACA3;
|
|
--sidebar-text-muted: #858980;
|
|
--sidebar-text-active: #F5F0E5;
|
|
--sidebar-icon: #BFC1B9;
|
|
--sidebar-icon-active: #D4B16D;
|
|
--sidebar-indicator: #B78335;
|
|
|
|
--text-primary: #252824;
|
|
--text-secondary: #686C65;
|
|
--text-tertiary: #7C8078;
|
|
--text-muted: #8A8D86;
|
|
--text-disabled: #AAACA6;
|
|
--text-inverse: #F4F2EB;
|
|
--text-brand: #805923;
|
|
--text-link: #2F684C;
|
|
--text-link-hover: #214B37;
|
|
|
|
--border-subtle: #E3E0D7;
|
|
--border-default: #D8D5CB;
|
|
--border-strong: #C6C3B9;
|
|
--border-focus: #5D8D6D;
|
|
|
|
--color-green: #2F684C;
|
|
--color-green-hover: #285A42;
|
|
--color-green-active: #214B37;
|
|
--color-green-soft: #DDE9DF;
|
|
--color-green-border: #BDD4C3;
|
|
--color-green-text: #315F46;
|
|
|
|
--color-gold: #B78335;
|
|
--color-gold-hover: #9E702D;
|
|
--color-gold-active: #805923;
|
|
--color-gold-soft: #EFE3CD;
|
|
--color-gold-border: #DFC79C;
|
|
--color-gold-text: #805923;
|
|
|
|
--color-danger: #A6534E;
|
|
--color-danger-soft: #F1DFDC;
|
|
--color-danger-border: #DAB6B1;
|
|
--color-danger-text: #873F3B;
|
|
|
|
--color-warning: #A8752F;
|
|
--color-warning-soft: #F2E7D3;
|
|
--color-warning-border: #DEC59B;
|
|
--color-warning-text: #80571F;
|
|
|
|
--color-info: #527286;
|
|
--color-info-soft: #DFE7EA;
|
|
--color-info-border: #BACBD1;
|
|
--color-info-text: #405F70;
|
|
|
|
/* Semantic aliases */
|
|
--color-primary: var(--color-green);
|
|
--color-primary-hover: var(--color-green-hover);
|
|
--color-primary-active: var(--color-green-active);
|
|
--color-primary-soft: var(--color-green-soft);
|
|
--color-primary-text: var(--color-green-text);
|
|
--color-accent: var(--color-gold);
|
|
--color-accent-hover: var(--color-gold-hover);
|
|
--color-accent-active: var(--color-gold-active);
|
|
--color-accent-soft: var(--color-gold-soft);
|
|
--color-surface: var(--surface-default);
|
|
--color-surface-raised: var(--surface-raised);
|
|
--color-surface-muted: var(--surface-muted);
|
|
--color-surface-sunken: var(--surface-sunken);
|
|
--color-surface-hover: var(--surface-hover);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-app: #F5F4EF;
|
|
--bg-workspace: #F8F7F2;
|
|
--bg-section: #F2F0E8;
|
|
--surface-default: #FCFAF5;
|
|
--surface-raised: #FFFFFF;
|
|
--surface-muted: #EFEEE8;
|
|
--surface-sunken: #E7E5DD;
|
|
--surface-hover: #F2EFE8;
|
|
--surface-selected: #E2EAE1;
|
|
--surface-disabled: #EBE9E2;
|
|
|
|
--sidebar-bg: #ECEAE3;
|
|
--sidebar-deep: #E4E1D8;
|
|
--sidebar-surface: #F2EFE8;
|
|
--sidebar-hover: #DFDDD4;
|
|
--sidebar-active: #D6D2C7;
|
|
--sidebar-border: #D3CFCA;
|
|
--sidebar-text: #3C4039;
|
|
--sidebar-text-secondary: #686C65;
|
|
--sidebar-text-muted: #8A8D86;
|
|
--sidebar-text-active: #1D201C;
|
|
--sidebar-icon: #555951;
|
|
--sidebar-icon-active: #B78335;
|
|
--sidebar-indicator: #B78335;
|
|
|
|
--text-primary: #252824;
|
|
--text-secondary: #686C65;
|
|
--text-tertiary: #7C8078;
|
|
--text-muted: #8A8D86;
|
|
--text-disabled: #AAACA6;
|
|
--text-inverse: #F4F2EB;
|
|
--text-brand: #805923;
|
|
--text-link: #2F684C;
|
|
--text-link-hover: #214B37;
|
|
|
|
--border-subtle: #E8E5DD;
|
|
--border-default: #DDDAD1;
|
|
--border-strong: #C8C5BB;
|
|
--border-focus: #5D8D6D;
|
|
|
|
--color-green: #2F684C;
|
|
--color-green-hover: #285A42;
|
|
--color-green-active: #214B37;
|
|
--color-green-soft: #E1EBE2;
|
|
--color-green-border: #BDD4C3;
|
|
--color-green-text: #315F46;
|
|
|
|
--color-gold: #B78335;
|
|
--color-gold-hover: #9E702D;
|
|
--color-gold-active: #805923;
|
|
--color-gold-soft: #F4EAD8;
|
|
--color-gold-border: #DFC79C;
|
|
--color-gold-text: #805923;
|
|
|
|
--color-danger: #A6534E;
|
|
--color-danger-soft: #F5E5E3;
|
|
--color-danger-border: #DAB6B1;
|
|
--color-danger-text: #873F3B;
|
|
|
|
--color-warning: #A8752F;
|
|
--color-warning-soft: #F7EEDB;
|
|
--color-warning-border: #DEC59B;
|
|
--color-warning-text: #80571F;
|
|
|
|
--color-info: #527286;
|
|
--color-info-soft: #E3EBEF;
|
|
--color-info-border: #BACBD1;
|
|
--color-info-text: #405F70;
|
|
|
|
/* Semantic aliases */
|
|
--color-primary: var(--color-green);
|
|
--color-primary-hover: var(--color-green-hover);
|
|
--color-primary-active: var(--color-green-active);
|
|
--color-primary-soft: var(--color-green-soft);
|
|
--color-primary-text: var(--color-green-text);
|
|
--color-accent: var(--color-gold);
|
|
--color-accent-hover: var(--color-gold-hover);
|
|
--color-accent-active: var(--color-gold-active);
|
|
--color-accent-soft: var(--color-gold-soft);
|
|
--color-surface: var(--surface-default);
|
|
--color-surface-raised: var(--surface-raised);
|
|
--color-surface-muted: var(--surface-muted);
|
|
--color-surface-sunken: var(--surface-sunken);
|
|
--color-surface-hover: var(--surface-hover);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-app: #1D1F1B;
|
|
--bg-workspace: #22241F;
|
|
--bg-section: #252822;
|
|
--surface-default: #292B26;
|
|
--surface-raised: #30322C;
|
|
--surface-muted: #252722;
|
|
--surface-sunken: #1F211D;
|
|
--surface-hover: #343730;
|
|
--surface-selected: #2D3A30;
|
|
--surface-disabled: #2B2E28;
|
|
|
|
--sidebar-bg: #191B18;
|
|
--sidebar-deep: #151714;
|
|
--sidebar-surface: #20221E;
|
|
--sidebar-hover: #272A24;
|
|
--sidebar-active: #2F332C;
|
|
--sidebar-border: #2D302A;
|
|
--sidebar-text: #B2B4AC;
|
|
--sidebar-text-secondary: #888C83;
|
|
--sidebar-text-muted: #6E726A;
|
|
--sidebar-text-active: #E8E6DE;
|
|
--sidebar-icon: #9FA29A;
|
|
--sidebar-icon-active: #C99A4D;
|
|
--sidebar-indicator: #C99A4D;
|
|
|
|
--text-primary: #E8E6DE;
|
|
--text-secondary: #B2B4AC;
|
|
--text-tertiary: #888C83;
|
|
--text-muted: #72766D;
|
|
--text-disabled: #585B53;
|
|
--text-inverse: #1D1F1B;
|
|
--text-brand: #C99A4D;
|
|
--text-link: #6F9E7C;
|
|
--text-link-hover: #8AB796;
|
|
|
|
--border-subtle: #34372F;
|
|
--border-default: #3C3F37;
|
|
--border-strong: #4D5146;
|
|
--border-focus: #6F9E7C;
|
|
|
|
--color-green: #3D7A58;
|
|
--color-green-hover: #488E67;
|
|
--color-green-active: #2F684C;
|
|
--color-green-soft: #233529;
|
|
--color-green-border: #2D4C3A;
|
|
--color-green-text: #8FC9A6;
|
|
|
|
--color-gold: #C99A4D;
|
|
--color-gold-hover: #D7AB61;
|
|
--color-gold-active: #B78335;
|
|
--color-gold-soft: #382F1E;
|
|
--color-gold-border: #56472D;
|
|
--color-gold-text: #E5C384;
|
|
|
|
--color-danger: #B85853;
|
|
--color-danger-soft: #382423;
|
|
--color-danger-border: #59312F;
|
|
--color-danger-text: #E58D89;
|
|
|
|
--color-warning: #B78335;
|
|
--color-warning-soft: #382F1E;
|
|
--color-warning-border: #56472D;
|
|
--color-warning-text: #DEAF62;
|
|
|
|
--color-info: #5B8096;
|
|
--color-info-soft: #212F38;
|
|
--color-info-border: #304856;
|
|
--color-info-text: #8EAFC2;
|
|
|
|
/* Semantic aliases */
|
|
--color-primary: var(--color-green);
|
|
--color-primary-hover: var(--color-green-hover);
|
|
--color-primary-active: var(--color-green-active);
|
|
--color-primary-soft: var(--color-green-soft);
|
|
--color-primary-text: var(--color-green-text);
|
|
--color-accent: var(--color-gold);
|
|
--color-accent-hover: var(--color-gold-hover);
|
|
--color-accent-active: var(--color-gold-active);
|
|
--color-accent-soft: var(--color-gold-soft);
|
|
--color-surface: var(--surface-default);
|
|
--color-surface-raised: var(--surface-raised);
|
|
--color-surface-muted: var(--surface-muted);
|
|
--color-surface-sunken: var(--surface-sunken);
|
|
--color-surface-hover: var(--surface-hover);
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: var(--bg-app);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Custom scrollbars according to design system */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
/* Glass & modal overlay */
|
|
.krona-overlay {
|
|
background-color: rgba(30, 31, 27, 0.42);
|
|
backdrop-filter: blur(2px);
|
|
}
|