/**
 * GraphTalker Theme System
 *
 * Structure:
 * 1. Base color tokens (--color-*) - core palette
 * 2. Semantic tokens (--surface-*, --border-*, --text-*, etc.) - derived from base
 *
 * To create a new theme:
 * - Override only base color tokens (--color-*)
 * - Semantic tokens will auto-calculate via color-mix() and var()
 * - Only override semantic tokens if you need different relationships
 */

:root {
    /* ==================== Typography ==================== */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'JetBrains Mono', 'Consolas', 'Cascadia Code', 'Fira Code', monospace;

    /* ==================== Base Color Tokens ==================== */

    /* Primary */
    --color-primary-main: #1e88e5;
    --color-primary-dark: #1565c0;
    --color-primary-light: #2196f3;
    --color-primary-contrast: #ffffff;

    /* Secondary */
    --color-secondary-main: #9c27b0;
    --color-secondary-dark: #7b1fa2;
    --color-secondary-light: #ba68c8;
    --color-secondary-contrast: #ffffff;

    /* Success */
    --color-success-main: #4caf50;
    --color-success-dark: #388e3c;
    --color-success-light: #81c784;
    --color-success-contrast: #ffffff;

    /* Error */
    --color-error-main: #f44336;
    --color-error-dark: #d32f2f;
    --color-error-light: #e57373;
    --color-error-contrast: #ffffff;

    /* Warning */
    --color-warning-main: #ff9800;
    --color-warning-dark: #f57c00;
    --color-warning-light: #ffb74d;
    --color-warning-contrast: #000000;

    /* Info */
    --color-info-main: #2196f3;
    --color-info-dark: #1976d2;
    --color-info-light: #64b5f6;
    --color-info-contrast: #ffffff;

    /* Grey Scale */
    --color-grey-100: #f9fafb;
    --color-grey-200: #eeeeee;
    --color-grey-300: #e0e0e0;
    --color-grey-400: #bdbdbd;
    --color-grey-500: #9e9e9e;
    --color-grey-600: #757575;
    --color-grey-700: #616161;
    --color-grey-800: #424242;
    --color-grey-900: #212121;

    /* Backgrounds */
    --color-background-default: #f5f5f5;
    --color-background-paper: #ffffff;
    --color-divider: #dddddd;

    /* Text */
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-disabled: #9e9e9e;

    /* ==================== Semantic Tokens (derived) ==================== */

    /* Surfaces */
    --surface-0: var(--color-background-paper);
    --surface-1: var(--color-grey-100);
    --surface-2: var(--color-grey-200);
    --surface-3: color-mix(in srgb, var(--color-grey-100) 70%, var(--color-grey-200));

    /* Borders */
    --border-subtle: var(--color-grey-200);
    --border-soft: var(--color-grey-300);
    --border-default: var(--color-grey-300);
    --border-strong: var(--color-grey-400);
    --border-contrast: var(--color-grey-400);
    --border-muted: var(--color-grey-500);
    --border-light: var(--color-grey-200);

    /* Text semantic */
    --text-heading: var(--color-grey-800);
    --text-strong: var(--color-grey-900);
    --text-muted-strong: var(--color-grey-700);
    --text-muted: var(--color-grey-600);
    --text-subtle: var(--color-grey-500);
    --text-inverse: #ffffff;

    /* Links */
    --link-default: var(--color-primary-main);
    --link-hover: var(--color-primary-dark);
    --link-active: var(--color-primary-dark);

    /* Focus */
    --focus-ring: rgba(33, 150, 243, 0.1);

    /* Status surfaces (auto-calculated from base colors) */
    --info-surface: color-mix(in srgb, var(--color-info-main) 10%, white);
    --info-border: color-mix(in srgb, var(--color-info-main) 28%, white);
    --info-text: var(--color-info-main);
    --info-hover: var(--color-info-dark);

    --warning-surface: color-mix(in srgb, var(--color-warning-main) 12%, white);
    --warning-border: color-mix(in srgb, var(--color-warning-main) 28%, white);
    --warning-text: var(--color-warning-main);
    --warning-hover: var(--color-warning-dark);

    --success-surface: color-mix(in srgb, var(--color-success-main) 12%, white);
    --success-border: color-mix(in srgb, var(--color-success-main) 28%, white);
    --success-text: var(--color-success-main);
    --success-hover: var(--color-success-dark);
    --success-text-strong: var(--color-success-dark);

    --error-surface: color-mix(in srgb, var(--color-error-main) 12%, white);
    --error-border: color-mix(in srgb, var(--color-error-main) 28%, white);
    --error-surface-strong: color-mix(in srgb, var(--color-error-main) 20%, white);
    --error-border-strong: color-mix(in srgb, var(--color-error-main) 35%, white);
    --error-surface-hover: color-mix(in srgb, var(--color-error-main) 26%, white);
    --error-border-hover: color-mix(in srgb, var(--color-error-main) 45%, white);
    --error-text: var(--color-error-main);
    --error-text-strong: var(--color-error-dark);

    /* Danger (alias for error) */
    --danger-main: var(--color-error-main);
    --danger-dark: var(--color-error-dark);

    /* Buttons */
    --secondary-button-bg: var(--color-grey-200);
    --secondary-button-hover: var(--color-grey-300);

    /* Dark panels (iterations panel, code blocks) */
    --panel-dark-bg: color-mix(in srgb, var(--color-grey-900) 92%, black);
    --panel-dark-surface: var(--color-grey-800);
    --panel-dark-text: var(--color-grey-300);
    --panel-dark-border: var(--color-grey-700);
    --panel-dark-border-strong: var(--color-grey-600);
    --panel-dark-scrollbar: var(--color-grey-600);
    --panel-dark-accent: color-mix(in srgb, var(--color-success-light) 70%, white);
    --panel-dark-accent-info: color-mix(in srgb, var(--color-info-light) 70%, white);
    --panel-dark-accent-warning: color-mix(in srgb, var(--color-warning-light) 70%, white);
    --panel-dark-accent-purple: color-mix(in srgb, var(--color-secondary-light) 70%, white);

    /* Shadows */
    --shadow-1: 0 1px 2px color-mix(in srgb, var(--color-grey-900) 18%, transparent);
    --shadow-2: 0 2px 8px color-mix(in srgb, var(--color-grey-900) 26%, transparent);
    --shadow-accent: 0 1px 4px color-mix(in srgb, var(--color-primary-main) 12%, transparent);
    --shadow-accent-strong: 0 2px 8px color-mix(in srgb, var(--color-primary-main) 20%, transparent);

    /* Overlay & Modal */
    --overlay-bg: color-mix(in srgb, var(--color-grey-900) 45%, transparent);
    --shadow-modal: 0 4px 24px color-mix(in srgb, var(--color-grey-900) 35%, transparent);
}


/* ==================== SIB Theme ==================== */
body[data-theme='sib'] {
    /* Typography */
    --font-sans: 'Roboto', 'Helvetica', 'Arial', sans-serif;

    /* Primary - Dark blue */
    --color-primary-main: #01173c;
    --color-primary-dark: #000f2b;
    --color-primary-light: #072c6b;
    --color-primary-contrast: #ffffff;

    /* Secondary - Teal/Cyan */
    --color-secondary-main: #31d1d3;
    --color-secondary-dark: #26b5b6;
    --color-secondary-light: #56dfdf;
    --color-secondary-contrast: #000c1f;

    /* Success */
    --color-success-main: #30b97a;
    --color-success-dark: #249d68;
    --color-success-light: #4dd495;
    --color-success-contrast: #ffffff;

    /* Error */
    --color-error-main: #e54848;
    --color-error-dark: #c73838;
    --color-error-light: #f16d6d;
    --color-error-contrast: #ffffff;

    /* Warning */
    --color-warning-main: #f5b942;
    --color-warning-dark: #d89d2e;
    --color-warning-light: #f9cd6e;
    --color-warning-contrast: #000c1f;

    /* Info */
    --color-info-main: #2777c6;
    --color-info-dark: #1d5e9e;
    --color-info-light: #5b9de1;
    --color-info-contrast: #ffffff;

    /* Grey Scale - Slightly blue-tinted */
    --color-grey-100: #f9fafb;
    --color-grey-200: #e3e7ee;
    --color-grey-300: #c9d1dc;
    --color-grey-400: #a1adbb;
    --color-grey-500: #7a8896;
    --color-grey-600: #55606c;
    --color-grey-700: #3b4450;
    --color-grey-800: #2b323d;
    --color-grey-900: #1c1f25;

    /* Backgrounds */
    --color-background-default: var(--color-grey-100);
    --color-background-paper: #ffffff;
    --color-divider: #e3e7ee;

    /* Text */
    --color-text-primary: #000f2b;
    --color-text-secondary: #7a8896;
    --color-text-disabled: #a1adbb;

    /* ==================== SIB-specific semantic overrides ==================== */
    /* Only override tokens that need DIFFERENT relationships than default */

    --text-heading: var(--color-primary-main);
    --link-hover: var(--color-primary-light);
    --focus-ring: rgba(1, 23, 60, 0.15);
    --shadow-2: 0 4px 12px color-mix(in srgb, var(--color-grey-900) 24%, transparent);
    --shadow-modal: 0 4px 24px color-mix(in srgb, var(--color-grey-900) 30%, transparent);
}
