/**
 * CSS Variables - Clinical Research Design System
 * Refined typography, precise spacing, scientific aesthetic
 * Optimized for eye-tracking research with Tobii Pro Lab
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap');

:root {
    /* ===== Color Palette - Scientific Blue ===== */
    /* Primary - Deep scientific blue */
    --color-accent: #1a56db;
    --color-accent-emphasis: #1346b8;
    --color-accent-subtle: rgba(26, 86, 219, 0.08);
    --color-accent-muted: rgba(26, 86, 219, 0.25);
    --color-accent-light: #e8f0fe;

    /* Foreground */
    --color-fg-default: #1a1f2e;
    --color-fg-muted: #5c6478;
    --color-fg-subtle: #8892a6;
    --color-fg-onEmphasis: #ffffff;

    /* Background - Warm paper tones */
    --color-bg-default: #ffffff;
    --color-bg-subtle: #f8f9fb;
    --color-bg-muted: #f0f2f5;
    --color-bg-inset: #e8ebf0;
    --color-bg-canvas: #f4f5f7;

    /* Borders */
    --color-border-default: #d4d9e3;
    --color-border-muted: #e2e6ed;
    --color-border-subtle: rgba(26, 31, 46, 0.08);
    --color-border-emphasis: #b8c0ce;

    /* ===== AOI Region Colors ===== */
    /* Distinct but harmonious - scientifically coded */
    --aoi-1-bg: #f8f9fb;
    --aoi-1-border: #e2e6ed;
    --aoi-1-accent: #5c6478;

    --aoi-2-bg: #ffffff;
    --aoi-2-border: #1a56db;
    --aoi-2-border-subtle: #d4d9e3;
    --aoi-2-glow: rgba(26, 86, 219, 0.12);

    --aoi-3-bg: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    --aoi-3-border: #a8c7f0;
    --aoi-3-accent: #1a56db;

    /* ===== Status Colors ===== */
    --color-success: #0d7a3f;
    --color-success-subtle: #e6f7ed;
    --color-success-border: #a3dbb8;

    --color-warning: #b45309;
    --color-warning-subtle: #fef3e2;
    --color-warning-border: #f5d08a;

    --color-danger: #c92a3e;
    --color-danger-subtle: #fce8ea;
    --color-danger-border: #f5a3ac;

    /* ===== Typography ===== */
    /* IBM Plex Sans - Technical clarity */
    --font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Source Serif 4 - Elegant reading for essays */
    --font-family-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    /* IBM Plex Mono - Data and code */
    --font-family-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Font sizes - Modular scale (1.2) */
    --font-size-xs: 11px;
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-body: 15px;
    --font-size-large: 16px;
    --font-size-xlarge: 19px;
    --font-size-xxlarge: 23px;
    --font-size-display: 28px;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.85;

    /* Letter spacing */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-caps: 0.08em;

    /* ===== Spacing - 4px base ===== */
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 24px;
    --spacing-6: 32px;
    --spacing-7: 40px;
    --spacing-8: 48px;
    --spacing-9: 64px;
    --spacing-10: 80px;

    /* ===== Border Radius ===== */
    --radius-small: 4px;
    --radius-medium: 6px;
    --radius-large: 10px;
    --radius-xlarge: 14px;
    --radius-full: 9999px;

    /* ===== Shadows - Layered depth ===== */
    --shadow-xs: 0 1px 2px rgba(26, 31, 46, 0.04);
    --shadow-small: 0 1px 3px rgba(26, 31, 46, 0.06), 0 1px 2px rgba(26, 31, 46, 0.04);
    --shadow-medium: 0 4px 6px -1px rgba(26, 31, 46, 0.08), 0 2px 4px -1px rgba(26, 31, 46, 0.04);
    --shadow-large: 0 10px 15px -3px rgba(26, 31, 46, 0.08), 0 4px 6px -2px rgba(26, 31, 46, 0.04);
    --shadow-xlarge: 0 20px 25px -5px rgba(26, 31, 46, 0.1), 0 10px 10px -5px rgba(26, 31, 46, 0.04);
    --shadow-inner: inset 0 2px 4px rgba(26, 31, 46, 0.04);
    --shadow-focus: 0 0 0 3px var(--color-accent-subtle);
    --shadow-focus-strong: 0 0 0 4px var(--color-accent-muted);

    /* ===== Transitions ===== */
    --transition-fast: 100ms ease-out;
    --transition-normal: 180ms ease-out;
    --transition-slow: 280ms ease-out;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== Z-index ===== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 290;
    --z-modal: 300;
    --z-toast: 400;
    --z-tooltip: 500;

    /* ===== Tab Completion ===== */
    --color-completion-text: #9ca8bc;
    --color-completion-bg: transparent;
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    :root {
        --color-border-default: #1a1f2e;
        --color-fg-muted: #1a1f2e;
        --aoi-2-border: #0d3a8f;
        --color-accent: #0d3a8f;
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --transition-spring: 0ms;
    }
}