/* Klik Design System Theme */

:root,
[data-theme="dark"] {
  /* Klik Design Tokens - Dark Theme */
  --klik-bg: #003839;
  --klik-surface: #004436;
  --klik-surface2: #005037;
  --klik-primary: #01A668;
  --klik-primary-hover: #019058;
  --klik-primary-active: #017a4a;
  --klik-text: #FFFFFF;
  --klik-text-muted: #D1D5DB;
  --klik-text-dim: #9CA3AF;
  --klik-border: #1F6F6A;
  --klik-border-subtle: rgba(31, 111, 106, 0.5);

  /* Semantic colors */
  --semantic-warning: #F59E0B;
  --semantic-error: #EF4444;
  --semantic-success: #01A668;

  /* Shadows */
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-card: none;

  /* Fonts */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Sizing */
  --panel-radius: 12px;
  --control-radius: 8px;
  --button-height: 44px;
}

/* Light Theme */
[data-theme="light"] {
  --klik-bg: #E8EEEC;
  --klik-surface: #FFFFFF;
  --klik-surface2: #F5F8F7;
  --klik-primary: #01A668;
  --klik-primary-hover: #019058;
  --klik-primary-active: #017a4a;
  --klik-text: #1A2F2A;
  --klik-text-muted: #4A5E58;
  --klik-text-dim: #6B7D77;
  --klik-border: #D0DDD9;
  --klik-border-subtle: rgba(31, 111, 106, 0.15);

  /* Semantic colors stay the same */
  --semantic-warning: #D97706;
  --semantic-error: #DC2626;
  --semantic-success: #01A668;

  /* More prominent shadow for light theme */
  --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Card-specific shadow for light mode */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--klik-bg);
  color: var(--klik-text);
  font-family: var(--font-sans);
}

/* Nice default focus ring */
:focus-visible {
  outline: 2px solid var(--klik-primary);
  outline-offset: 2px;
}