/**
 * Theme CSS Custom Properties
 *
 * Centralized theme variables for consistent styling across the application.
 * These variables can be used in CSS and are mirrored in theme.ts for
 * programmatic access in JavaScript/TypeScript.
 */

:root {
  /* ===== NODE COLORS ===== */
  /* Using Wikipedia brand colors - LIGHT fills, STRONG strokes */
  --color-node-seed-fill: #E5C0C0; /* wikiRedLight */
  --color-node-seed-stroke: #970302; /* wikiRedStrong */
  --color-node-seed-stroke-width: 2px;
  --color-node-seed-radius: 8px;

  --color-node-coordinate-fill: #71D1B3; /* wikiBrightGreenStrong */
  --color-node-coordinate-stroke: none;
  --color-node-coordinate-stroke-width: 0px;
  --color-node-coordinate-radius: 6px;

  --color-node-intermediate-fill: #C0E6FF; /* wikiBrightBlueLight */
  --color-node-intermediate-stroke: #049DFF; /* wikiBrightBlueStrong */
  --color-node-intermediate-stroke-width: 2px;
  --color-node-intermediate-radius: 6px;

  --color-node-highlighted-fill: #E5C0C0; /* wikiRedLight */
  --color-node-highlighted-stroke: #970302; /* wikiRedStrong */
  --color-node-highlighted-stroke-width: 3px;
  --color-node-highlighted-radius: 8px;

  --color-node-graph-direct-fill: #CBE0D5; /* wikiGreenLight */
  --color-node-graph-direct-stroke: #308557; /* wikiGreenStrong */
  --color-node-graph-direct-radius: 6px;

  --color-node-graph-indirect-fill: #C0E6FF; /* wikiBrightBlueLight */
  --color-node-graph-indirect-stroke: #049DFF; /* wikiBrightBlueStrong */
  --color-node-graph-indirect-radius: 6px;

  --color-node-map-coordinate-fill: #111;
  --color-node-map-coordinate-radius: 2px;

  /* ===== EDGE COLORS ===== */
  /* Using Wikipedia grayscale and brand colors */
  --color-edge-normal-stroke: #6c757d; /* gray60 */
  --color-edge-normal-stroke-width: 2px;
  --color-edge-normal-stroke-opacity: 0.6;

  --color-edge-highlighted-stroke: #970302; /* wikiRedStrong */
  --color-edge-highlighted-stroke-width: 4px;
  --color-edge-highlighted-stroke-opacity: 1.0;

  --color-edge-connected-stroke: #EE8019; /* wikiOrangeStrong */
  --color-edge-connected-stroke-width: 3px;
  --color-edge-connected-stroke-opacity: 0.8;

  --color-edge-hovered-stroke: #F0BC00; /* wikiYellowStrong */
  --color-edge-hovered-stroke-width: 3px;
  --color-edge-hovered-stroke-opacity: 0.9;

  /* ===== UI COLORS ===== */
  /* Using Wikipedia brand colors and grayscale */
  --color-primary: #e9ecef; /* Light gray for buttons */
  --color-primary-hover: #ced4da; /* Slightly darker gray on hover */
  --color-secondary: #6c757d;
  --color-secondary-hover: #495057;
  --color-danger: #970302; /* wikiRedStrong */
  --color-danger-hover: #E5C0C0; /* wikiRedLight */
  --color-success: #308557; /* wikiGreenStrong */
  --color-success-hover: #CBE0D5; /* wikiGreenLight */

  --color-background: #ffffff;
  --color-background-alt: #f8f9fa;
  --color-background-panel: #ffffff;
  --color-background-overlay: rgba(255, 255, 255, 0.9);

  --color-border: #ced4da;
  --color-border-light: #D3D3D3;
  --color-border-dark: #999;

  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-text-light: #999;

  --color-error: #970302; /* wikiRedStrong */
  --color-warning: #EE8019; /* wikiOrangeStrong */
  --color-info: #0E65C0; /* wikiBlueStrong */

  /* ===== CANVAS/HISTOGRAM COLORS ===== */
  --color-canvas-histogram-bar: #ccc;
  --color-canvas-histogram-threshold: rgba(255, 0, 0, 0.2);
  --color-canvas-background: #ffffff;

  /* ===== TYPOGRAPHY ===== */
  /* Wikipedia brand fonts */
  --font-family-brand: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Linux Libertine", "Georgia", "Times New Roman", Times, serif;
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-sans: Arial, sans-serif;

  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== SPACING ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;

  /* ===== BORDER RADIUS ===== */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-round: 50%;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;

  /* ===== Z-INDEX ===== */
  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-modal: 1050;
  --z-index-tooltip: 1100;
  --z-index-notification: 1200;

  /* ===== OPACITY ===== */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-overlay: 0.9;
}

/* ===== DARK MODE (Future Enhancement) ===== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a1a;
    --color-text: #e0e0e0;
    etc...
  }
}
*/