/**
 * Semantic Theme Tokens
 * These tokens are theme-agnostic and map to actual colors in theme files
 * DO NOT define colors here - only structure
 * Actual colors are defined in ocean.css, desert.css, forest.css
 */

:root {
  /* Background Tokens */
  --bg-base: #001219;
  --bg-surface: #005F73;
  --bg-overlay: #003847;
  --bg-input: #001219;
  --bg-hover: #007A8C;
  --bg-elevated: #003847;

  /* Text Tokens */
  --text-primary: #E9D8A6;
  --text-secondary: #94D2BD;
  --text-tertiary: #7BA5A8;
  --text-inverse: #001219;
  --text-muted: rgba(148, 210, 189, 0.7);
  --text-positive: #94D2BD;     /* Pearl Aqua - for positive values */
  --text-negative: #F4A582;     /* Soft Coral - for negative values */

  /* Brand Tokens */
  --brand-primary: #EE9B00;
  --brand-secondary: #0A9396;
  --brand-accent: #94D2BD;
  --brand-hover: #CA6702;

  /* Interactive Tokens */
  --interactive-default: #0A9396;
  --interactive-hover: #94D2BD;
  --interactive-active: #EE9B00;
  --interactive-disabled: rgba(148, 210, 189, 0.3);

  /* Border Tokens */
  --border-default: rgba(148, 210, 189, 0.2);
  --border-muted: rgba(148, 210, 189, 0.1);
  --border-focus: #0A9396;
  --border-error: #AE2012;

  /* Status Tokens */
  --status-success: #94D2BD;
  --status-success-bg: rgba(148, 210, 189, 0.2);
  --status-warning: #BB3E03;
  --status-warning-bg: rgba(187, 62, 3, 0.2);
  --status-error: #AE2012;
  --status-error-bg: rgba(174, 32, 18, 0.2);
  --status-info: #0A9396;
  --status-info-bg: rgba(10, 147, 150, 0.2);
  --status-danger: #9B2226;
  --status-danger-bg: rgba(155, 34, 38, 0.2);

  /* Shadow Tokens */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Button Tokens - for themed button colors (Ocean theme defaults) */
  --btn-default: #0A9396;       /* Dark Cyan */
  --btn-default-hover: #007A8C; /* Darker Cyan */
  --btn-active: #EE9B00;        /* Golden Orange */
  --btn-active-hover: #CA6702;  /* Burnt Caramel */
  --btn-buy: #0A9396;           /* Cyan */
  --btn-buy-hover: #007A8C;     /* Darker Cyan */
  --btn-buy-active: #EE9B00;    /* Golden */
  --btn-sell: #9B2226;          /* Brown Red */
  --btn-sell-hover: #7A1B1E;    /* Darker Red */
  --btn-sell-active: #AE2012;   /* Iron Red */
  --btn-warning: #BB3E03;       /* Rusty Spice */
  --btn-warning-hover: #9A3302; /* Darker Spice */
  --btn-danger: #9B2226;        /* Brown Red */
  --btn-danger-hover: #7A1B1E;  /* Darker Brown Red */
}

/* Base styles with smooth transitions */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Selection colors */
::selection {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

::-moz-selection {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-surface);
  border-radius: 6px;
  border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-secondary);
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}