/* =============================================================================
 * SciTeX Color System - Minimal Semantic Tokens
 * =============================================================================
 *
 * RULES:
 * - Primitives (with _ prefix) are INTERNAL ONLY - use in this file only
 * - Semantic tokens (no prefix) are PUBLIC API - use in components
 * - Theme switching handled by remapping semantic tokens
 *
 * ============================================================================= */

:root,
[data-theme="light"] {
  /* ===========================================================================
   * PRIMITIVES (internal only - prefix with _)
   * =========================================================================== */

  /* Brand colors - warm neutral grays, eye-friendly (no pure black, no blue tint) */
  --_scitex-01: #333333;
  --_scitex-02: #4a4a4a;
  --_scitex-03: #5f5f5f;
  --_scitex-04: #777777;
  --_scitex-05: #999999;
  --_scitex-06: #c0c0c0;
  --_scitex-07: #e0e0e0;

  --_white: #f8f7f5;
  --_gray-subtle: #f3f2f0;
  --_warm-white: #faf9f7;

  /* Status colors - muted, eye-friendly */
  --_success: #5a9a7e;
  --_warning: #b8956a;
  --_error: #a67373;
  --_info: #6b7280;

  /* CTA colors - subtle, not loud */
  --_cta: #5f5f5f;
  --_cta-hover: #4a4a4a;

  /* Icon size scale (theme-independent) */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 32px;

  /* User-configurable UI sizing (overridable via preferences) */
  --ui-nav-icon-size: var(--icon-lg); /* Nav icon size (default: 20px) */
  --ui-collapsed-pane-width: 48px; /* Collapsed pane width */

  /* Legacy brand color references (deprecated - use semantic tokens instead) */
  --scitex-color-01: var(--_scitex-01);
  --scitex-color-01-dark: #222222;
  --scitex-color-01-light: #444444;
  --scitex-color-02: var(--_scitex-02);
  --scitex-color-02-dark: #333333;
  --scitex-color-03: var(--_scitex-03);
  --scitex-color-04: var(--_scitex-04);
  --scitex-color-05: var(--_scitex-05);
  --scitex-color-06: var(--_scitex-06);
  --scitex-color-07: var(--_scitex-07);
  --white: var(--_white);

  /* ===========================================================================
   * SEMANTIC TOKENS (public API - use these in components)
   * =========================================================================== */

  /* Text - warm neutrals for eye-friendly readability */
  --text-primary: var(--_scitex-01); /* Near-black, no blue tint */
  --text-secondary: var(--_scitex-02); /* Dark gray for secondary text */
  --text-muted: var(--_scitex-04); /* Medium gray for muted text */
  --text-inverse: var(--_white);
  --text-color: var(--text-primary); /* Alias for legacy compatibility */

  /* Background - warm, eye-friendly tones */
  --bg-page: var(--_warm-white); /* Warm off-white page background */
  --bg-surface: var(--_white); /* Warm white for cards/surfaces */
  --bg-muted: var(--_gray-subtle); /* Warm subtle gray */

  /* Border - warm neutral grays */
  --border-default: var(--_scitex-05); /* Medium neutral gray */
  --border-muted: var(--_scitex-06); /* Light neutral gray */

  /* Workspace-specific colors - warm light theme for Code/Writer/Vis */
  --workspace-bg-primary: #f5f4f2; /* Warm light gray - main panels */
  --workspace-bg-secondary: #efeeed; /* Warm medium gray - secondary panels */
  --workspace-bg-tertiary: #e8e7e5; /* Warm gray - hover states */
  --workspace-bg-elevated: #fdfcfa; /* Warm white - elevated surfaces */
  --workspace-bg-monaco: #fdfcfa; /* Warm white for editor */
  --workspace-border-subtle: #dddcda; /* Warm subtle borders */
  --workspace-border-default: #c0bfbd; /* Warm default borders */
  --workspace-border-hover: #999897; /* Warm hover borders */
  --workspace-border-active: #777675; /* Warm active borders */
  --workspace-slider-hover: #777675; /* Slider handle hover */
  --workspace-slider-active: #5f5e5d; /* Slider handle active */
  --workspace-ruler-bg: #e0dfdd; /* Warm ruler background */
  --workspace-ruler-border: #d0cfcd; /* Warm ruler borders */
  --workspace-text-primary: #24292f; /* Dark text on light backgrounds */
  --workspace-text-secondary: #57606a; /* Muted text on light backgrounds */
  --workspace-bg-hover: rgba(0, 0, 0, 0.04); /* Subtle hover on light bg */
  --workspace-bg-active: rgba(0, 0, 0, 0.08); /* Subtle active on light bg */

  /* Module accent colors - top border for module-specific pane headers
     Light mode: deeper/saturated to contrast against warm white backgrounds */
  --module-accent-color: transparent; /* Default: no accent (shared panes) */
  --module-accent-tint: transparent; /* Default: no tint (shared panes) */
  --module-accent-writer: #a07040; /* Deep amber - manuscripts, writing */
  --module-accent-writer-tint: rgba(160, 112, 64, 0.07);
  --module-accent-scholar: #3d7a5e; /* Deep sage - academic, knowledge */
  --module-accent-scholar-tint: rgba(61, 122, 94, 0.07);
  --module-accent-visualizer: #2e7070; /* Deep teal - data visualization */
  --module-accent-visualizer-tint: rgba(46, 112, 112, 0.07);
  --module-accent-console: #3e6080; /* Deep steel blue - terminal, code */
  --module-accent-console-tint: rgba(62, 96, 128, 0.07);
  --module-accent-clew: #8a6a4a; /* Earth brown - pipelines, workflows */
  --module-accent-clew-tint: rgba(138, 106, 74, 0.07);
  --module-accent-hub: #6a5a8a; /* Muted purple - dashboard, overview */
  --module-accent-hub-tint: rgba(106, 90, 138, 0.07);
  --module-accent-example: #8a6030; /* Warm orange-brown - demos, templates */
  --module-accent-example-tint: rgba(138, 96, 48, 0.07);
  --module-accent-tools: #5a7a5a; /* Sage green - utilities, helpers */
  --module-accent-tools-tint: rgba(90, 122, 90, 0.07);
  --module-accent-apps: #7a5a6a; /* Muted rose - store, browsing */
  --module-accent-apps-tint: rgba(122, 90, 106, 0.07);
  --module-accent-appmaker: #5a6a8a; /* Slate blue - creation, building */
  --module-accent-appmaker-tint: rgba(90, 106, 138, 0.07);
  --module-accent-docs: #4a6a9a; /* Deep blue - documentation, reference */
  --module-accent-docs-tint: rgba(74, 106, 154, 0.07);
  --module-accent-figrecipe: #7c5cbf; /* Purple - figure editing, creativity */
  --module-accent-figrecipe-tint: rgba(124, 92, 191, 0.07);
  --module-accent-notebook: #4a7a3a; /* Deep green - lab notebook, experiments */
  --module-accent-notebook-tint: rgba(74, 122, 58, 0.07);

  /* Workspace icon color scheme (TOGGLE: swap _icon-green ↔ _icon-white below) */
  /* Green scheme */
  --_icon-green-primary: #5a9a7e;
  --_icon-green-hover: #4a8068;
  --_icon-green-active: #3a6652;
  /* White/neutral scheme (eye-friendly) */
  --_icon-white-primary: #6b6b6b;
  --_icon-white-hover: #4a4a4a;
  --_icon-white-active: #3d3d3d;

  /* Active scheme: change '_icon-white' to '_icon-green' to switch back */
  --workspace-icon-primary: var(--_icon-white-primary);
  --workspace-icon-secondary: #6b6b6b; /* Neutral gray - secondary actions */
  --workspace-icon-muted: #9a9a9a; /* Light neutral gray - muted/inactive */
  --workspace-icon-hover: var(--_icon-white-hover);
  --workspace-icon-active: var(--_icon-white-active);

  /* Status */
  --status-success: var(--_success);
  --status-warning: var(--_warning);
  --status-error: var(--_error);
  --status-info: var(--_info);

  /* Aliases for forms and other components */
  --success-color: var(--_success);
  --warning-color: var(--_warning);
  --error-color: var(--_error);
  --info-color: var(--_info);

  /* Status variant tokens (bg, text, border) for alerts and form messages */
  --status-success-bg: rgba(90, 154, 126, 0.1);
  --status-success-text: #2d6a4f;
  --status-success-border: rgba(90, 154, 126, 0.3);
  --status-error-bg: rgba(166, 115, 115, 0.1);
  --status-error-text: #994444;
  --status-error-border: rgba(166, 115, 115, 0.3);
  --status-warning-bg: rgba(184, 149, 106, 0.1);
  --status-warning-text: #633c01;
  --status-warning-border: rgba(184, 149, 106, 0.3);
  --status-info-bg: rgba(107, 107, 107, 0.08);
  --status-info-text: #5f5f5f;
  --status-info-border: rgba(107, 107, 107, 0.2);

  /* Success variant tokens */
  --color-success-bg: rgba(90, 154, 126, 0.1);
  --color-success-border: rgba(90, 154, 126, 0.3);
  --color-success-shadow: rgba(90, 154, 126, 0.3);
  --gradient-success: linear-gradient(135deg, #5a9a7e 0%, #4a8068 100%);

  /* CTA colors */
  --color-cta: var(--_cta);
  --color-cta-hover: var(--_cta-hover);
  --color-cta-subtle: rgba(95, 95, 95, 0.08);

  /* Terminal colors - warm light theme */
  --terminal-bg: #fdfcfa;
  --terminal-fg: #333333;
  --terminal-cursor: #5f5f5f;
  --terminal-cursor-accent: #fdfcfa;
  --terminal-black: #333333;
  --terminal-red: #b34040;
  --terminal-green: #2d7a4f;
  --terminal-yellow: #7a5c00;
  --terminal-blue: #3366aa;
  --terminal-magenta: #7744aa;
  --terminal-cyan: #2a7a80;
  --terminal-white: #6b6b6b;
  --terminal-bright-black: #5f5f5f;
  --terminal-bright-red: #994444;
  --terminal-bright-green: #1a6637;
  --terminal-bright-yellow: #5a4400;
  --terminal-bright-blue: #2255aa;
  --terminal-bright-magenta: #6633aa;
  --terminal-bright-cyan: #1a6a70;
  --terminal-bright-white: #888888;

  /* GitHub Primer-style aliases for compatibility */
  --color-fg-default: var(--text-primary);
  --color-fg-muted: var(--text-muted);
  --color-fg-on-emphasis: var(--text-inverse);
  --color-canvas-default: var(--bg-page);
  --color-canvas-subtle: var(--bg-surface);
  --color-canvas-inset: var(--bg-muted);
  --color-border-default: var(--border-default);
  --color-border-muted: var(--border-muted);
  --color-accent-fg: var(--text-primary);
  --color-accent-emphasis: var(--text-primary);
  --color-accent-subtle: #eeede8; /* Warm neutral for better visibility */
  --color-danger-fg: var(--status-error);
  --color-danger-emphasis: var(--status-error);
  --color-danger-subtle: var(--status-error);
  --color-success-fg: var(--status-success);
  --color-btn-primary-bg: var(--_scitex-02);
  --color-btn-primary-text: var(--_white);
  --color-btn-primary-border: var(--_scitex-02);
  --color-btn-primary-hover-bg: var(--_scitex-01);
  --color-btn-bg: var(--bg-surface);
  --color-btn-text: var(--text-primary);
  --color-btn-border: var(--border-default);
  --color-btn-hover-bg: var(--bg-muted);

  /* Compatibility aliases for tool templates */
  --bg-primary: var(--bg-page);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary: var(--bg-muted);
  --border-color: var(--border-default);
}

[data-theme="dark"] {
  /* Cool-tinted dark primitives (GitHub Dark inspired)
   * Professional, modern feel with slight blue tint */
  --_scitex-01: #161b22;
  --_scitex-02: #21262d;
  --_scitex-03: #30363d;
  --_scitex-04: #484f58;
  --_scitex-05: #6e7681;
  --_scitex-06: #8b949e;
  --_scitex-07: #e6edf3;
  --_white: #f0f6fc;
  --_gray-subtle: #f0f6fc;
  --_warm-white: #f0f6fc;
  --_success: #4a9b7e;
  --_cta: #3b82f6;
  --_cta-hover: #2563eb;

  /* Text - flip to light */
  --text-primary: #e6edf3;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-inverse: var(--_scitex-01);
  --text-color: var(--text-primary); /* Alias for legacy compatibility */

  /* Background - flip to dark */
  --bg-page: #0d1117;
  --bg-surface: var(--_scitex-01);
  --bg-muted: var(--_scitex-02);

  /* Border */
  --border-default: var(--_scitex-03);
  --border-muted: var(--_scitex-02);

  /* Workspace-specific colors - cool-tinted dark theme for Code/Writer/Vis */
  --workspace-bg-primary: #0d1117; /* GitHub dark - main panels */
  --workspace-bg-secondary: #161b22; /* Slightly elevated - secondary panels */
  --workspace-bg-tertiary: #1c2128; /* Subtle lighter - hover states */
  --workspace-bg-elevated: #21262d; /* Elevated surfaces */
  --workspace-bg-monaco: #0d1117; /* Dark panels/sidebars bg (Monaco editor bg handled by JS theme) */
  --workspace-border-subtle: #21262d; /* Subtle borders between panels */
  --workspace-border-default: #30363d; /* Default borders */
  --workspace-border-hover: #484f58; /* Hover state */
  --workspace-border-active: #6e7681; /* Active/dragging */
  --workspace-slider-hover: #6e7681; /* Slider handle hover */
  --workspace-slider-active: #8b949e; /* Slider handle active */
  --workspace-ruler-bg: #161b22; /* Rulers and guides background */
  --workspace-ruler-border: #21262d; /* Ruler borders */
  --workspace-text-primary: #e6edf3; /* Light text on dark backgrounds */
  --workspace-text-secondary: #8b949e; /* Muted text on dark backgrounds */
  --workspace-bg-hover: rgba(177, 186, 196, 0.08); /* Subtle hover on dark bg */
  --workspace-bg-active: rgba(
    177,
    186,
    196,
    0.12
  ); /* Subtle active on dark bg */

  /* Module accent colors - dark mode */
  --module-accent-color: transparent;
  --module-accent-tint: transparent;
  --module-accent-writer: #d4a87a;
  --module-accent-writer-tint: rgba(212, 168, 122, 0.08);
  --module-accent-scholar: #6ba89a;
  --module-accent-scholar-tint: rgba(107, 168, 154, 0.08);
  --module-accent-visualizer: #6ab0b0;
  --module-accent-visualizer-tint: rgba(106, 176, 176, 0.08);
  --module-accent-console: #7a9ab8;
  --module-accent-console-tint: rgba(122, 154, 184, 0.08);
  --module-accent-clew: #b89070; /* Earth brown - pipelines, workflows */
  --module-accent-clew-tint: rgba(184, 144, 112, 0.08);
  --module-accent-hub: #9a8ab8; /* Soft purple - dashboard, overview */
  --module-accent-hub-tint: rgba(154, 138, 184, 0.08);
  --module-accent-example: #c08850; /* Warm orange - demos, templates */
  --module-accent-example-tint: rgba(192, 136, 80, 0.08);
  --module-accent-tools: #8ab88a; /* Sage green - utilities, helpers */
  --module-accent-tools-tint: rgba(138, 184, 138, 0.08);
  --module-accent-apps: #b88a9a; /* Soft rose - store, browsing */
  --module-accent-apps-tint: rgba(184, 138, 154, 0.08);
  --module-accent-appmaker: #8a9ab8; /* Soft slate - creation, building */
  --module-accent-appmaker-tint: rgba(138, 154, 184, 0.08);
  --module-accent-docs: #7a9ac8; /* Soft blue - documentation, reference */
  --module-accent-docs-tint: rgba(122, 154, 200, 0.08);
  --module-accent-figrecipe: #a07ae0; /* Soft purple - figure editing, creativity */
  --module-accent-figrecipe-tint: rgba(160, 122, 224, 0.08);
  --module-accent-notebook: #7a9a6a; /* Soft green - lab notebook, experiments */
  --module-accent-notebook-tint: rgba(122, 154, 106, 0.08);

  /* Workspace icon color scheme (TOGGLE: swap _icon-green ↔ _icon-white below) */
  /* Green scheme (dark mode) */
  --_icon-green-primary: #7ee787;
  --_icon-green-hover: #aff5b4;
  --_icon-green-active: #56d364;
  /* White/neutral scheme (cool-tinted, dark mode) */
  --_icon-white-primary: #8b949e;
  --_icon-white-hover: #c9d1d9;
  --_icon-white-active: #e6edf3;

  /* Active scheme: change '_icon-white' to '_icon-green' to switch back */
  --workspace-icon-primary: var(--_icon-white-primary);
  --workspace-icon-secondary: #8b949e; /* Cool gray - secondary actions */
  --workspace-icon-muted: #6e7681; /* Cool medium gray - muted/inactive */
  --workspace-icon-hover: var(--_icon-white-hover);
  --workspace-icon-active: var(--_icon-white-active);

  /* Terminal colors - cool dark theme */
  --terminal-bg: #0d1117;
  --terminal-fg: #e6edf3;
  --terminal-cursor: #58a6ff;
  --terminal-cursor-accent: #0d1117;
  --terminal-black: #484f58;
  --terminal-red: #ff7b72;
  --terminal-green: #7ee787;
  --terminal-yellow: #e3b341;
  --terminal-blue: #79c0ff;
  --terminal-magenta: #d2a8ff;
  --terminal-cyan: #76e3ea;
  --terminal-white: #e6edf3;
  --terminal-bright-black: #6e7681;
  --terminal-bright-red: #ffa198;
  --terminal-bright-green: #aff5b4;
  --terminal-bright-yellow: #f8e3a1;
  --terminal-bright-blue: #a5d6ff;
  --terminal-bright-magenta: #e2c5ff;
  --terminal-bright-cyan: #b3f0ff;
  --terminal-bright-white: #f0f6fc;

  /* Status colors - adjust for dark mode readability */
  --status-success: #6ba89a;
  --status-warning: #d4a87a;
  --status-error: #c08888;
  --status-info: #9ca3af;

  /* Aliases for forms and other components */
  --success-color: #6ba89a;
  --warning-color: #d4a87a;
  --error-color: #c08888;
  --info-color: #8fa9cc;

  /* Status variant tokens - dark mode */
  --status-success-bg: rgba(107, 168, 154, 0.15);
  --status-success-text: #6ba89a;
  --status-success-border: rgba(107, 168, 154, 0.3);
  --status-error-bg: rgba(192, 136, 136, 0.15);
  --status-error-text: #c08888;
  --status-error-border: rgba(192, 136, 136, 0.3);
  --status-warning-bg: rgba(212, 168, 122, 0.15);
  --status-warning-text: #d4a87a;
  --status-warning-border: rgba(212, 168, 122, 0.3);
  --status-info-bg: rgba(143, 169, 204, 0.15);
  --status-info-text: #8fa9cc;
  --status-info-border: rgba(143, 169, 204, 0.3);

  /* Success variant tokens - dark mode */
  --color-success-bg: rgba(107, 168, 154, 0.1);
  --color-success-border: rgba(107, 168, 154, 0.3);
  --color-success-shadow: rgba(107, 168, 154, 0.3);
  --gradient-success: linear-gradient(135deg, #6ba89a 0%, #5a9484 100%);

  /* CTA colors - same in dark mode */
  --color-cta: var(--_cta);
  --color-cta-hover: var(--_cta-hover);
  --color-cta-subtle: rgba(59, 130, 246, 0.15);

  /* GitHub Primer-style aliases for dark mode */
  --color-fg-default: var(--text-primary);
  --color-fg-muted: var(--text-muted);
  --color-fg-on-emphasis: var(--text-inverse);
  --color-canvas-default: var(--bg-page);
  --color-canvas-subtle: var(--bg-surface);
  --color-canvas-inset: var(--bg-muted);
  --color-border-default: var(--border-default);
  --color-border-muted: var(--border-muted);
  --color-accent-fg: var(--text-primary);
  --color-accent-emphasis: var(--text-primary);
  --color-accent-subtle: var(--bg-muted);
  --color-danger-fg: var(--status-error);
  --color-danger-emphasis: var(--status-error);
  --color-danger-subtle: var(--status-error);
  --color-success-fg: var(--status-success);
  --color-btn-primary-bg: var(--_success);
  --color-btn-primary-text: var(--_white);
  --color-btn-primary-border: var(--_success);
  --color-btn-primary-hover-bg: #5aaa8e;
  --color-btn-bg: var(--bg-surface);
  --color-btn-text: var(--text-primary);
  --color-btn-border: var(--border-default);
  --color-btn-hover-bg: var(--bg-muted);

  /* Compatibility aliases for tool templates */
  --bg-primary: var(--workspace-bg-primary);
  --bg-secondary: var(--workspace-bg-secondary);
  --bg-tertiary: var(--workspace-bg-tertiary);
  --border-color: var(--workspace-border-default);
}