/* JadUI Base Styles — Loaded once per app */
/* Variables are expected to be set by ThemeProvider */

/* ===== Design Token Defaults (dark) ===== */
:root {
    /* Legacy compatibility tokens */
    --accent-primary: #33B5E5;
    --accent-secondary: #4cc3f0;
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #f44336;
    --info: #2196f3;
    --surface-primary: #1A1A1A;
    --surface-secondary: #252525;
    --surface-tertiary: #2A2A2A;
    --surface-hover: #2E2E2E;
    --surface-tooltip: #333;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --text-muted: #606060;
    --text-inverse: #000000;
    --border-default: #3A3A3A;
    --border-hover: #4A4A4A;
    --border-subtle: #2A2A2A;
    --border-strong: #4A4A4A;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== JadUI Token System v1 ===== */
    /* Base: 11px, Scale: golden ratio φ=1.618 */
    --jad-space-3xs: 2px;
    --jad-space-2xs: 3px;
    --jad-space-xs: 5px;
    --jad-space-sm: 7px;
    --jad-space-md: 11px;
    --jad-space-lg: 18px;
    --jad-space-xl: 29px;
    --jad-space-2xl: 47px;
    --jad-space-3xl: 76px;
    --jad-space-4xl: 123px;

    /* Typography */
    --jad-font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --jad-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
    --jad-text-2xs: 9px;
    --jad-text-xs: 11px;
    --jad-text-sm: 13px;
    --jad-text-base: 15px;
    --jad-text-lg: 18px;
    --jad-text-xl: 24px;
    --jad-text-2xl: 29px;
    --jad-text-3xl: 39px;
    --jad-text-4xl: 47px;
    --jad-weight-light: 300;
    --jad-weight-regular: 400;
    --jad-weight-medium: 500;
    --jad-weight-semibold: 600;
    --jad-weight-bold: 700;
    --jad-tracking-tight: -0.02em;
    --jad-tracking-normal: 0;
    --jad-tracking-wide: 0.02em;
    --jad-tracking-wider: 0.04em;

    /* Semantic Colors — Dark Theme (default) */
    --jad-bg-canvas: #0a0a0f;
    --jad-bg-surface: #111118;
    --jad-bg-surface-alt: #16161f;
    --jad-bg-elevated: #1c1c26;
    --jad-bg-inset: #08080c;
    --jad-bg-overlay: rgba(0, 0, 0, 0.7);
    --jad-fg-primary: rgba(255, 255, 255, 0.92);
    --jad-fg-secondary: rgba(255, 255, 255, 0.65);
    --jad-fg-tertiary: rgba(255, 255, 255, 0.40);
    --jad-fg-inverse: rgba(0, 0, 0, 0.9);
    --jad-fg-on-accent: #ffffff;
    --jad-accent-default: #3b82f6;
    --jad-accent-hover: #60a5fa;
    --jad-accent-active: #2563eb;
    --jad-accent-subtle: rgba(59, 130, 246, 0.15);
    --jad-accent-muted: rgba(59, 130, 246, 0.08);
    --jad-success-default: #22c55e;
    --jad-success-hover: #4ade80;
    --jad-success-subtle: rgba(34, 197, 94, 0.15);
    --jad-warning-default: #f59e0b;
    --jad-warning-hover: #fbbf24;
    --jad-warning-subtle: rgba(245, 158, 11, 0.15);
    --jad-danger-default: #ef4444;
    --jad-danger-hover: #f87171;
    --jad-danger-subtle: rgba(239, 68, 68, 0.15);
    --jad-info-default: #6b7280;
    --jad-info-hover: #9ca3af;
    --jad-info-subtle: rgba(107, 114, 128, 0.15);
    --jad-border-default: rgba(255, 255, 255, 0.12);
    --jad-border-subtle: rgba(255, 255, 255, 0.06);
    --jad-border-strong: rgba(255, 255, 255, 0.20);
    --jad-border-focus: #3b82f6;
    --jad-border-accent: rgba(59, 130, 246, 0.50);
    --jad-chart-line-1: #3b82f6;
    --jad-chart-line-2: #8b5cf6;
    --jad-chart-line-3: #10b981;
    --jad-chart-positive: #22c55e;
    --jad-chart-negative: #ef4444;
    --jad-chart-volume: #3b82f6;
    --jad-chart-grid: rgba(255, 255, 255, 0.08);
    --jad-chart-crosshair: rgba(255, 255, 255, 0.3);
}

/* ===== Light Theme ===== */
:root[data-theme="light"] {
    --jad-bg-canvas: #f8f9fa;
    --jad-bg-surface: #ffffff;
    --jad-bg-surface-alt: #f1f3f4;
    --jad-bg-elevated: #ffffff;
    --jad-bg-inset: #f1f3f4;
    --jad-bg-overlay: rgba(0, 0, 0, 0.5);
    --jad-fg-primary: rgba(0, 0, 0, 0.9);
    --jad-fg-secondary: rgba(0, 0, 0, 0.6);
    --jad-fg-tertiary: rgba(0, 0, 0, 0.4);
    --jad-fg-inverse: #ffffff;
    --jad-fg-on-accent: #ffffff;
    --jad-accent-default: #2563eb;
    --jad-accent-hover: #1d4ed8;
    --jad-accent-active: #1e40af;
    --jad-accent-subtle: rgba(37, 99, 235, 0.10);
    --jad-accent-muted: rgba(37, 99, 235, 0.05);
    --jad-success-default: #16a34a;
    --jad-success-hover: #15803d;
    --jad-success-subtle: rgba(22, 163, 74, 0.10);
    --jad-warning-default: #d97706;
    --jad-warning-hover: #b45309;
    --jad-warning-subtle: rgba(217, 119, 6, 0.10);
    --jad-danger-default: #dc2626;
    --jad-danger-hover: #b91c1c;
    --jad-danger-subtle: rgba(220, 38, 38, 0.10);
    --jad-info-default: #4b5563;
    --jad-info-hover: #374151;
    --jad-info-subtle: rgba(75, 85, 99, 0.10);
    --jad-border-default: rgba(0, 0, 0, 0.12);
    --jad-border-subtle: rgba(0, 0, 0, 0.06);
    --jad-border-strong: rgba(0, 0, 0, 0.20);
    --jad-border-focus: #2563eb;
    --jad-border-accent: rgba(37, 99, 235, 0.50);
    --jad-chart-line-1: #2563eb;
    --jad-chart-line-2: #7c3aed;
    --jad-chart-line-3: #059669;
    --jad-chart-positive: #16a34a;
    --jad-chart-negative: #dc2626;
    --jad-chart-volume: #2563eb;
    --jad-chart-grid: rgba(0, 0, 0, 0.08);
    --jad-chart-crosshair: rgba(0, 0, 0, 0.3);
}

/* ===== Select / Dropdown styling ===== */
.jad-select-sm {
    padding: 5px 24px 5px 8px;
    background: var(--surface-secondary, #252525);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    border: 1px solid var(--border-default, #3A3A3A);
    border-radius: 4px;
    color: var(--text-primary, #fff);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.jad-select-sm:focus {
    outline: none;
    border-color: var(--accent-primary, #33B5E5);
    box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.2);
}

.jad-select-sm:hover {
    border-color: var(--border-hover, #4A4A4A);
}

.jad-select-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Option styling (limited browser support, but improves dark mode) */
.jad-select-sm option {
    background: var(--surface-secondary, #252525);
    color: var(--text-primary, #fff);
    padding: 4px 8px;
}

.jad-table-filter-select {
    min-width: 80px;
    max-width: 140px;
}

/* ===== Base utilities ===== */
.jadui-reset {
    box-sizing: border-box;
}

/* Focus ring utility */
.jadui-focus:focus-visible {
    outline: 2px solid var(--accent-primary, #33B5E5);
    outline-offset: 2px;
}

/* Disabled state utility */
.jadui-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Screen reader only */
.jadui-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visually hidden but accessible */
.jadui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===== Responsive display utilities ===== */
@media (max-width: 640px) {
    .jadui-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .jadui-hide-desktop {
        display: none !important;
    }
}

/* ===== Touch optimization ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets on touch devices */
    .jad-btn,
    .jad-dropdown-trigger,
    .jad-accordion-header,
    .jad-chip--clickable,
    .jad-toast-close {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover-only effects */
    .jad-btn:hover,
    .jad-dropdown-trigger:hover,
    .jad-accordion-header:hover {
        /* Touch devices don't benefit from hover transitions */
    }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-tertiary, #2A2A2A);
}

::-webkit-scrollbar-thumb {
    background: var(--border-default, #3A3A3A);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover, #4A4A4A);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default, #3A3A3A) var(--surface-tertiary, #2A2A2A);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Text truncation ===== */
.jadui-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jadui-truncate-lines-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Gap utilities ===== */
.jadui-gap-1 {
    gap: 4px;
}

.jadui-gap-2 {
    gap: 8px;
}

.jadui-gap-3 {
    gap: 12px;
}

.jadui-gap-4 {
    gap: 16px;
}

/* ===== Position utilities ===== */
.jadui-sticky-top {
    position: sticky;
    top: 0;
    z-index: 40;
}

/* ===== Aspect ratio ===== */
.jadui-aspect-square {
    aspect-ratio: 1 / 1;
}

.jadui-aspect-video {
    aspect-ratio: 16 / 9;
}

/* ===== Responsive breakpoints ===== */
/* Mobile: < 640px */
@media (max-width: 640px) {
    .jadui-stack-mobile {
        flex-direction: column !important;
    }

    .jadui-full-width-mobile {
        width: 100% !important;
    }

    .jadui-text-center-mobile {
        text-align: center !important;
    }

    .jadui-p-2-mobile {
        padding: 8px !important;
    }

    .jadui-gap-2-mobile {
        gap: 8px !important;
    }
}

/* Tablet: 641px - 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
    .jadui-hide-tablet {
        display: none !important;
    }

    .jadui-stack-tablet {
        flex-direction: column !important;
    }
}

/* Desktop: > 1024px */
@media (min-width: 1025px) {
    .jadui-hide-desktop {
        display: none !important;
    }
}

/* ===== High contrast mode support ===== */
@media (prefers-contrast: more) {
    .jad-btn,
    .jad-dropdown-trigger,
    .jad-input,
    .jad-select-sm {
        border-width: 2px;
    }

    .jadui-focus:focus-visible {
        outline-width: 3px;
    }
}