@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);
}

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;
}

/* 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);
}