/**
 * OnePixel Website - Color System
 * Light & Dark Theme Support
 * Based on OnePixel Plugin color tokens
 */

:root {
  /* ============================================
     PRIMITIVE COLORS (Base Palette)
     ============================================ */
  
  /* Purple Scale */
  --purple-100: #F2E7FF;    /* Very light purple background */
  --purple-300: #BB8FF4;    /* Light purple */
  --purple-400: #A166EE;    /* Primary purple (dark theme) */
  --purple-500: #771FE9;    /* Primary purple (light theme) */
  --purple-600: #5C0FBF;    /* Dark purple accent */
  --purple-650: #8D36FF;    /* Purple accent (dark theme) */
  
  /* Orange Scale */
  --orange-300: #F4C588;    /* Light orange */
  --orange-400: #EE9520;    /* Warning/No selection state */
  --orange-500: #EA8C11;    /* Primary orange */
  --orange-600: #D67F0E;    /* Dark orange accent */
  
  /* Gray Scale */
  --gray-100: #1D1D1D;      /* Dark background (dark theme) */
  --gray-125: #E3EAE4;      /* Site background (light theme) */
  --gray-150: #F9FBFF;      /* Very light background */
  --gray-200: #F4F3F0;      /* Light background */
  --gray-250: #C2C2C2;      /* Border (dark theme) */
  --gray-300: #D5D5D5;      /* Border (light theme) */
  --gray-500: #C4C4C4;      /* Text (dark theme) */
  --gray-700: #676767;      /* Secondary text */
  --gray-900: #2C2C2C;      /* Primary text / Dark bg */
  
  /* System Colors */
  --white: #FFFFFF;
  --black: #000000;
  
  /* Special Colors */
  --green: #74A002;         /* Tutorial/Success */
  
  /* ============================================
     SEMANTIC TOKENS - Light Theme (Default)
     ============================================ */
  
  /* Background */
  --bg-primary: var(--gray-125);
  --bg-secondary: var(--gray-150);
  --bg-tertiary: var(--gray-200);
  --bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--white);
  --text-color: var(--gray-700);

  /* Tutorial Colors */
  --tutorial-svg-primary: #771FE9;
  --tutorial-svg-accent: #5C0FBF;
  --tutorial-svg-text: white;
  --tutorial-icon-text: white;
  --plugin-bg: var(--bg-primary);

  /* Border */
  --border-primary: var(--gray-300);
  --border-secondary: var(--gray-300);
  --border-light: var(--gray-250);
  
  /* Button - Primary (Purple) */
  --button-primary-bg: var(--purple-500);
  --button-primary-bg-hover: var(--purple-600);
  --button-primary-bg-active: var(--purple-600);
  --button-primary-text: var(--white);
  --button-primary-border: var(--purple-600);
  
  /* Button - Secondary (Orange) */
  --button-secondary-bg: var(--orange-500);
  --button-secondary-bg-hover: var(--orange-600);
  --button-secondary-bg-active: var(--orange-600);
  --button-secondary-text: var(--white);
  --button-secondary-border: var(--orange-600);
  
  /* Button - Tertiary (Green) */
  --button-tertiary-bg: var(--green);
  --button-tertiary-bg-hover: #6C9503;
  --button-tertiary-bg-active: #6C9503;
  --button-tertiary-text: var(--white);
  
  /* Accent Colors */
  --accent-purple: var(--purple-500);
  --accent-purple-light: var(--purple-100);
  --accent-orange: var(--orange-500);
  --accent-orange-warning: var(--orange-400);
  
  /* State Colors */
  --state-hover: var(--purple-100);
  --state-active: var(--purple-500);
  --state-disabled: var(--purple-300);
  
  /* Shadow */
  --shadow-sm: 0px 2px 4px 0px rgba(119, 31, 233, 0.3);
  --shadow-md: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  --shadow-inner: inset 0px -1px 0px 0px;

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Body Small - 14px/20px, Regular 400 */
  --font-size-body-small: 14px;
  --line-height-body-small: 20px;
  --font-weight-body-small: 400;

  /* Body Medium - 16px/22px, Regular 400 */
  --font-size-body-medium: 16px;
  --line-height-body-medium: 22px;
  --font-weight-body-medium: 400;

  /* Body Large - Responsive (Light 300) */
  /* XXL screens (>= 1920px): 20px/28px */
  /* XL screens (>= 1200px): 18px/24px */
  /* Smaller screens (< 1200px): 16px/22px */
  --font-size-body-large: 18px;
  --line-height-body-large: 24px;
  --font-weight-body-large: 300;
}

/* Body Large - XXL screens */
@media (min-width: 1920px) {
  :root {
    --font-size-body-large: 20px;
    --line-height-body-large: 28px;
  }
}

/* Body Large - responsive override for smaller screens */
@media (max-width: 1199px) {
  :root {
    --font-size-body-large: 16px;
    --line-height-body-large: 22px;
  }
}

/* ============================================
   DARK THEME OVERRIDE
   ============================================ */
:root[data-theme="dark"] {
  /* Background */
  --bg-primary: var(--gray-900);
  --bg-secondary: var(--gray-100);
  --bg-tertiary: var(--gray-100);
  
  /* Text */
  --text-primary: var(--gray-500);
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-700);
  --text-inverse: var(--gray-900);
  
  /* Border */
  --border-primary: var(--gray-100);
  --border-secondary: var(--gray-250);
  --border-light: rgba(194, 194, 194, 0.5);
  
  /* Button - Primary (Purple) - Dark Theme */
  --button-primary-bg: var(--purple-400);
  --button-primary-bg-hover: var(--purple-650);
  --button-primary-bg-active: var(--purple-650);
  --button-primary-text: var(--gray-900);
  --button-primary-border: var(--purple-650);
  
  /* Button - Secondary (Orange) - Same in dark */
  --button-secondary-bg: var(--orange-500);
  --button-secondary-text: var(--white);
  
  /* Accent Colors */
  --accent-purple: var(--purple-400);
  --accent-purple-light: var(--white);
  
  /* State Colors */
  --state-hover: #261c49;
  --state-active: var(--purple-400);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background utilities */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }

/* Text utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-inverse { color: var(--text-inverse); }

/* Border utilities */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }

/* Button utilities */
.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid var(--button-primary-border);
}

.btn-primary:hover {
  background: var(--button-primary-bg-hover);
}

.btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: 1px solid var(--button-secondary-border);
}

.btn-secondary:hover {
  background: var(--button-secondary-bg-hover);
}

/* ============================================
   THEME TOGGLE
   ============================================ */

/* Toggle dark theme with data-theme attribute on root element */
/* Example: document.documentElement.setAttribute('data-theme', 'dark'); */