/**
 * StyleUI Styles - CSS Custom Properties
 * This file defines all design tokens for the application.
 */

/* Shoelace Component Theme Override */
:root {
    --sl-tooltip-background-color: #1a1a1a;
    --sl-tooltip-color: #ffffff;
    --accent-rgb: 181, 211, 182;
    --header-height: 60px;
    --footer-height: 60px;
}

/* CSS Custom Properties */
:root {
    /* Typography */
    --font-family-base: var(--font-system);
    --font-system: Inter, 'Noto Sans SC', PingFang SC, 'Microsoft YaHei', Heiti SC, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    
    /* Colors - Light Mode (Original Style Guide) */
    --bg-layer-0: #a8a8a0;
    --bg-layer-1: #b4b4ac;
    --bg-layer-2: #c0c0b8;
    --bg-layer-3: #9c9c94;
    --bg-layer-4: #90908c;      /* Darkest background */
    
    --text-primary: #424242;
    --text-secondary: #616161;
    --text-tertiary: #757575;
    --text-quaternary: #9e9e9e;
    --text-disabled: #bdbdbd;
    --text-placeholder: #e0e0e0;
    
    --border-color: #9e9e9e00;
    --border-strong: #bdbdbd;
    
    /* Accent Colors (Original Style Guide) */
    --default-accent: #b5d3b6;
    --default-accent-hover: #9fc5a1;
    --default-accent-dark: #2c592d;
    --accent: var(--default-accent);
    --accent-hover: var(--default-accent-hover);
    --accent-text: var(--default-accent-dark);
    
    /* Semantic Colors (Pastel) */
    --primary: #b3d9ff;      /* Soft Blue - Primary actions */
    --success: #b8e6b8;      /* Soft Green - Success states */
    --warning: #ffe4a3;      /* Soft Amber - Warnings */
    --error: #ffb3ba;        /* Soft Red - Errors */
    --info: #d4c5f9;         /* Soft Purple - Information */
    --neutral: #e8e3d9;      /* Soft Beige - Neutral */

    /* RGBA versions for transparent backgrounds */
    --primary-rgba: 179, 217, 255;
    --success-rgba: 184, 230, 184;
    --warning-rgba: 255, 228, 163;
    --error-rgba: 255, 179, 186;
    --info-rgba: 212, 197, 249;

    /* Semantic Hover Colors */
    --primary-hover: #a1c9e8;
    --success-hover: #a6d4a6;
    --warning-hover: #e8d193;
    --error-hover: #e8a1a8;
    --info-hover: #c2b3e1;

    /* Dark Semantic Colors for Text */
    --primary-dark: #0059b3;
    --success-dark: #1e7e34;
    --warning-dark: #856404;
    --error-dark: #721c24;
    --info-dark: #492a7c;
    
    /* Component-Specific Variables */
    --input-background: var(--bg-layer-2);
    --input-background-focus: var(--bg-layer-3);
    --range-track-background: var(--bg-layer-3);

    /* Greyscale Colors */
    --grey-50: #fafafa;
    --grey-100: #f5f5f5;
    --grey-200: #eeeeee;
    --grey-300: #e0e0e0;
    --grey-400: #bdbdbd;
    --grey-500: #9e9e9e;
    --grey-600: #757575;
    --grey-700: #616161;
    --grey-800: #424242;
    --grey-900: #212121;
    
    /* Component Dimensions */
    --nav-width: 300px;
    --nav-width-mobile: 280px;
    --card-min-width: 350px;
    --card-header-min-height: 60px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 32px;
    --spinner-size-sm: 20px;
    --spinner-size-md: 32px;
    --spinner-size-lg: 48px;
    
    /* Overlay Colors */
    --overlay-light: rgba(0, 0, 0, 0.05);
    --overlay-medium: rgba(0, 0, 0, 0.08);
    --overlay-backdrop: rgba(0, 0, 0, 0.5);
    --overlay-light-dark: rgba(255, 255, 255, 0.05);
    --overlay-medium-dark: rgba(255, 255, 255, 0.08);
    
    /* Animation Durations */
    --duration-toast: 5000ms;
    --duration-modal: 300ms;
    
    /* Font Sizes (Original Style Guide) */
    --font-size-3xs: 0.5rem; /* New size for tiny tags */
    --font-size-2xs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Typography Controls */
    --h1-letter-spacing: -0.02em;
    --h2-letter-spacing: -0.015em;
    --h3-letter-spacing: -0.01em;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Breakpoints */
    --breakpoint-lg: 1400px;
    --breakpoint-md: 1024px;
    --breakpoint-sm: 768px;

    /* Motion variables */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Accessibility */
    --focus-ring: var(--accent);
}

/* Dark Theme */
body.dark {
    /* Dark tinted backgrounds - inverted and darkened */
    --bg-layer-0: #2a2a28;
    --bg-layer-1: #242422;
    --bg-layer-2: #1e1e1c;
    --bg-layer-3: #323230;
    --bg-layer-4: #161614;      /* Darkest background */
    
    /* Dimmed text colors for dark theme */
    --text-primary: #bbbbbb;
    --text-secondary: #8c8c8c;
    --text-tertiary: #6c6c6c;
    --text-quaternary: #4d4d4d;
    --text-disabled: #3e3e3e;
    --text-placeholder: #323232;
    
    /* Darker borders for dark theme */
    --border-color: #4a4a4a;
    --border-strong: #5a5a5a;
    
    /* Same accent colors - they work in both themes */
    /* Accent colors are already designed to work on both light and dark backgrounds */
    
    /* Slightly adjusted semantic colors for dark theme - just enough to maintain readability */
    --primary: #8fc2f0;      /* Slightly darker blue */
    --success: #9bd69b;      /* Slightly darker green */
    --warning: #f0d490;      /* Slightly darker amber */
    --error: #f09ba2;        /* Slightly darker red */
    --info: #bbb0e6;         /* Slightly darker purple */
    --neutral: #d6d1c7;      /* Slightly darker beige */
    
    /* Semantic Hover Colors (Dark Theme) */
    --primary-hover: #7dafd8;
    --success-hover: #89c489;
    --warning-hover: #d8bf82;
    --error-hover: #d88990;
    --info-hover: #a99ed4;

    /* Dark Semantic Colors for Text (Dark Theme) */
    --primary-dark: #5c9ccc;
    --success-dark: #6abf69;
    --warning-dark: #d1b160;
    --error-dark: #d17d83;
    --info-dark: #9a8ec8;

    /* Component-Specific Variables */
    --input-background: var(--bg-layer-2);
    --input-background-focus: var(--bg-layer-4);
    --range-track-background: var(--bg-layer-4);

    /* Inverted grey scale for dark theme */
    --grey-50: #212121;
    --grey-100: #424242;
    --grey-200: #616161;
    --grey-300: #757575;
    --grey-400: #9e9e9e;
    --grey-500: #bdbdbd;
    --grey-600: #e0e0e0;
    --grey-700: #eeeeee;
    --grey-800: #f5f5f5;
    --grey-900: #fafafa;
    
    /* Adjusted overlay colors for dark theme */
    --overlay-light: rgba(255, 255, 255, 0.05);
    --overlay-medium: rgba(255, 255, 255, 0.08);
    --overlay-backdrop: rgba(0, 0, 0, 0.7);
}

/* Theme Tinting System - Only affects background colors, not accent */

/* Tint background colors in light theme */
[data-tint="primary"]:not(.dark) {
    --bg-layer-0: #a8b0c0;
    --bg-layer-1: #b4bcc8;
    --bg-layer-2: #c0c8d4;
    --bg-layer-3: #9ca4b4;
    --bg-layer-4: #9098a8;
}

[data-tint="success"]:not(.dark) {
    --bg-layer-0: #a8b8a8;
    --bg-layer-1: #b4c4b4;
    --bg-layer-2: #c0d0c0;
    --bg-layer-3: #9cac9c;
    --bg-layer-4: #90a090;
}

[data-tint="warning"]:not(.dark) {
    --bg-layer-0: #c0b8a0;
    --bg-layer-1: #ccc4ac;
    --bg-layer-2: #d8d0b8;
    --bg-layer-3: #b4ac94;
    --bg-layer-4: #a8a088;
}

[data-tint="error"]:not(.dark) {
    --bg-layer-0: #c0a8ac;
    --bg-layer-1: #ccb4b8;
    --bg-layer-2: #d8c0c4;
    --bg-layer-3: #b49ca0;
    --bg-layer-4: #a89094;
}

[data-tint="info"]:not(.dark) {
    --bg-layer-0: #b0a8c0;
    --bg-layer-1: #bcb4cc;
    --bg-layer-2: #c8c0d8;
    --bg-layer-3: #a49cb4;
    --bg-layer-4: #9890a8;
}

[data-tint="neutral"]:not(.dark) {
    --bg-layer-0: #b0aca8;
    --bg-layer-1: #bcb8b4;
    --bg-layer-2: #d0ccc8;
    --bg-layer-3: #a4a09c;
    --bg-layer-4: #989490;
}

/* Tint background colors in dark theme */
[data-tint="primary"].dark {
    --bg-layer-0: #2a2c30;
    --bg-layer-1: #24262a;
    --bg-layer-2: #1e2024;
    --bg-layer-3: #323438;
    --bg-layer-4: #16181a;
}

[data-tint="success"].dark {
    --bg-layer-0: #2a302a;
    --bg-layer-1: #242a24;
    --bg-layer-2: #1e241e;
    --bg-layer-3: #323832;
    --bg-layer-4: #161a16;
}

[data-tint="warning"].dark {
    --bg-layer-0: #302e2a;
    --bg-layer-1: #2a2824;
    --bg-layer-2: #24221e;
    --bg-layer-3: #383632;
    --bg-layer-4: #1a1816;
}

[data-tint="error"].dark {
    --bg-layer-0: #302a2a;
    --bg-layer-1: #2a2424;
    --bg-layer-2: #241e1e;
    --bg-layer-3: #383232;
    --bg-layer-4: #1a1616;
}

[data-tint="info"].dark {
    --bg-layer-0: #2c2a30;
    --bg-layer-1: #26242a;
    --bg-layer-2: #201e24;
    --bg-layer-3: #343238;
    --bg-layer-4: #18161a;
}

[data-tint="neutral"].dark {
    --bg-layer-0: #2c2c2a;
    --bg-layer-1: #262624;
    --bg-layer-2: #20201e;
    --bg-layer-3: #343432;
    --bg-layer-4: #181816;
} 

body.spacing-compact {
    --space-1: 0.125rem;
    --space-1-5: 0.25rem;
    --space-2: 0.375rem;
    --space-3: 0.5rem;
    --space-4: 0.75rem;
    --space-5: 1rem;
    --space-6: 1.25rem;
    --space-8: 1.5rem;
    --space-10: 2rem;
    --space-12: 2.5rem;
    --space-16: 3rem;
    --space-20: 4rem;
    --space-24: 5rem;
}