/* 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
   */

  /* Backgrounds */
  --color-bg--surface:   var(--color-stone-50);   /* white — panels, cards, sheets */
  --color-bg--canvas:    var(--color-stone-100);   /* warm cream — page background */
  --color-bg--container: var(--color-stone-200);   /* subtle — grouped UI, hover */

  /* Text */
  --color-ink--surface:  var(--color-stone-900);   /* near-black — body text on surfaces */
  --color-ink--canvas:   var(--color-stone-900);   /* body text on canvas */
  --color-ink--container: var(--color-stone-900);

  /* Muted text */
  --color-ink--muted:    var(--color-stone-500);   /* secondary/meta text */

  /* Borders */
  --color-border--subtle: oklch(0 0 0 / 0.06);    /* Basecamp-style transparent black */
  --color-border--default: var(--color-stone-300);

  /* 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);

  /* Lexxy Code Editor/Viewer Variables - Light Mode
   * --------------------------------------------------------------------------
   * Override gem defaults to use site's green accent instead of purple
   */

  /* Lexxy Ink Colors - dark text on light background */
  --lexxy-color-ink: oklch(20% 0 0);
  --lexxy-color-ink-medium: oklch(40% 0 0);
  --lexxy-color-ink-light: oklch(60% 0 0);
  --lexxy-color-ink-lighter: oklch(85% 0 0);
  --lexxy-color-ink-lightest: oklch(96% 0 0);
  --lexxy-color-ink-inverted: white;

  /* Lexxy Accent Colors - Using site's primary (green) color scheme */
  --lexxy-color-accent-dark: oklch(45% 0.15 145);      /* Dark forest green */
  --lexxy-color-accent-medium: oklch(55% 0.12 145);    /* Medium green */
  --lexxy-color-accent-light: oklch(88% 0.04 145);     /* Light green tint */
  --lexxy-color-accent-lightest: oklch(94% 0.02 145);  /* Lightest green tint */

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

  /* Lexxy Code Syntax Highlighting - GitHub Light Theme */
  --lexxy-color-code-token-att: #d73a49;         /* Attributes - red */
  --lexxy-color-code-token-comment: #6a737d;     /* Comments - gray */
  --lexxy-color-code-token-function: #6f42c1;    /* Functions - purple */
  --lexxy-color-code-token-operator: #d73a49;    /* Operators - red */
  --lexxy-color-code-token-property: #005cc5;    /* Properties - blue */
  --lexxy-color-code-token-punctuation: #24292e; /* Punctuation - near-black */
  --lexxy-color-code-token-selector: #22863a;    /* Selectors - green */
  --lexxy-color-code-token-variable: #e36209;    /* Variables - orange */

  /* Lexxy Canvas & Text */
  --lexxy-color-canvas: white;
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  /* Lexxy Tables */
  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);

  /* Lexxy Shadow */
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Lexxy Text Highlight Colors - Light Mode */
  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3);
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3);
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3);
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);
}

/* 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 - Dark Mode
   * --------------------------------------------------------------------------
   * Inverted lightness values for dark backgrounds
   */

  /* Lexxy Ink Colors - light text on dark background */
  --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 - Brighter greens for dark mode */
  --lexxy-color-accent-dark: oklch(70% 0.15 145);      /* Bright forest green */
  --lexxy-color-accent-medium: oklch(75% 0.12 145);    /* Medium green */
  --lexxy-color-accent-light: oklch(45% 0.04 145);     /* Muted green tint */
  --lexxy-color-accent-lightest: oklch(35% 0.04 145);  /* Dark 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 - GitHub Dark Theme */
  --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 Canvas & Text - Dark Mode */
  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  /* Lexxy Tables - Dark Mode */
  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);

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

  /* Lexxy Text Highlight Colors - Dark Mode (brighter for visibility) */
  --highlight-1: rgb(229, 223, 100);
  --highlight-2: rgb(255, 185, 87);
  --highlight-3: rgb(255, 118, 118);
  --highlight-4: rgb(248, 137, 216);
  --highlight-5: rgb(190, 165, 255);
  --highlight-6: rgb(124, 192, 252);
  --highlight-7: rgb(140, 255, 129);
  --highlight-8: rgb(221, 170, 123);
  --highlight-9: rgb(180, 180, 180);

  --highlight-bg-1: rgba(229, 223, 6, 0.25);
  --highlight-bg-2: rgba(255, 185, 87, 0.25);
  --highlight-bg-3: rgba(255, 118, 118, 0.25);
  --highlight-bg-4: rgba(248, 137, 216, 0.25);
  --highlight-bg-5: rgba(190, 165, 255, 0.25);
  --highlight-bg-6: rgba(124, 192, 252, 0.25);
  --highlight-bg-7: rgba(140, 255, 129, 0.25);
  --highlight-bg-8: rgba(221, 170, 123, 0.25);
  --highlight-bg-9: rgba(200, 200, 200, 0.25);
}

/* 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 - Dark Mode */
    --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-color-canvas: var(--lexxy-color-ink-inverted);
    --lexxy-color-text: var(--lexxy-color-ink);
    --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
    --lexxy-color-link: var(--lexxy-color-accent-dark);
    --lexxy-color-selected: var(--lexxy-color-accent-lightest);
    --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
    --lexxy-color-selected-dark: var(--lexxy-color-blue);
    --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

    --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
    --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
    --lexxy-color-table-cell-selected: var(--lexxy-color-selected);

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

    --highlight-1: rgb(229, 223, 100);
    --highlight-2: rgb(255, 185, 87);
    --highlight-3: rgb(255, 118, 118);
    --highlight-4: rgb(248, 137, 216);
    --highlight-5: rgb(190, 165, 255);
    --highlight-6: rgb(124, 192, 252);
    --highlight-7: rgb(140, 255, 129);
    --highlight-8: rgb(221, 170, 123);
    --highlight-9: rgb(180, 180, 180);

    --highlight-bg-1: rgba(229, 223, 6, 0.25);
    --highlight-bg-2: rgba(255, 185, 87, 0.25);
    --highlight-bg-3: rgba(255, 118, 118, 0.25);
    --highlight-bg-4: rgba(248, 137, 216, 0.25);
    --highlight-bg-5: rgba(190, 165, 255, 0.25);
    --highlight-bg-6: rgba(124, 192, 252, 0.25);
    --highlight-bg-7: rgba(140, 255, 129, 0.25);
    --highlight-bg-8: rgba(221, 170, 123, 0.25);
    --highlight-bg-9: rgba(200, 200, 200, 0.25);
  }
}