@import '@krona/tokens.css';
@import '@krona/themes.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   KRONA Design System v3.0 - Semantic Mapping & Compatibility Layer
   ========================================================================== */

:root,
[data-krona-theme="noble-green"],
[data-theme="noble-green"],
[data-theme="soft-light"] {
  --bg-app: var(--krona-bg-app);
  --bg-workspace: var(--krona-bg-workspace);
  --bg-section: var(--krona-bg-section);
  --surface-default: var(--krona-surface);
  --surface-raised: var(--krona-surface-raised);
  --surface-muted: var(--krona-surface-muted);
  --surface-sunken: var(--krona-surface-muted);
  --surface-hover: var(--krona-surface-hover);
  --surface-selected: var(--krona-surface-selected);
  --surface-disabled: var(--krona-surface-muted);

  --sidebar-bg: var(--krona-surface);
  --sidebar-deep: var(--krona-bg-app);
  --sidebar-surface: var(--krona-surface-raised);
  --sidebar-hover: var(--krona-surface-hover);
  --sidebar-active: var(--krona-surface-selected);
  --sidebar-border: var(--krona-border-subtle);
  --sidebar-text: var(--krona-text-primary);
  --sidebar-text-secondary: var(--krona-text-secondary);
  --sidebar-text-muted: var(--krona-text-muted);
  --sidebar-text-active: var(--krona-primary);
  --sidebar-icon: var(--krona-text-secondary);
  --sidebar-icon-active: var(--krona-primary);
  --sidebar-indicator: var(--krona-gold);

  --text-primary: var(--krona-text-primary);
  --text-secondary: var(--krona-text-secondary);
  --text-tertiary: var(--krona-text-secondary);
  --text-muted: var(--krona-text-muted);
  --text-disabled: var(--krona-text-muted);
  --text-inverse: var(--krona-text-inverse);
  --text-brand: var(--krona-gold);
  --text-link: var(--krona-primary);
  --text-link-hover: var(--krona-primary-hover);

  --border-subtle: var(--krona-border-subtle);
  --border-default: var(--krona-border);
  --border-strong: var(--krona-border-strong);
  --border-focus: var(--krona-border-focus);

  --color-green: var(--krona-primary);
  --color-green-hover: var(--krona-primary-hover);
  --color-green-active: var(--krona-primary-active);
  --color-green-soft: var(--krona-primary-soft);
  --color-green-border: var(--krona-border-strong);
  --color-green-text: var(--krona-primary);

  --color-gold: var(--krona-gold);
  --color-gold-hover: var(--krona-gold-hover);
  --color-gold-active: var(--krona-gold-active);
  --color-gold-soft: var(--krona-gold-soft);
  --color-gold-border: var(--krona-border);
  --color-gold-text: var(--krona-gold);

  --color-danger: var(--krona-danger);
  --color-danger-soft: var(--krona-danger-soft);
  --color-danger-border: var(--krona-danger);
  --color-danger-text: var(--krona-danger);

  --color-warning: var(--krona-warning);
  --color-warning-soft: var(--krona-warning-soft);
  --color-warning-border: var(--krona-warning);
  --color-warning-text: var(--krona-warning);

  --color-info: var(--krona-info);
  --color-info-soft: var(--krona-info-soft);
  --color-info-border: var(--krona-info);
  --color-info-text: var(--krona-info);

  /* Semantic aliases */
  --color-primary: var(--krona-primary);
  --color-primary-hover: var(--krona-primary-hover);
  --color-primary-active: var(--krona-primary-active);
  --color-primary-soft: var(--krona-primary-soft);
  --color-primary-text: var(--krona-text-inverse);
  --color-accent: var(--krona-gold);
  --color-accent-hover: var(--krona-gold-hover);
  --color-accent-active: var(--krona-gold-active);
  --color-accent-soft: var(--krona-gold-soft);
  --color-surface: var(--krona-surface);
  --color-surface-raised: var(--krona-surface-raised);
  --color-surface-muted: var(--krona-surface-muted);
  --color-surface-sunken: var(--krona-surface-muted);
  --color-surface-hover: var(--krona-surface-hover);
}

[data-krona-theme="parchment-light"],
[data-theme="parchment-light"],
[data-theme="light"] {
  --bg-app: var(--krona-bg-app);
  --bg-workspace: var(--krona-bg-workspace);
  --bg-section: var(--krona-bg-section);
  --surface-default: var(--krona-surface);
  --surface-raised: var(--krona-surface-raised);
  --surface-muted: var(--krona-surface-muted);
  --surface-sunken: var(--krona-surface-muted);
  --surface-hover: var(--krona-surface-hover);
  --surface-selected: var(--krona-surface-selected);
  --surface-disabled: var(--krona-surface-muted);

  --sidebar-bg: var(--krona-surface);
  --sidebar-deep: var(--krona-bg-app);
  --sidebar-surface: var(--krona-surface-raised);
  --sidebar-hover: var(--krona-surface-hover);
  --sidebar-active: var(--krona-surface-selected);
  --sidebar-border: var(--krona-border-subtle);
  --sidebar-text: var(--krona-text-primary);
  --sidebar-text-secondary: var(--krona-text-secondary);
  --sidebar-text-muted: var(--krona-text-muted);
  --sidebar-text-active: var(--krona-primary);
  --sidebar-icon: var(--krona-text-secondary);
  --sidebar-icon-active: var(--krona-primary);
  --sidebar-indicator: var(--krona-gold);

  --text-primary: var(--krona-text-primary);
  --text-secondary: var(--krona-text-secondary);
  --text-tertiary: var(--krona-text-secondary);
  --text-muted: var(--krona-text-muted);
  --text-disabled: var(--krona-text-muted);
  --text-inverse: var(--krona-text-inverse);
  --text-brand: var(--krona-gold);
  --text-link: var(--krona-primary);
  --text-link-hover: var(--krona-primary-hover);

  --border-subtle: var(--krona-border-subtle);
  --border-default: var(--krona-border);
  --border-strong: var(--krona-border-strong);
  --border-focus: var(--krona-border-focus);

  --color-green: var(--krona-primary);
  --color-green-hover: var(--krona-primary-hover);
  --color-green-active: var(--krona-primary-active);
  --color-green-soft: var(--krona-primary-soft);
  --color-green-border: var(--krona-border-strong);
  --color-green-text: var(--krona-primary);

  --color-gold: var(--krona-gold);
  --color-gold-hover: var(--krona-gold-hover);
  --color-gold-active: var(--krona-gold-active);
  --color-gold-soft: var(--krona-gold-soft);
  --color-gold-border: var(--krona-border);
  --color-gold-text: var(--krona-gold);

  --color-danger: var(--krona-danger);
  --color-danger-soft: var(--krona-danger-soft);
  --color-danger-border: var(--krona-danger);
  --color-danger-text: var(--krona-danger);

  --color-warning: var(--krona-warning);
  --color-warning-soft: var(--krona-warning-soft);
  --color-warning-border: var(--krona-warning);
  --color-warning-text: var(--krona-warning);

  --color-info: var(--krona-info);
  --color-info-soft: var(--krona-info-soft);
  --color-info-border: var(--krona-info);
  --color-info-text: var(--krona-info);

  /* Semantic aliases */
  --color-primary: var(--krona-primary);
  --color-primary-hover: var(--krona-primary-hover);
  --color-primary-active: var(--krona-primary-active);
  --color-primary-soft: var(--krona-primary-soft);
  --color-primary-text: var(--krona-text-inverse);
  --color-accent: var(--krona-gold);
  --color-accent-hover: var(--krona-gold-hover);
  --color-accent-active: var(--krona-gold-active);
  --color-accent-soft: var(--krona-gold-soft);
  --color-surface: var(--krona-surface);
  --color-surface-raised: var(--krona-surface-raised);
  --color-surface-muted: var(--krona-surface-muted);
  --color-surface-sunken: var(--krona-surface-muted);
  --color-surface-hover: var(--krona-surface-hover);
}

[data-krona-theme="graphite-forest-dark"],
[data-theme="graphite-forest-dark"],
[data-theme="dark"] {
  --bg-app: var(--krona-bg-app);
  --bg-workspace: var(--krona-bg-workspace);
  --bg-section: var(--krona-bg-section);
  --surface-default: var(--krona-surface);
  --surface-raised: var(--krona-surface-raised);
  --surface-muted: var(--krona-surface-muted);
  --surface-sunken: var(--krona-surface-muted);
  --surface-hover: var(--krona-surface-hover);
  --surface-selected: var(--krona-surface-selected);
  --surface-disabled: var(--krona-surface-muted);

  --sidebar-bg: var(--krona-surface);
  --sidebar-deep: var(--krona-bg-app);
  --sidebar-surface: var(--krona-surface-raised);
  --sidebar-hover: var(--krona-surface-hover);
  --sidebar-active: var(--krona-surface-selected);
  --sidebar-border: var(--krona-border-subtle);
  --sidebar-text: var(--krona-text-primary);
  --sidebar-text-secondary: var(--krona-text-secondary);
  --sidebar-text-muted: var(--krona-text-muted);
  --sidebar-text-active: var(--krona-primary);
  --sidebar-icon: var(--krona-text-secondary);
  --sidebar-icon-active: var(--krona-gold);
  --sidebar-indicator: var(--krona-gold);

  --text-primary: var(--krona-text-primary);
  --text-secondary: var(--krona-text-secondary);
  --text-tertiary: var(--krona-text-secondary);
  --text-muted: var(--krona-text-muted);
  --text-disabled: var(--krona-text-muted);
  --text-inverse: var(--krona-text-inverse);
  --text-brand: var(--krona-gold);
  --text-link: var(--krona-primary);
  --text-link-hover: var(--krona-primary-hover);

  --border-subtle: var(--krona-border-subtle);
  --border-default: var(--krona-border);
  --border-strong: var(--krona-border-strong);
  --border-focus: var(--krona-border-focus);

  --color-green: var(--krona-primary);
  --color-green-hover: var(--krona-primary-hover);
  --color-green-active: var(--krona-primary-active);
  --color-green-soft: var(--krona-primary-soft);
  --color-green-border: var(--krona-border-strong);
  --color-green-text: var(--krona-primary);

  --color-gold: var(--krona-gold);
  --color-gold-hover: var(--krona-gold-hover);
  --color-gold-active: var(--krona-gold-active);
  --color-gold-soft: var(--krona-gold-soft);
  --color-gold-border: var(--krona-border);
  --color-gold-text: var(--krona-gold);

  --color-danger: var(--krona-danger);
  --color-danger-soft: var(--krona-danger-soft);
  --color-danger-border: var(--krona-danger);
  --color-danger-text: var(--krona-danger);

  --color-warning: var(--krona-warning);
  --color-warning-soft: var(--krona-warning-soft);
  --color-warning-border: var(--krona-warning);
  --color-warning-text: var(--krona-warning);

  --color-info: var(--krona-info);
  --color-info-soft: var(--krona-info-soft);
  --color-info-border: var(--krona-info);
  --color-info-text: var(--krona-info);

  /* Semantic aliases */
  --color-primary: var(--krona-primary);
  --color-primary-hover: var(--krona-primary-hover);
  --color-primary-active: var(--krona-primary-active);
  --color-primary-soft: var(--krona-primary-soft);
  --color-primary-text: var(--krona-text-inverse);
  --color-accent: var(--krona-gold);
  --color-accent-hover: var(--krona-gold-hover);
  --color-accent-active: var(--krona-gold-active);
  --color-accent-soft: var(--krona-gold-soft);
  --color-surface: var(--krona-surface);
  --color-surface-raised: var(--krona-surface-raised);
  --color-surface-muted: var(--krona-surface-muted);
  --color-surface-sunken: var(--krona-surface-muted);
  --color-surface-hover: var(--krona-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);
}