/**
 * Remote Inject - Theme Variables
 * Warm earthy color palette with terracotta accents
 */

:root {
  /* Light theme (default) */
  --color-bg-primary: #faf9f7;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f3f2ef;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  --color-text-primary: #1c1c1a;
  --color-text-secondary: #52524e;
  --color-text-tertiary: #787873;
  --color-text-muted: #a3a39d;

  --color-accent: #c45a2c;
  --color-accent-hover: #d4683a;
  --color-accent-active: #a84d26;
  --color-accent-muted: rgba(196, 90, 44, 0.1);
  --color-accent-gradient: linear-gradient(135deg, #c45a2c 0%, #d97b4a 50%, #6b8a9a 100%);

  --color-success: #4a8c5c;
  --color-success-bg: rgba(74, 140, 92, 0.12);
  --color-warning: #b8860b;
  --color-warning-bg: rgba(184, 134, 11, 0.12);
  --color-error: #c04040;
  --color-error-bg: rgba(192, 64, 64, 0.12);
  --color-info: #5a7a8a;
  --color-info-bg: rgba(90, 122, 138, 0.12);

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-border-hover: rgba(174, 86, 48, 0.3);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.035);
  --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --font-sans: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  /* Dark theme */
  --color-bg-primary: #121210;
  --color-bg-secondary: #1c1c1a;
  --color-bg-tertiary: #242422;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);

  --color-text-primary: #f5f5f2;
  --color-text-secondary: #c0c0b8;
  --color-text-tertiary: #8a8a82;
  --color-text-muted: #5a5a55;

  --color-accent: #e07040;
  --color-accent-hover: #f08050;
  --color-accent-active: #d06030;
  --color-accent-muted: rgba(224, 112, 64, 0.12);
  --color-accent-gradient: linear-gradient(135deg, #e07040 0%, #f09060 50%, #8aaaba 100%);

  --color-success: #5ca86c;
  --color-success-bg: rgba(92, 168, 108, 0.15);
  --color-warning: #d4a020;
  --color-warning-bg: rgba(212, 160, 32, 0.15);
  --color-error: #d85050;
  --color-error-bg: rgba(216, 80, 80, 0.15);
  --color-info: #7a9aaa;
  --color-info-bg: rgba(122, 154, 170, 0.15);

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-border-hover: rgba(212, 114, 74, 0.4);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Base styles using CSS variables */
body {
  font-family: var(--font-sans);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background-color var(--motion-normal) var(--easing),
              color var(--motion-normal) var(--easing);
}

/* Common card styles */
.card, .container {
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

/* Status colors */
.status-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-warning, .status-checking {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.status-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* Link colors */
a {
  color: var(--color-accent);
  transition: color var(--motion-fast) var(--easing);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Button base */
.btn {
  font-family: var(--font-sans);
  transition: all var(--motion-fast) var(--easing);
}

.btn-primary {
  background: var(--color-accent);
  color: white;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-primary:active {
  background: var(--color-accent-active);
}

/* Info sections */
.info-section, .wallet-info, .guide {
  background: var(--color-bg-tertiary);
}

/* Border colors */
.bordered {
  border-color: var(--color-border);
}

/* Monospace text */
code, pre, .mono {
  font-family: var(--font-mono);
}

/* Theme toggle button (optional) */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 1000;
  transition: all var(--motion-fast) var(--easing);
}

.theme-toggle:hover {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

/* Language selector (optional) */
.lang-selector {
  position: fixed;
  top: 16px;
  right: 64px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  z-index: 1000;
  transition: all var(--motion-fast) var(--easing);
}

.lang-selector:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}