/* CorrespExplorer Design Tokens
 * Canonical design system values
 * All CSS files must import and use these tokens
 *
 * Design derived from logo.jpg - Retro style with rust red accent
 */

:root {
    /* ========================================
     * COLORS - Logo-derived palette
     * ======================================== */

    /* Primary Colors - From Logo */
    --color-primary: #A64B3F;        /* Rust Red - Primary action, logo gear */
    --color-primary-dark: #8B3D33;   /* Dark Rust - Hover states */
    --color-secondary: #2C5282;      /* Steel Blue - Links, Network sender */
    --color-accent: #A64B3F;         /* Rust Red - Same as primary (logo-consistent) */
    --color-text: #222222;           /* Ink Black - Primary text, borders */
    --color-text-light: #555555;     /* Medium Gray - Secondary text */
    --color-text-secondary: #555555; /* Alias for text-light */
    --color-text-muted: #555555;     /* Alias for text-light */
    --color-bg: #F5F3E8;             /* Cream/Paper - Main background */
    --color-bg-light: #E8E4D4;       /* Manila - Cards, containers */
    --color-bg-secondary: #E8E4D4;   /* Alias for bg-light */
    --color-border: #222222;         /* Ink Black - Thick borders (2-3px) */
    --color-border-light: #D4D0C0;   /* Subtle borders, dividers */

    /* Functional Colors */
    --color-success: #2d6a4f;        /* Forest Green */
    --color-info: #0077b6;           /* Academic Blue */
    --color-warning: #9b6b00;        /* Dark Gold */
    --color-error: #9b2226;          /* Dark Red */

    /* Role Colors (Map/Network) - design.md Section 6.1.1 */
    --color-role-sender: #2c5f8d;    /* Steel Blue - Absenderin */
    --color-role-mentioned: #6c757d; /* Medium Gray - Erwähnt */
    --color-role-both: #2d6a4f;      /* Forest Green - Beide */
    --color-role-indirect: #adb5bd;  /* Light Gray - Indirekt (SNDB only) */

    /* Badge Colors - design.md Section 6.1.1 */
    --color-badge-gnd: #2d6a4f;      /* Green text */
    --color-badge-gnd-bg: #d8f3dc;   /* Light green background */
    --color-badge-sndb: #9b6b00;     /* Gold text */
    --color-badge-sndb-bg: #fff3cd;  /* Light yellow background */

    /* Relationship Colors (AGRELON Network) */
    --color-relation-family: #ff0066;      /* Pink - Family relationships */
    --color-relation-professional: #00ccff; /* Cyan - Professional relationships */
    --color-relation-social: #ffcc00;      /* Yellow - Social relationships */
    --color-badge-relation: #ff0066;       /* Default relation badge color */

    /* Network Edge Colors - Optimized for readability on map */
    --edge-family: #D0388C;        /* Familie (AGRELON 4xxx) - Magenta */
    --edge-work: #147D7E;          /* Beruflich (AGRELON 3xxx) - Teal */
    --edge-social: #2E7D32;        /* Sozial (AGRELON 1xxx+2xxx) - Green */
    --edge-correspondence: #6C5CE7; /* Korrespondenz (Briefe) - Purple */

    /* Network Edge Opacity States */
    --edge-opacity-default: 0.6;   /* Default state - transparent */
    --edge-opacity-hover: 1.0;     /* Hover state - fully visible */
    --edge-opacity-pinned: 0.8;    /* Pinned state - semi-opaque */

    /* ========================================
     * TYPOGRAPHY
     * ======================================== */

    /* Font Families */
    --font-headings: 'Merriweather', Georgia, serif;
    --font-base: 'Lato', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Legacy aliases from variables.css */
    --primary-color: var(--color-primary);
    --accent-color: var(--color-primary);  /* Rust Red - consistent with primary */
    --bg-body: var(--color-bg);
    --bg-card: var(--color-bg-light);
    --text-main: var(--color-text);

    /* Font Sizes - design.md Section 6.1 (12/14/16/20/24/32) */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    /* Line Heights - design.md: "≥ 1.4" */
    --line-height-tight: 1.4;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;

    /* ========================================
     * SPACING
     * ======================================== */

    /* Spacing Scale - design.md Section 6.1 (4/8/12/16/24/32) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;

    /* ========================================
     * LAYOUT
     * ======================================== */

    /* Layout Constants */
    --sidebar-width: 380px;
    --navbar-height: 60px;
    --max-width-content: 1200px;  /* Standard content max-width */
    --max-width-wide: 1400px;     /* Wide content max-width */

    /* ========================================
     * RESPONSIVE BREAKPOINTS
     * ======================================== */

    /* Mobile-first breakpoints - Standardized across all files */
    --breakpoint-sm: 480px;   /* Small phones */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops */
    --breakpoint-xl: 1200px;  /* Desktops */
    --breakpoint-2xl: 1400px; /* Large screens */

    /* ========================================
     * DESIGN ELEMENTS
     * ======================================== */

    /* Border Radius - Increased for friendlier UI */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows - Minimal, prefer borders for depth */
    --shadow-sm: none;  /* Use borders instead */
    --shadow-md: none;  /* Use borders instead */
    --shadow-lg: none;  /* Use borders instead */

    /* Border-based depth (replacing shadows) */
    --border-card: 2px solid var(--color-border);
    --border-modal: 3px solid var(--color-border);
    --border-focus: 2px solid var(--color-primary);

    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1060;
}

/* ========================================
 * UNCERTAINTY DISPLAY CLASSES
 * For visualizing data quality/precision
 * ======================================== */

/* Date Precision */
.date-imprecise {
    color: var(--color-text-muted);
}

.date-range {
    color: var(--color-text-muted);
}

/* Uncertainty marker with tooltip (used in HTML, not ::after) */
.uncertainty-marker {
    color: var(--color-warning);
    font-size: 0.9em;
    cursor: help;
}

.date-unknown {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Person Precision */
.person-unknown {
    color: var(--color-text-muted);
    font-style: italic;
}

.person-partial {
    color: var(--color-text-muted);
}

.person-named {
    /* No special styling - name present but no authority */
    opacity: 0.85;
}

.person-unknown .person-avatar,
.person-partial .person-avatar {
    background: var(--color-bg-light);
    border: 2px dashed var(--color-border-light);
    color: var(--color-text-muted);
}

/* Place Precision */
.place-region {
    color: var(--color-text-muted);
    font-style: italic;
}

.place-region .region-hint {
    font-size: 0.8em;
    opacity: 0.7;
}

.place-unknown {
    color: var(--color-text-muted);
    font-style: italic;
}

.place-unknown i {
    color: var(--color-warning);
    margin-left: 4px;
}

/* Uncertainty Indicator Badge */
.uncertainty-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
}

.uncertainty-badge--warning {
    background: #fff3cd;
    color: var(--color-warning);
    border-color: var(--color-warning);
}

/* Stats Sub-info (for sidebar statistics) - deprecated, use icons */
.stats-subinfo {
    display: none;
}

/* Stats Quality Icon (shows uncertainty with tooltip) */
.stat-quality-icon {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    cursor: help;
}

.stat-quality-icon:hover {
    color: var(--color-primary);
}

.stat-card {
    position: relative;
}

/* ========================================
 * USAGE NOTES
 * ======================================== */

/*
IMPORTANT: All CSS files must import these tokens at the top:
@import url('tokens.css');

DO NOT redefine these variables in other files.
DO NOT use hard-coded values where tokens exist.

Color Contrast Requirements (WCAG AA):
- Text on white: Use --color-text (#2d3748) - 12.6:1 ratio ✓
- Links on white: Use --color-secondary (#2c5f8d) - 4.8:1 ratio ✓
- All functional colors meet WCAG AA minimum

Spacing Convention:
- Use --space-* tokens exclusively
- Never hard-code px values for spacing
- Consistent spacing creates visual rhythm

Breakpoint Usage:
@media (max-width: var(--breakpoint-md)) { ... }
@media (min-width: var(--breakpoint-lg)) { ... }

Design Authority:
These tokens are derived from knowledge/design.md
Any changes must be documented in design.md first
*/