/* src/styles/tokens.css */
@import './typography.css';

:root {
  /* Default Dark Mode - Strict Black & White */
  --color-background: #000000;
  --color-surface: #111111;
  --color-primary: #ffffff;
  --color-secondary: #e5e5e5;
  --color-accent: #ffffff;
  --color-text: #ffffff;
  --color-text-muted: #9e9e9e;
  
  /* State Colors mapped to Grayscale */
  --color-state-success: #ffffff;
  --color-state-warning: #a3a3a3;
  --color-state-error: #888888;
  --color-state-info: #d4d4d4;

  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 7.5rem;

  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* Animation Easings */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light Mode Override */
:root[data-theme='light'], :root.light, :root.rust, :root.ayu {
  --color-background: #ffffff;
  --color-surface: #f5f5f5;
  --color-primary: #000000;
  --color-secondary: #333333;
  --color-accent: #000000;
  --color-text: #000000;
  --color-text-muted: #666666;
  
  --color-state-success: #000000;
  --color-state-warning: #666666;
  --color-state-error: #333333;
  --color-state-info: #111111;
}

.theme-toggle-icon {
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 100;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

@media (min-width: 1024px) {
  .theme-toggle-icon {
    /* Position handled by wrapper now */
  }
}

.theme-toggle-icon:hover {
  background-color: var(--color-surface);
}

.theme-toggle-icon svg {
  width: 24px;
  height: 24px;
  transition: transform var(--duration-normal) var(--easing-bounce);
}

.sun-icon { display: block; }
.moon-icon { display: none; }
:root[data-theme='light'] .sun-icon, :root.light .sun-icon, :root.rust .sun-icon, :root.ayu .sun-icon { display: none; }
:root[data-theme='light'] .moon-icon, :root.light .moon-icon, :root.rust .moon-icon, :root.ayu .moon-icon { display: block; }

/* Responsive Spacing for Mobile */
@media (max-width: 768px) {
  :root, :root[data-theme='light'], :root.light, :root.rust, :root.ayu {
    --spacing-lg: 1.25rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
  }
}