/**
 * LAYOUT TOKENS - PharmData Design System v2.0
 * Breakpoints, Z-Index, Densidade, Containers
 */

:root {
    /* ===================
       BREAKPOINTS
       Mobile-first approach
       =================== */

    --breakpoint-xs: 480px;   /* Small phones */
    --breakpoint-sm: 640px;   /* Large phones */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops */
    --breakpoint-xl: 1280px;  /* Desktops */
    --breakpoint-2xl: 1536px; /* Large desktops */

    /* Container max-widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --container-full: 100%;

    /* ===================
       Z-INDEX SCALE
       Prevent z-index wars with standardized layers
       =================== */

    --z-below: -1;          /* Hidden/below content */
    --z-base: 0;            /* Default layer */
    --z-raised: 10;         /* Slightly elevated (cards on hover) */
    --z-dropdown: 100;      /* Dropdowns, select menus */
    --z-sticky: 200;        /* Sticky headers, sidebars */
    --z-overlay: 300;       /* Overlays, backdrops */
    --z-modal: 400;         /* Modals, dialogs */
    --z-popover: 500;       /* Popovers, tooltips */
    --z-toast: 600;         /* Toast notifications */
    --z-tooltip: 700;       /* Tooltips (highest interactive) */
    --z-max: 9999;          /* Emergency override only */

    /* ===================
       ICON SIZES
       Consistent icon sizing by context
       =================== */

    --icon-2xs: 0.625rem;   /* 10px - Micro indicators */
    --icon-xs: 0.75rem;     /* 12px - Inline with text-xs */
    --icon-sm: 0.875rem;    /* 14px - Inline with text-sm, badges */
    --icon-md: 1rem;        /* 16px - Default, buttons, inputs */
    --icon-lg: 1.25rem;     /* 20px - Section headers */
    --icon-xl: 1.5rem;      /* 24px - Cards, navigation */
    --icon-2xl: 2rem;       /* 32px - Empty states, illustrations */
    --icon-3xl: 2.5rem;     /* 40px - Hero sections */
    --icon-4xl: 3rem;       /* 48px - Large empty states */

    /* ===================
       BORDER RADIUS
       =================== */

    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;  /* Pill shape */

    /* ===================
       ASPECT RATIOS
       =================== */

    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-photo: 4 / 3;
    --aspect-portrait: 3 / 4;
}

/* ===================
   DENSITY VARIANTS
   Adapt interface density for different use cases
   =================== */

/* Default: Comfortable density */
:root,
[data-density="comfortable"] {
    --density-multiplier: 1;
    --density-text-base: 1rem;
    --density-line-height: 1.6;
    --density-cell-padding: var(--space-3) var(--space-4);
    --density-button-padding: var(--space-2) var(--space-4);
    --density-input-padding: var(--space-2) var(--space-3);
    --density-card-padding: var(--space-4);
    --density-row-height: 3rem;
}

/* Compact: For data-dense interfaces */
[data-density="compact"] {
    --density-multiplier: 0.85;
    --density-text-base: 0.875rem;
    --density-line-height: 1.4;
    --density-cell-padding: var(--space-2) var(--space-3);
    --density-button-padding: var(--space-1) var(--space-3);
    --density-input-padding: var(--space-1) var(--space-2);
    --density-card-padding: var(--space-3);
    --density-row-height: 2.25rem;
}

/* Spacious: For focus/reading modes */
[data-density="spacious"] {
    --density-multiplier: 1.15;
    --density-text-base: 1.125rem;
    --density-line-height: 1.8;
    --density-cell-padding: var(--space-4) var(--space-6);
    --density-button-padding: var(--space-3) var(--space-6);
    --density-input-padding: var(--space-3) var(--space-4);
    --density-card-padding: var(--space-6);
    --density-row-height: 3.5rem;
}

/* Apply density to common elements */
[data-density] {
    font-size: var(--density-text-base);
    line-height: var(--density-line-height);
}

[data-density] .btn {
    padding: var(--density-button-padding);
}

[data-density] input,
[data-density] select,
[data-density] textarea {
    padding: var(--density-input-padding);
}

[data-density] td,
[data-density] th {
    padding: var(--density-cell-padding);
}

[data-density] .card {
    padding: var(--density-card-padding);
}

[data-density] tr {
    height: var(--density-row-height);
}

/* ===================
   CONTAINER UTILITIES
   =================== */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }
.container-full { max-width: var(--container-full); }

/* ===================
   RESPONSIVE UTILITIES
   =================== */

/* Hide/show at breakpoints */
@media (max-width: 639px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 767px) {
    .hidden-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-md { display: none !important; }
}

@media (min-width: 1024px) {
    .hidden-lg { display: none !important; }
    .show-mobile { display: none !important; }
}

@media (max-width: 1023px) {
    .show-lg { display: none !important; }
}