/**
 * Aktagon Design Tokens - Light Theme
 * Auto-generated from tokens.json
 * Include after tokens.css to enable light mode
 */

/* Light theme when data-theme="light" is set */
[data-theme="light"] {
  --color-semantic-background-primary: #fffff8;
  --color-semantic-background-secondary: #f5f5f5;
  --color-semantic-background-tertiary: #e5e5e5;
  --color-semantic-background-elevated: #ffffff;
  --color-semantic-background-surface: #ffffff;
  --color-semantic-background-overlay: rgba(255, 255, 255, 0.8);
  --color-semantic-background-overlay-strong: rgba(255, 255, 255, 0.95);
  --color-semantic-text-primary: #111111;
  --color-semantic-text-secondary: #555555;
  --color-semantic-text-muted: #888888;
  --color-semantic-text-link-hover: #0066cc;
  --color-semantic-border-default: #dddddd;
  --color-semantic-border-subtle: rgba(0, 0, 0, 0.15);
  --color-semantic-interactive-hover: rgba(0, 0, 0, 0.05);
  --color-semantic-interactive-active: rgba(59, 130, 246, 0.15);
  --color-component-button-primary-bg: #111111;
  --color-component-button-primary-text: #ffffff;
  --color-component-button-primary-hover: #333333;
  --color-component-button-secondary-bg: #f0f0f0;
  --color-component-button-secondary-text: #111111;
  --color-component-button-secondary-border: #dddddd;
  --color-component-button-secondary-hover-border: #cccccc;
  --color-component-button-secondary-hover-bg: #e0e0e0;
  --shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.2);
  --shadow-focus-strong: 0 0 0 3px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Auto light theme based on system preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-semantic-background-primary: #fffff8;
    --color-semantic-background-secondary: #f5f5f5;
    --color-semantic-background-tertiary: #e5e5e5;
    --color-semantic-background-elevated: #ffffff;
    --color-semantic-background-surface: #ffffff;
    --color-semantic-background-overlay: rgba(255, 255, 255, 0.8);
    --color-semantic-background-overlay-strong: rgba(255, 255, 255, 0.95);
    --color-semantic-text-primary: #111111;
    --color-semantic-text-secondary: #555555;
    --color-semantic-text-muted: #888888;
    --color-semantic-text-link-hover: #0066cc;
    --color-semantic-border-default: #dddddd;
    --color-semantic-border-subtle: rgba(0, 0, 0, 0.15);
    --color-semantic-interactive-hover: rgba(0, 0, 0, 0.05);
    --color-semantic-interactive-active: rgba(59, 130, 246, 0.15);
    --color-component-button-primary-bg: #111111;
    --color-component-button-primary-text: #ffffff;
    --color-component-button-primary-hover: #333333;
    --color-component-button-secondary-bg: #f0f0f0;
    --color-component-button-secondary-text: #111111;
    --color-component-button-secondary-border: #dddddd;
    --color-component-button-secondary-hover-border: #cccccc;
    --color-component-button-secondary-hover-bg: #e0e0e0;
    --shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.2);
    --shadow-focus-strong: 0 0 0 3px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}