/**
 * Zettelcrypt Design System - CSS Variables
 * Theme engine with dark and light mode support
 */

/* --- DARK THEME (DEFAULT) --- */
:root[data-theme="dark"],
:root {
    /* Backgrounds */
    --bg-app: #18181B; /* Zinc 900 */
    --bg-surface: #27272A; /* Zinc 800 */
    --bg-surface-hover: #3F3F46; /* Zinc 700 */

    /* Text Colors */
    --text-primary: #F4F4F5; /* Zinc 100 */
    --text-secondary: #A1A1AA; /* Zinc 400 */
    --text-tertiary: #52525B; /* Zinc 600 */

    /* Borders */
    --border: #3F3F46; /* Zinc 700 */
    --border-hover: #52525B; /* Zinc 600 */

    /* Accent Colors */
    --accent-mint: #4ADE80; /* Encryption/Security */
    --accent-indigo: #818CF8; /* Primary Actions/Links */
    --accent-indigo-hover: #6366F1;

    /* Status Colors */
    --status-success: #4ADE80; /* Green */
    --status-warning: #FB923C; /* Orange */
    --status-error: #F87171; /* Red */
    --status-info: #60A5FA; /* Blue */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    /* Transitions */
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* --- LIGHT THEME --- */
:root[data-theme="light"] {
    /* Backgrounds */
    --bg-app: #FAFAF9; /* Warm Stone */
    --bg-surface: #FFFFFF; /* White */
    --bg-surface-hover: #F4F4F5; /* Zinc 100 */

    /* Text Colors */
    --text-primary: #18181B; /* Zinc 900 */
    --text-secondary: #71717A; /* Zinc 500 */
    --text-tertiary: #D4D4D8; /* Zinc 300 */

    /* Borders */
    --border: #E5E7EB; /* Gray 200 */
    --border-hover: #D4D4D8; /* Zinc 300 */

    /* Accent Colors */
    --accent-mint: #10B981; /* Encryption/Security */
    --accent-indigo: #6366F1; /* Primary Actions/Links */
    --accent-indigo-hover: #4F46E5;

    /* Status Colors */
    --status-success: #10B981; /* Green */
    --status-warning: #F97316; /* Orange */
    --status-error: #EF4444; /* Red */
    --status-info: #3B82F6; /* Blue */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* --- TYPOGRAPHY --- */
:root {
    /* Font Families */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', Consolas, Monaco, monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
}

/* --- SPACING --- */
:root {
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-2xl: 3rem;    /* 48px */
}

/* --- BORDER RADIUS --- */
:root {
    --radius-sm: 4px;
    --radius: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}

/* --- Z-INDEX LAYERS --- */
:root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-tooltip: 3000;
}

/* --- GLOBAL TRANSITIONS --- */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: var(--transition);
    transition-timing-function: ease;
}

/* Disable transitions during theme switching to prevent flash */
.theme-transitioning * {
    transition: none !important;
}