/**
 * InformexBI Design Tokens
 *
 * Mobile-first design system based on:
 * - Power BI Mobile patterns
 * - Looker/Tableau mobile apps
 * - Material Design density guidelines
 *
 * Principles:
 * 1. Mobile ≠ scaled desktop
 * 2. Density over decoration
 * 3. Content before chrome
 * 4. Touch-friendly but compact
 */

:root {
    /* ===========================================
       BREAKPOINTS (reference, used in media queries)
       =========================================== */
    --breakpoint-mobile: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-tablet-lg: 1024px;
    --breakpoint-desktop: 1200px;
    --breakpoint-large: 1440px;

    /* ===========================================
       COLOR TOKENS — Tailwind Slate/Indigo scale
       =========================================== */
    --color-primary: #6366f1;
    --color-primary-light: #818cf8;
    --color-primary-dark: #4f46e5;
    --color-primary-subtle: rgba(99, 102, 241, 0.08);

    --color-success: #10b981;
    --color-success-subtle: rgba(16, 185, 129, 0.08);
    --color-warning: #f59e0b;
    --color-warning-subtle: rgba(245, 158, 11, 0.08);
    --color-error: #ef4444;
    --color-error-subtle: rgba(239, 68, 68, 0.08);
    --color-info: #3b82f6;
    --color-info-subtle: rgba(59, 130, 246, 0.08);

    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-disabled: #94a3b8;
    --color-text-inverse: #ffffff;

    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;

    /* ===========================================
       TYPOGRAPHY - DESKTOP (default)
       Based on 16px base, modular scale 1.25
       =========================================== */
    --font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Roboto Mono', monospace;

    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;

    /* Desktop Typography Scale */
    --font-size-xs: 0.6875rem;    /* 11px */
    --font-size-sm: 0.75rem;      /* 12px */
    --font-size-base: 0.875rem;   /* 14px */
    --font-size-md: 1rem;         /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */

    /* Line Heights - Desktop */
    --line-height-tight: 1.15;
    --line-height-snug: 1.25;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;

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

    /* ===========================================
       SPACING - DESKTOP (default)
       Based on 4px grid
       =========================================== */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* Component-specific spacing - Desktop */
    --widget-padding: var(--space-5);
    --widget-padding-compact: var(--space-3);
    --widget-gap: var(--space-4);
    --widget-header-padding: var(--space-3) var(--space-4);
    --widget-border-radius: 12px;
    --grid-gap: 16px;

    --card-padding: var(--space-4);
    --card-gap: var(--space-4);

    --container-padding: var(--space-4);
    --section-gap: var(--space-6);

    /* ===========================================
       SHADOWS — Multi-layer for realistic depth
       =========================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-widget: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-widget-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);

    /* ===========================================
       TRANSITIONS — Easing curves
       =========================================== */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===========================================
       Z-INDEX SCALE
       =========================================== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* ===========================================
       TOUCH TARGETS
       =========================================== */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* ===========================================
       CHART SPECIFIC
       =========================================== */
    --chart-label-size: var(--font-size-sm);
    --chart-title-size: var(--font-size-base);
    --chart-legend-size: var(--font-size-xs);
    --chart-axis-color: #94a3b8;
    --chart-grid-color: #f1f5f9;
}

/* ===========================================
   DARK MODE OVERRIDES
   Syncs with MainLayout.razor PaletteDark colors
   Activated via data-theme="dark" on <html>
   =========================================== */
[data-theme="dark"] {
    --color-primary: #818cf8;
    --color-primary-light: #a5b4fc;
    --color-primary-dark: #6366f1;
    --color-primary-subtle: rgba(129, 140, 248, 0.10);

    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-disabled: #475569;
    --color-text-inverse: #0f172a;

    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-surface-elevated: #334155;
    --color-border: #334155;
    --color-border-light: #1e293b;

    --chart-axis-color: #94a3b8;
    --chart-grid-color: #334155;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-widget: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-widget-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ===========================================
   TABLET BREAKPOINT (768px - 1024px)
   Moderate density increase
   =========================================== */
@media (max-width: 1024px) {
    :root {
        /* Typography - Tablet */
        --font-size-xs: 0.625rem;     /* 10px */
        --font-size-sm: 0.6875rem;    /* 11px */
        --font-size-base: 0.8125rem;  /* 13px */
        --font-size-md: 0.875rem;     /* 14px */
        --font-size-lg: 1rem;         /* 16px */
        --font-size-xl: 1.125rem;     /* 18px */
        --font-size-2xl: 1.25rem;     /* 20px */
        --font-size-3xl: 1.5rem;      /* 24px */
        --font-size-4xl: 1.875rem;    /* 30px */

        /* Line Heights - Tablet (tighter) */
        --line-height-tight: 1.1;
        --line-height-snug: 1.2;
        --line-height-normal: 1.35;

        /* Spacing - Tablet */
        --widget-padding: var(--space-3);
        --widget-padding-compact: var(--space-2);
        --widget-gap: var(--space-2);
        --widget-header-padding: var(--space-2) var(--space-3);
        --widget-border-radius: 6px;

        --card-padding: var(--space-3);
        --card-gap: var(--space-3);

        --container-padding: var(--space-3);
        --section-gap: var(--space-4);

        /* Chart - Tablet */
        --chart-label-size: var(--font-size-xs);
        --chart-title-size: var(--font-size-sm);
        --chart-legend-size: 9px;
    }
}

/* ===========================================
   MOBILE BREAKPOINT (≤768px)
   Maximum density, minimal chrome
   =========================================== */
@media (max-width: 768px) {
    :root {
        /* Typography - Mobile (CRITICAL: much smaller) */
        --font-size-xs: 0.5625rem;    /* 9px */
        --font-size-sm: 0.625rem;     /* 10px */
        --font-size-base: 0.75rem;    /* 12px */
        --font-size-md: 0.8125rem;    /* 13px */
        --font-size-lg: 0.875rem;     /* 14px */
        --font-size-xl: 1rem;         /* 16px */
        --font-size-2xl: 1.125rem;    /* 18px */
        --font-size-3xl: 1.25rem;     /* 20px */
        --font-size-4xl: 1.5rem;      /* 24px */

        /* Line Heights - Mobile (very tight for density) */
        --line-height-tight: 1.05;
        --line-height-snug: 1.15;
        --line-height-normal: 1.25;
        --line-height-relaxed: 1.35;

        /* Spacing - Mobile (CRITICAL: minimal) */
        --space-1: 0.125rem;  /* 2px */
        --space-2: 0.25rem;   /* 4px */
        --space-3: 0.5rem;    /* 8px */
        --space-4: 0.75rem;   /* 12px */
        --space-5: 1rem;      /* 16px */
        --space-6: 1.25rem;   /* 20px */

        /* Widget spacing - Mobile (compact but breathable) */
        --widget-padding: var(--space-2);         /* 4px → 8px (space-3 at mobile) */
        --widget-padding-compact: var(--space-1); /* 2px */
        --widget-gap: var(--space-2);             /* 4px → 8px */
        --grid-gap: 8px;
        --widget-header-padding: var(--space-1) var(--space-2);
        --widget-border-radius: 8px;

        --card-padding: var(--space-2);
        --card-gap: var(--space-2);

        --container-padding: var(--space-2);
        --section-gap: var(--space-3);

        /* Chart - Mobile (simplified) */
        --chart-label-size: 8px;
        --chart-title-size: 11px;
        --chart-legend-size: 8px;

        /* Shadows - Mobile (lighter) */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* ===========================================
   SMALL MOBILE BREAKPOINT (≤480px)
   Ultra density for small phones
   =========================================== */
@media (max-width: 480px) {
    :root {
        /* Typography - Small Mobile */
        --font-size-xs: 0.5rem;       /* 8px */
        --font-size-sm: 0.5625rem;    /* 9px */
        --font-size-base: 0.6875rem;  /* 11px */
        --font-size-md: 0.75rem;      /* 12px */
        --font-size-lg: 0.8125rem;    /* 13px */
        --font-size-xl: 0.875rem;     /* 14px */
        --font-size-2xl: 1rem;        /* 16px */
        --font-size-3xl: 1.125rem;    /* 18px */
        --font-size-4xl: 1.25rem;     /* 20px */

        /* Spacing - Small Mobile */
        --widget-padding: 6px;
        --widget-padding-compact: 3px;
        --widget-gap: 6px;
        --widget-header-padding: 4px 6px;
        --grid-gap: 6px;

        --container-padding: 4px;

        /* Chart - Small Mobile */
        --chart-label-size: 7px;
        --chart-title-size: 10px;
        --chart-legend-size: 7px;
    }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Typography utilities */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }

.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }

.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Spacing utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }

.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }

.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

/* Mobile-only utilities */
@media (max-width: 768px) {
    .mobile-compact {
        padding: var(--widget-padding-compact) !important;
    }

    .mobile-dense {
        padding: 2px !important;
        gap: 2px !important;
    }

    .mobile-text-sm {
        font-size: var(--font-size-sm) !important;
    }

    .mobile-hide {
        display: none !important;
    }

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

/* Touch target enforcement */
.touch-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

/* ===========================================
   COMPONENT OVERRIDES FOR MUDBLAZOR
   =========================================== */

/* Make MudBlazor components respect our tokens */
@media (max-width: 768px) {
    /* MudText typography adjustments */
    .mud-typography-h1 { font-size: var(--font-size-3xl) !important; }
    .mud-typography-h2 { font-size: var(--font-size-2xl) !important; }
    .mud-typography-h3 { font-size: var(--font-size-xl) !important; }
    .mud-typography-h4 { font-size: var(--font-size-lg) !important; }
    .mud-typography-h5 { font-size: var(--font-size-md) !important; }
    .mud-typography-h6 { font-size: var(--font-size-base) !important; }
    .mud-typography-subtitle1 { font-size: var(--font-size-base) !important; }
    .mud-typography-subtitle2 { font-size: var(--font-size-sm) !important; }
    .mud-typography-body1 { font-size: var(--font-size-base) !important; }
    .mud-typography-body2 { font-size: var(--font-size-sm) !important; }
    .mud-typography-caption { font-size: var(--font-size-xs) !important; }

    /* MudPaper padding adjustments */
    .mud-paper.pa-4 { padding: var(--space-2) !important; }
    .mud-paper.pa-3 { padding: var(--space-2) !important; }
    .mud-paper.pa-2 { padding: var(--space-1) !important; }

    /* MudCard compact */
    .mud-card { border-radius: var(--widget-border-radius) !important; }
    .mud-card-header { padding: var(--space-2) !important; }
    .mud-card-content { padding: var(--space-2) !important; }
    .mud-card-actions { padding: var(--space-2) !important; }

    /* MudChip compact */
    .mud-chip {
        font-size: var(--font-size-xs) !important;
        height: 20px !important;
        padding: 0 6px !important;
    }
    .mud-chip-size-small {
        height: 16px !important;
        font-size: 9px !important;
    }

    /* MudButton touch targets */
    .mud-button {
        min-height: var(--touch-target-min);
    }
    .mud-button-text {
        padding: var(--space-1) var(--space-2) !important;
    }

    /* MudTabs compact */
    .mud-tabs-panels { padding: var(--space-2) !important; }
    .mud-tab {
        min-width: auto !important;
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* MudAlert compact */
    .mud-alert {
        padding: var(--space-2) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* MudStack gap adjustments */
    .mud-stack { gap: var(--space-2) !important; }

    /* MudIcon sizing */
    .mud-icon-size-small { font-size: 16px !important; }
    .mud-icon-size-medium { font-size: 20px !important; }
    .mud-icon-size-large { font-size: 24px !important; }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .mud-typography-h1 { font-size: var(--font-size-2xl) !important; }
    .mud-typography-h2 { font-size: var(--font-size-xl) !important; }
    .mud-typography-h3 { font-size: var(--font-size-lg) !important; }
    .mud-typography-h4 { font-size: var(--font-size-md) !important; }
    .mud-typography-h5 { font-size: var(--font-size-base) !important; }
    .mud-typography-h6 { font-size: var(--font-size-sm) !important; }

    .mud-chip {
        height: 18px !important;
        font-size: 8px !important;
    }
}