/**
 * CSS Custom Properties
 * Single source of truth for colours and spacing
 * These mirror config.js values for CSS-only usage
 */

:root {
    /* === COLOUR PALETTE (Vivid - default) === */
    --node-ontology: #e53e3e;
    --node-class: #3182ce;
    --node-object-property: #38a169;
    --node-datatype-property: #dd6b20;
    --node-individual: #805ad5;
    --node-concept: #d69e2e;
    --node-catalog: #e53e3e;
    --node-dataset: #3182ce;
    --node-distribution: #38a169;
    --node-dataservice: #805ad5;

    /* === LINK COLOURS === */
    --link-subclass: #4299e1;
    --link-domain: #48bb78;
    --link-range: #ed8936;
    --link-instance: #9f7aea;
    --link-defined: #e53e3e;
    --link-inverse: #ed64a6;
    --link-has-dataset: #3182ce;
    --link-has-distribution: #38a169;
    --link-serves-dataset: #805ad5;

    /* === SEMANTIC COLOURS === */
    --color-primary: #4299e1;
    --color-success: #48bb78;
    --color-warning: #ed8936;
    --color-error: #e53e3e;
    --color-info: #3182ce;

    /* === BACKGROUND COLOURS === */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #f8f9fa;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --bg-overlay-solid: rgba(255, 255, 255, 0.98);
    --bg-button-secondary: #f0f0f0;
    --bg-button-secondary-hover: #e0e0e0;
    --bg-segmented: #eeeeee;
    --bg-segmented-hover: #dddddd;
    --bg-error-pre: #fed7d7;
    --bg-highlight-subtle: rgba(0, 0, 0, 0.05);
    --bg-highlight-faint: rgba(0, 0, 0, 0.03);
    --bg-quality-detail: rgba(0, 0, 0, 0.03);
    --bg-quality-detail-border: rgba(0, 0, 0, 0.05);
    --bg-shacl-li: rgba(255, 255, 255, 0.6);
    --bg-shacl-li-hover: rgba(255, 255, 255, 0.9);
    --bg-group-count: rgba(0, 0, 0, 0.1);
    --bg-code: #f4f4f4;

    /* Editorial content distinction */
    --bg-editorial: #fffbeb;
    --border-editorial: #f59e0b;
    --bg-editorial-badge: #fef3c7;
    --text-editorial-badge: #92400e;

    /* === TEXT COLOURS === */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-hint: #666666;  /* WCAG AA compliant (4.5:1 on white) */

    /* === FOCUS RING - Strong for accessibility === */
    --focus-ring: 0 0 0 3px var(--bg-primary), 0 0 0 5px var(--color-primary);

    /* === BORDER COLOURS === */
    --border-light: #eeeeee;
    --border-medium: #dddddd;
    --border-dark: #cccccc;

    /* === ERROR SPECIFIC === */
    --color-error-text: #c53030;
    --color-error-pre-text: #742a2a;
    --color-error-border-accent: #fc8181;

    /* === DARK MODE BUTTON BORDER === */
    --border-dark-mode-btn: #cbd5e0;
    --text-dark-mode-btn: #4a5568;
    --bg-dark-mode-btn-hover: #edf2f7;

    /* === SPACING === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;

    /* === TYPOGRAPHY === */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;

    /* === BORDERS === */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* === SHADOWS === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.2);

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* === Z-INDEX LAYERS === */
    --z-graph: 1;
    --z-panels: 100;
    --z-floating: 150;
    --z-tooltip: 200;
    --z-modal: 500;
    --z-overlay: 1000;
    --z-toast: 10000;
}

/* === DARK MODE === */
.dark-mode {
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --bg-overlay: rgba(45, 55, 72, 0.95);
    --bg-overlay-solid: rgba(45, 55, 72, 0.98);
    --bg-button-secondary: #4a5568;
    --bg-button-secondary-hover: #5a6578;
    --bg-segmented: #4a5568;
    --bg-segmented-hover: #718096;
    --bg-error-pre: rgba(229, 62, 62, 0.25);
    --bg-highlight-subtle: rgba(255, 255, 255, 0.05);
    --bg-highlight-faint: rgba(255, 255, 255, 0.05);
    --bg-quality-detail: rgba(0, 0, 0, 0.2);
    --bg-quality-detail-border: rgba(255, 255, 255, 0.05);
    --bg-shacl-li: rgba(255, 255, 255, 0.08);
    --bg-shacl-li-hover: rgba(255, 255, 255, 0.15);
    --bg-group-count: rgba(255, 255, 255, 0.15);
    --bg-code: #2d3748;

    /* Editorial content distinction (dark mode) */
    --bg-editorial: rgba(245, 158, 11, 0.1);
    --border-editorial: #f59e0b;
    --bg-editorial-badge: rgba(245, 158, 11, 0.2);
    --text-editorial-badge: #fcd34d;

    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --text-hint: #718096;

    --border-light: #4a5568;
    --border-medium: #5a6878;
    --border-dark: #718096;

    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);

    --color-error-text: #feb2b2;
    --color-error-pre-text: #fed7d7;
    --color-error-border-accent: #fc8181;

    --border-dark-mode-btn: #4a5568;
    --text-dark-mode-btn: #e2e8f0;
    --bg-dark-mode-btn-hover: #4a5568;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* === SEVERITY BACKGROUNDS === */
:root {
    --bg-success: #f0fff4;
    --bg-warning: #fffaf0;
    --bg-error: #fff5f5;
    --bg-info: #ebf8ff;

    --border-success: #48bb78;
    --border-warning: #ed8936;
    --border-error: #e53e3e;
    --border-info: #63b3ed;

    --text-success: #22543d;
    --text-warning: #744210;
    --text-error: #822727;
    --text-info: #2c5282;
}

.dark-mode {
    --bg-success: #1a332a;
    --bg-warning: #332a1a;
    --bg-error: #2d2020;
    --bg-info: #1a365d;

    --border-success: #38a169;
    --border-warning: #f6ad55;
    --border-error: #fc8181;
    --border-info: #3182ce;

    --text-success: #9ae6b4;
    --text-warning: #fbd38d;
    --text-error: #fc8181;
    --text-info: #90cdf4;
}