/* Material Design 3 Color Roles
 * ==========================================================================
 * Maps the color palette to semantic MD3 roles for consistent theming
 */

:root {
  /* Core Color Roles
   * --------------------------------------------------------------------------
   * Main brand colors and their text/icon overlays
   */

  /* Primary - Main brand color (forest green) */
  --color-primary: var(--color-primary-600);
  --color-ink--primary: var(--color-white);

  /* Secondary - Supporting brand color (teal-green) */
  --color-secondary: var(--color-secondary-600);
  --color-ink--secondary: var(--color-white);

  /* Tertiary - Accent color (burgundy) */
  --color-tertiary: var(--color-tertiary-600);
  --color-ink--tertiary: var(--color-white);

  /* Error - System error color */
  --color-error: var(--color-error-600);
  --color-ink--error: var(--color-white);

  /* Container Colors
   * --------------------------------------------------------------------------
   * Lighter backgrounds with corresponding text colors
   */

  --color-bg--primary-container: var(--color-primary-100);
  --color-ink--primary-container: var(--color-primary-900);

  --color-bg--secondary-container: var(--color-secondary-100);
  --color-ink--secondary-container: var(--color-secondary-900);

  --color-bg--tertiary-container: var(--color-tertiary-100);
  --color-ink--tertiary-container: var(--color-tertiary-900);

  --color-bg--error-container: var(--color-error-100);
  --color-ink--error-container: var(--color-error-900);

  /* Five-Level Surface Hierarchy
   * --------------------------------------------------------------------------
   * Based on our design philosophy: Canvas, Surface, Container, Overlay, Inverse
   */

  /* Level 0: Canvas - Base background */
  --color-bg--canvas: var(--color-stone-50);
  --color-ink--canvas: var(--color-stone-900);

  /* Level 1: Surface - Primary content containers */
  --color-bg--surface: var(--color-stone-100);
  --color-ink--surface: var(--color-stone-900);

  /* Level 2: Container - Cards and raised elements */
  --color-bg--container: var(--color-stone-200);
  --color-ink--container: var(--color-stone-900);

  /* Level 3: Overlay - Standard modals and popups */
  --color-bg--overlay: white;
  --color-ink--overlay: var(--color-stone-900);

  /* Supporting Elements
   * --------------------------------------------------------------------------
   * Borders, shadows, and special surfaces
   */

  --color-border: var(--color-stone-400);
  --color-border--light: var(--color-stone-300);

  --color-shadow: var(--color-black);
  --color-scrim: var(--color-black);

  /* Inverse - For inverted UI elements like snackbars */
  --color-bg--inverse: var(--color-stone-900);
  --color-ink--inverse: var(--color-stone-100);
  --color-primary--inverse: var(--color-primary-300);
  --color-error--inverse: var(--color-error-300);

  /* Fixed Colors
   * --------------------------------------------------------------------------
   * Colors that don't change between light/dark modes
   */

  --color-bg--tint: var(--color-primary);
  --color-tint: var(--color-primary);

  /* Surface Transparency Variants
   * --------------------------------------------------------------------------
   * For overlays, loading states, and special effects
   */

  --color-bg--surface-transparent: oklch(from var(--color-bg--surface) l c h / 0);
  --color-bg--surface-thin: oklch(from var(--color-bg--surface) l c h / 0.5);
  --color-bg--surface-thick: oklch(from var(--color-bg--surface) l c h / 0.95);

  --color-bg--container-thin: oklch(from var(--color-bg--container) l c h / 0.5);
  --color-bg--overlay-thick: oklch(from var(--color-bg--overlay) l c h / 0.95);
}

/* Dark Mode Overrides
 * ==========================================================================
 * Adjusts all color roles for dark color scheme
 */

[data-color-scheme="dark"] {
  /* Core Color Roles - Use lighter shades */
  --color-primary: var(--color-primary-400);
  --color-ink--primary: var(--color-primary-950);

  --color-secondary: var(--color-secondary-400);
  --color-ink--secondary: var(--color-secondary-950);

  --color-tertiary: var(--color-tertiary-400);
  --color-ink--tertiary: var(--color-tertiary-950);

  --color-error: var(--color-error-400);
  --color-ink--error: var(--color-error-950);

  /* Container Colors - Use darker containers */
  --color-bg--primary-container: var(--color-primary-800);
  --color-ink--primary-container: var(--color-primary-100);

  --color-bg--secondary-container: var(--color-secondary-800);
  --color-ink--secondary-container: var(--color-secondary-100);

  --color-bg--tertiary-container: var(--color-tertiary-800);
  --color-ink--tertiary-container: var(--color-tertiary-100);

  --color-bg--error-container: var(--color-error-900);
  --color-ink--error-container: var(--color-error-100);

  /* Five-Level Surface Hierarchy - Dark Mode */
  --color-bg--canvas: var(--color-stone-950);
  --color-ink--canvas: var(--color-stone-100);

  --color-bg--surface: var(--color-stone-900);
  --color-ink--surface: var(--color-stone-100);

  --color-bg--container: var(--color-stone-800);
  --color-ink--container: var(--color-stone-100);

  --color-bg--overlay: var(--color-stone-850);
  --color-ink--overlay: var(--color-stone-100);

  /* Supporting Elements */
  --color-border: var(--color-stone-600);
  --color-border--light: var(--color-stone-700);

  /* Inverse - Flipped for dark mode */
  --color-bg--inverse: var(--color-stone-100);
  --color-ink--inverse: var(--color-stone-900);
  --color-primary--inverse: var(--color-primary-600);
  --color-error--inverse: var(--color-error-600);

  /* Lexxy Code Editor/Viewer Variables
   * --------------------------------------------------------------------------
   * Custom variables for the Lexxy component in dark mode
   */

  /* Lexxy Ink Colors */
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(75% 0 0);
  --lexxy-color-ink-light: oklch(55% 0 0);
  --lexxy-color-ink-lighter: oklch(40% 0 0);
  --lexxy-color-ink-lightest: oklch(25% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  /* Lexxy Accent Colors - Using site's primary (green) color scheme */
  --lexxy-color-accent-dark: oklch(70% 0.15 145);      /* Forest green */
  --lexxy-color-accent-medium: oklch(75% 0.12 145);    /* Medium green */
  --lexxy-color-accent-light: oklch(45% 0.04 145);     /* Light green tint */
  --lexxy-color-accent-lightest: oklch(35% 0.04 145);  /* Lightest green tint */

  /* Lexxy Semantic Colors */
  --lexxy-color-red: oklch(70% 0.15 27);     /* Error/deletion */
  --lexxy-color-green: oklch(70% 0.15 145);  /* Success/addition */
  --lexxy-color-blue: oklch(75% 0.12 240);   /* Info/links */
  --lexxy-color-purple: oklch(70% 0.15 305); /* Special/keywords */

  /* Lexxy Code Syntax Highlighting */
  --lexxy-color-code-token-att: #ff7b72;         /* Attributes - red */
  --lexxy-color-code-token-comment: #8b949e;     /* Comments - gray */
  --lexxy-color-code-token-function: #d2a8ff;    /* Functions - purple */
  --lexxy-color-code-token-operator: #ff7b72;    /* Operators - red */
  --lexxy-color-code-token-property: #79c0ff;    /* Properties - blue */
  --lexxy-color-code-token-punctuation: #f0f6fc; /* Punctuation - light gray */
  --lexxy-color-code-token-selector: #7ee787;    /* Selectors - green */
  --lexxy-color-code-token-variable: #ffa657;    /* Variables - orange */

  /* Lexxy Shadow */
  --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);
}

/* System Preference Fallback
 * ==========================================================================
 * For CSS-only contexts without JavaScript
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    /* Core Color Roles */
    --color-primary: var(--color-primary-400);
    --color-ink--primary: var(--color-primary-950);

    --color-secondary: var(--color-secondary-400);
    --color-ink--secondary: var(--color-secondary-950);

    --color-tertiary: var(--color-tertiary-400);
    --color-ink--tertiary: var(--color-tertiary-950);

    --color-error: var(--color-error-400);
    --color-ink--error: var(--color-error-950);

    /* Container Colors */
    --color-bg--primary-container: var(--color-primary-800);
    --color-ink--primary-container: var(--color-primary-100);

    --color-bg--secondary-container: var(--color-secondary-800);
    --color-ink--secondary-container: var(--color-secondary-100);

    --color-bg--tertiary-container: var(--color-tertiary-800);
    --color-ink--tertiary-container: var(--color-tertiary-100);

    --color-bg--error-container: var(--color-error-900);
    --color-ink--error-container: var(--color-error-100);

    /* Four-Level Surface Hierarchy - Dark Mode */
    --color-bg--canvas: var(--color-stone-950);
    --color-ink--canvas: var(--color-stone-100);

    --color-bg--surface: var(--color-stone-900);
    --color-ink--surface: var(--color-stone-100);

    --color-bg--container: var(--color-stone-800);
    --color-ink--container: var(--color-stone-100);

    --color-bg--overlay: var(--color-primary-800);
    --color-ink--overlay: var(--color-primary-100);

    /* Supporting Elements */
    --color-border: var(--color-stone-600);
    --color-border--light: var(--color-stone-700);

    /* Inverse */
    --color-bg--inverse: var(--color-stone-100);
    --color-ink--inverse: var(--color-stone-900);
    --color-primary--inverse: var(--color-primary-600);

    /* Lexxy Code Editor/Viewer Variables */
    --lexxy-color-ink: oklch(96% 0 0);
    --lexxy-color-ink-medium: oklch(75% 0 0);
    --lexxy-color-ink-light: oklch(55% 0 0);
    --lexxy-color-ink-lighter: oklch(40% 0 0);
    --lexxy-color-ink-lightest: oklch(25% 0 0);
    --lexxy-color-ink-inverted: oklch(15% 0 0);

    --lexxy-color-accent-dark: oklch(70% 0.15 145);
    --lexxy-color-accent-medium: oklch(75% 0.12 145);
    --lexxy-color-accent-light: oklch(45% 0.04 145);
    --lexxy-color-accent-lightest: oklch(35% 0.04 145);

    --lexxy-color-red: oklch(70% 0.15 27);
    --lexxy-color-green: oklch(70% 0.15 145);
    --lexxy-color-blue: oklch(75% 0.12 240);
    --lexxy-color-purple: oklch(70% 0.15 305);

    --lexxy-color-code-token-att: #ff7b72;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #f0f6fc;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;

    --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);
  }
}