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

/* globals.css - Basic global styles */

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--codex-font-family);
  background: var(--codex-bg-secondary);
  color: var(--codex-text-primary);
}

.app-layout {
  display: flex;
  min-height: 100vh;
}

.global-sidebar {
  width: 220px;
  background: var(--codex-bg-primary);
  border-right: 1px solid var(--codex-border-light);
  padding: var(--codex-spacing-md) 0;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  background: var(--codex-bg-primary);
  border-bottom: 1px solid var(--codex-border-light);
  padding: var(--codex-spacing-md);
}

/* Dark mode overrides */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #root {
  background: var(--codex-bg-secondary);
  color: var(--codex-text-primary);
}

[data-theme="dark"] .global-sidebar {
  background: var(--codex-bg-secondary);
  border-right: 1px solid var(--codex-border-medium);
}

[data-theme="dark"] .topbar {
  background: var(--codex-bg-secondary);
  border-bottom: 1px solid var(--codex-border-medium);
}

/* TODO: Add theming, color variables, and design system integration */ 
/**
 * Codex Design System - Theme CSS Variables
 * 
 * This file defines CSS variables for light and dark mode themes.
 * Variables are accessible via var(--codex-variable-name) in component styles.
 */

:root {
  /* Light mode (default) */
  --codex-bg-primary: #ffffff;
  --codex-bg-secondary: #f8f9fa;
  --codex-bg-tertiary: #e9ecef;

  --codex-text-primary: #000000;
  --codex-text-secondary: #343a40;
  --codex-text-tertiary: #6c757d;

  --codex-border-light: #dee2e6;
  --codex-border-medium: #adb5bd;
  --codex-border-dark: #495057;

  --codex-accent: #f7931a; /* Bitcoin orange */
  --codex-accent-light: #ffbf69;
  --codex-accent-dark: #e67e22;

  --codex-success: #28a745;
  --codex-warning: #ffc107;
  --codex-error: #dc3545;
  --codex-info: #17a2b8;

  /* Icon colors */
  --codex-icon-primary: #000000;
  --codex-icon-secondary: #495057;
  --codex-icon-tertiary: #6c757d;
  --codex-icon-accent: #f7931a;

  /* Chart colors */
  --codex-chart-primary: #000000;
  --codex-chart-support: #006600;
  --codex-chart-declining: #990000;
  --codex-chart-recovering: #ff6600;
  --codex-chart-codex: #0066cc;
  --codex-chart-gdr: #339999;
  --codex-chart-price-trend: #ff6600;
  --codex-chart-rsi: #ff9900;
  --codex-chart-macd-line: #3366cc;
  --codex-chart-signal-line: #cc0000;
  --codex-chart-macd-positive: #33cc33;
  --codex-chart-macd-negative: #ff3333;
  --codex-chart-histogram: rgba(153, 153, 153, 0.25);

  /* Shadows */
  --codex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --codex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --codex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Typography */
  --codex-font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue",
    Courier New, monospace, sans-serif;

  /* Spacing */
  --codex-spacing-xs: 0.25rem;
  --codex-spacing-sm: 0.5rem;
  --codex-spacing-md: 1rem;
  --codex-spacing-lg: 1.5rem;
  --codex-spacing-xl: 2rem;

  /* Transitions */
  --codex-transition-fast: 150ms ease;
  --codex-transition-normal: 250ms ease;
  --codex-transition-slow: 350ms ease;
}

/* Dark mode */
[data-theme="dark"] {
  --codex-bg-primary: #121212;
  --codex-bg-secondary: #1e1e1e;
  --codex-bg-tertiary: #2d2d2d;

  --codex-text-primary: #ffffff;
  --codex-text-secondary: #e0e0e0;
  --codex-text-tertiary: #bdbdbd;

  --codex-border-light: #424242;
  --codex-border-medium: #616161;
  --codex-border-dark: #9e9e9e;

  --codex-accent: #f7931a; /* Bitcoin orange - unchanged */
  --codex-accent-light: #ffbb33;
  --codex-accent-dark: #cc7a14;

  --codex-success: #4caf50;
  --codex-warning: #ffc107;
  --codex-error: #f44336;
  --codex-info: #29b6f6;

  /* Icon colors */
  --codex-icon-primary: #ffffff;
  --codex-icon-secondary: #e0e0e0;
  --codex-icon-tertiary: #bdbdbd;
  --codex-icon-accent: #f7931a;

  /* Chart colors */
  --codex-chart-primary: #ffffff;
  --codex-chart-support: #4caf50;
  --codex-chart-declining: #f44336;
  --codex-chart-recovering: #ff9800;
  --codex-chart-codex: #42a5f5;
  --codex-chart-gdr: #26a69a;
  --codex-chart-price-trend: #ff9800;
  --codex-chart-rsi: #ffc107;
  --codex-chart-macd-line: #5c6bc0;
  --codex-chart-signal-line: #ef5350;
  --codex-chart-macd-positive: #66bb6a;
  --codex-chart-macd-negative: #ef5350;
  --codex-chart-histogram: rgba(153, 153, 153, 0.35);

  /* Shadows - darker and more intense */
  --codex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --codex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --codex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* For proper theme flashing prevention, add this to your global CSS */
.theme-transition {
  transition:
    background-color var(--codex-transition-normal),
    color var(--codex-transition-normal),
    border-color var(--codex-transition-normal),
    box-shadow var(--codex-transition-normal);
}

/* Conditional drop shadow for icons and charts */
.icon-drop-shadow,
.chart-line {
  filter: drop-shadow(0px 0px 1px #ffffff);
}

[data-theme="dark"] .icon-drop-shadow,
[data-theme="dark"] .chart-line {
  filter: drop-shadow(0px 0px 1px #000000);
}

img[src*="logo-light.svg"],
img[src*="logo-dark.svg"] {
  width: 45px;
  height: 45px;
  cursor: pointer;
  transition:
    transform 0.1s ease-out,
    filter 0.2s ease-out;
}

/* Logo-light hover effect (white glow) */
img[src*="logo-light.svg"]:hover {
  transform: scale(1.02);
  filter: drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #fff);
}

/* Logo-dark hover effect (black depth shadow in dark theme) */
img[src*="logo-dark.svg"]:hover {
  transform: scale(1.02);
}

[data-theme="dark"] img[src*="logo-dark.svg"]:hover {
  filter: drop-shadow(0px 0px 1px #424242) drop-shadow(0px 0px 1px #424242);
}

/* Add click handler for logo */
img[src*="logo-light.svg"],
img[src*="logo-dark.svg"] {
  cursor: pointer;
}

img[src*="logo-light.svg"]:active,
img[src*="logo-dark.svg"]:active {
  transform: scale(0.98);
}