/* =================================================================
   RESPONSIVE CSS VARIABLES - Scalable Design System
   February 1, 2026
   
   BREAKPOINT STRATEGY (pixel breakpoints, scalable values):
   - PC/Desktop: >= 1680px width (min 1680x1050)
   - Tablet Landscape: 1280px - 1679px (1280x800 - 1679x1049)
   - Tablet Portrait: 800px - 1279px (800x1280 - 1049x1679)
   - Mobile: < 800px
   
   All sizing uses rem/clamp() for accessibility and scaling.
   This file MUST be loaded FIRST before all other CSS.
   ================================================================= */

/* =================================================================
   ROOT VARIABLES - Desktop (1680px+) as base
   ================================================================= */
:root {
    /* === TYPOGRAPHY SCALE === */
    --font-size-base: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);        /* 14-16px */
    --font-size-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);      /* 10-12px */
    --font-size-sm: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);      /* 12-14px */
    --font-size-md: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);          /* 14-16px */
    --font-size-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);         /* 16-18px */
    --font-size-xl: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);         /* 18-20px */
    --font-size-2xl: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);        /* 20-24px */
    --font-size-3xl: clamp(1.5rem, 1.3rem + 0.5vw, 2rem);           /* 24-32px */
    
    /* === HEADING SIZES === */
    --heading-h1: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);              /* 24-32px */
    --heading-h2: clamp(1.25rem, 1.1rem + 0.4vw, 1.625rem);         /* 20-26px */
    --heading-h3: clamp(1.125rem, 1rem + 0.3vw, 1.375rem);          /* 18-22px */
    --heading-h4: clamp(1rem, 0.95rem + 0.2vw, 1.25rem);            /* 16-20px */
    --heading-h5: clamp(0.875rem, 0.85rem + 0.15vw, 1.125rem);      /* 14-18px */
    --heading-h6: clamp(0.75rem, 0.75rem + 0.1vw, 1rem);            /* 12-16px */
    
    /* === LINE HEIGHTS === */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* === SPACING SCALE (for margins, paddings, gaps) === */
    --space-3xs: clamp(0.125rem, 0.1rem + 0.05vw, 0.25rem);         /* 2-4px */
    --space-2xs: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);          /* 4-6px */
    --space-xs: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);           /* 6-8px */
    --space-sm: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);             /* 8-12px */
    --space-md: clamp(0.75rem, 0.6rem + 0.3vw, 1rem);               /* 12-16px */
    --space-lg: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);                /* 16-24px */
    --space-xl: clamp(1.5rem, 1.2rem + 0.6vw, 2rem);                /* 24-32px */
    --space-2xl: clamp(2rem, 1.5rem + 1vw, 3rem);                   /* 32-48px */
    --space-3xl: clamp(3rem, 2rem + 1.5vw, 4rem);                   /* 48-64px */
    
    /* === BUTTON SIZES === */
    --btn-padding-y: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);      /* 6-8px */
    --btn-padding-x: clamp(0.75rem, 0.6rem + 0.3vw, 1rem);          /* 12-16px */
    --btn-font-size: clamp(0.8125rem, 0.75rem + 0.15vw, 0.9375rem); /* 13-15px */
    --btn-min-height: clamp(2rem, 1.8rem + 0.4vw, 2.5rem);          /* 32-40px */
    --btn-border-radius: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);  /* 4-6px */
    
    /* Small buttons */
    --btn-sm-padding-y: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);   /* 4-6px */
    --btn-sm-padding-x: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);     /* 8-12px */
    --btn-sm-font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);   /* 12-14px */
    
    /* Large buttons */
    --btn-lg-padding-y: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);     /* 8-12px */
    --btn-lg-padding-x: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);        /* 16-24px */
    --btn-lg-font-size: clamp(1rem, 0.9rem + 0.2vw, 1.125rem);      /* 16-18px */
    
    /* === INPUT SIZES === */
    --input-padding-y: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);    /* 6-8px */
    --input-padding-x: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);      /* 8-12px */
    --input-font-size: clamp(0.8125rem, 0.75rem + 0.15vw, 1rem);    /* 13-16px */
    --input-min-height: clamp(2rem, 1.8rem + 0.4vw, 2.5rem);        /* 32-40px */
    --input-border-radius: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);/* 4-6px */
    
    /* === LABEL & HELPER TEXT === */
    --label-font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);    /* 12-14px */
    --helper-font-size: clamp(0.6875rem, 0.65rem + 0.08vw, 0.75rem);/* 11-12px */
    
    /* === MODAL SIZES === */
    --modal-padding: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);           /* 16-24px */
    --modal-header-padding: clamp(0.75rem, 0.6rem + 0.3vw, 1rem);   /* 12-16px */
    --modal-title-size: clamp(1.125rem, 1rem + 0.3vw, 1.375rem);    /* 18-22px */
    
    /* === CARD/PANEL SIZES === */
    --card-padding: clamp(0.75rem, 0.6rem + 0.3vw, 1.25rem);        /* 12-20px */
    --card-border-radius: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem); /* 6-8px */
    
    /* === SIDEBAR === */
    --sidebar-width: clamp(12.5rem, 10rem + 5vw, 18.75rem);         /* 200-300px */
    --sidebar-min-width: 12.5rem;                                    /* 200px */
    --sidebar-max-width: 37.5rem;                                    /* 600px */
    
    /* === ICON SIZES === */
    --icon-xs: clamp(0.75rem, 0.7rem + 0.1vw, 1rem);                /* 12-16px */
    --icon-sm: clamp(1rem, 0.9rem + 0.2vw, 1.25rem);                /* 16-20px */
    --icon-md: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem);              /* 20-24px */
    --icon-lg: clamp(1.5rem, 1.3rem + 0.4vw, 2rem);                 /* 24-32px */
    --icon-xl: clamp(2rem, 1.6rem + 0.6vw, 2.5rem);                 /* 32-40px */
    
    /* === TABLE SIZES === */
    --table-cell-padding-y: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);  /* 6-8px */
    --table-cell-padding-x: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);    /* 8-12px */
    --table-font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.9375rem);     /* 12-15px */
    
    /* === HEADER/NAVIGATION === */
    --header-height: clamp(3rem, 2.5rem + 1vw, 4rem);               /* 48-64px */
    --nav-item-padding: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);     /* 8-12px */
    
    /* === TAB BAR (Mobile) === */
    --tab-bar-height: clamp(3.5rem, 3rem + 1vw, 4.5rem);            /* 56-72px */
    --tab-icon-size: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem);        /* 20-24px */
    --tab-label-size: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);     /* 10-12px */
    
    /* === TOUCH TARGETS (WCAG minimum 44px) === */
    --touch-target-min: 2.75rem;                                     /* 44px */
    
    /* === BORDER WIDTHS === */
    --border-width: 0.0625rem;                                       /* 1px */
    --border-width-thick: 0.125rem;                                  /* 2px */
    
    /* === TRANSITION DURATIONS === */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    
    /* === Z-INDEX SCALE === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* =================================================================
   TABLET LANDSCAPE (1280px - 1679px) - Slightly smaller values
   ================================================================= */
@media (min-width: 1280px) and (max-width: 1679px) {
    :root {
        /* Scale down typography slightly */
        --font-size-base: clamp(0.8125rem, 0.75rem + 0.15vw, 0.9375rem);  /* 13-15px */
        --font-size-xs: clamp(0.5625rem, 0.55rem + 0.1vw, 0.6875rem);     /* 9-11px */
        --font-size-sm: clamp(0.6875rem, 0.65rem + 0.1vw, 0.8125rem);     /* 11-13px */
        
        /* Heading scale */
        --heading-h1: clamp(1.375rem, 1.2rem + 0.4vw, 1.75rem);           /* 22-28px */
        --heading-h2: clamp(1.125rem, 1rem + 0.3vw, 1.5rem);              /* 18-24px */
        --heading-h3: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);              /* 16-20px */
        
        /* Tighter spacing */
        --space-md: clamp(0.625rem, 0.5rem + 0.25vw, 0.875rem);           /* 10-14px */
        --space-lg: clamp(0.875rem, 0.7rem + 0.35vw, 1.25rem);            /* 14-20px */
        --space-xl: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);                /* 20-28px */
        
        /* Compact buttons */
        --btn-padding-y: clamp(0.3125rem, 0.25rem + 0.1vw, 0.4375rem);    /* 5-7px */
        --btn-padding-x: clamp(0.625rem, 0.5rem + 0.25vw, 0.875rem);      /* 10-14px */
        --btn-font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);        /* 12-14px */
        --btn-min-height: clamp(1.875rem, 1.7rem + 0.35vw, 2.25rem);      /* 30-36px */
        
        /* Compact inputs */
        --input-padding-y: clamp(0.3125rem, 0.25rem + 0.1vw, 0.4375rem);  /* 5-7px */
        --input-padding-x: clamp(0.4375rem, 0.35rem + 0.15vw, 0.625rem);  /* 7-10px */
        --input-font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.9375rem);     /* 12-15px */
        --input-min-height: clamp(1.875rem, 1.7rem + 0.35vw, 2.25rem);    /* 30-36px */
        
        /* Labels */
        --label-font-size: clamp(0.6875rem, 0.65rem + 0.08vw, 0.8125rem); /* 11-13px */
        
        /* Compact header */
        --header-height: clamp(2.75rem, 2.5rem + 0.5vw, 3.5rem);          /* 44-56px */
        
        /* Tighter sidebar */
        --sidebar-width: 4.6875rem;                                       /* 75px collapsed */
    }
}

/* =================================================================
   TABLET PORTRAIT (800px - 1279px) - Mobile-like but larger
   ================================================================= */
@media (min-width: 800px) and (max-width: 1279px) {
    :root {
        /* Typography similar to mobile but slightly larger */
        --font-size-base: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);          /* 14-16px */
        --font-size-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);         /* 10-12px */
        --font-size-sm: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);        /* 12-14px */
        
        /* Headings */
        --heading-h1: clamp(1.375rem, 1.2rem + 0.4vw, 1.625rem);          /* 22-26px */
        --heading-h2: clamp(1.125rem, 1rem + 0.3vw, 1.375rem);            /* 18-22px */
        --heading-h3: clamp(1rem, 0.9rem + 0.2vw, 1.25rem);               /* 16-20px */
        
        /* Touch-friendly buttons */
        --btn-padding-y: clamp(0.4375rem, 0.4rem + 0.15vw, 0.5625rem);    /* 7-9px */
        --btn-padding-x: clamp(0.875rem, 0.75rem + 0.25vw, 1.125rem);     /* 14-18px */
        --btn-font-size: clamp(0.875rem, 0.8rem + 0.15vw, 1rem);          /* 14-16px */
        --btn-min-height: clamp(2.5rem, 2.25rem + 0.5vw, 3rem);           /* 40-48px */
        
        /* Touch-friendly inputs */
        --input-padding-y: clamp(0.5rem, 0.4rem + 0.2vw, 0.625rem);       /* 8-10px */
        --input-padding-x: clamp(0.625rem, 0.5rem + 0.25vw, 0.875rem);    /* 10-14px */
        --input-font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.0625rem);  /* 15-17px (iOS zoom fix) */
        --input-min-height: clamp(2.5rem, 2.25rem + 0.5vw, 3rem);         /* 40-48px */
        
        /* Full-width sidebar (mobile-like) */
        --sidebar-width: 100vw;
        
        /* Larger tab bar for touch */
        --tab-bar-height: clamp(3.5rem, 3.25rem + 0.5vw, 4rem);           /* 56-64px */
    }
}

/* =================================================================
   MOBILE (< 800px) - Touch-optimized
   ================================================================= */
@media (max-width: 799px) {
    :root {
        /* Mobile typography */
        --font-size-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);  /* 15-17px */
        --font-size-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.8125rem);     /* 11-13px */
        --font-size-sm: clamp(0.8125rem, 0.75rem + 0.15vw, 0.9375rem);    /* 13-15px */
        
        /* Headings */
        --heading-h1: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);             /* 20-24px */
        --heading-h2: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);         /* 17-20px */
        --heading-h3: clamp(0.9375rem, 0.85rem + 0.2vw, 1.125rem);        /* 15-18px */
        
        /* Large touch targets */
        --btn-padding-y: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem);         /* 8-12px */
        --btn-padding-x: clamp(1rem, 0.85rem + 0.3vw, 1.25rem);           /* 16-20px */
        --btn-font-size: clamp(0.9375rem, 0.875rem + 0.15vw, 1rem);       /* 15-16px */
        --btn-min-height: 2.75rem;                                         /* 44px WCAG */
        
        /* Large touch inputs */
        --input-padding-y: clamp(0.625rem, 0.5rem + 0.25vw, 0.75rem);     /* 10-12px */
        --input-padding-x: clamp(0.75rem, 0.6rem + 0.3vw, 1rem);          /* 12-16px */
        --input-font-size: 1rem;                                           /* 16px (iOS zoom fix) */
        --input-min-height: 2.75rem;                                       /* 44px WCAG */
        
        /* Full-width layout */
        --sidebar-width: 100vw;
        
        /* Larger spacing for touch */
        --space-sm: clamp(0.625rem, 0.5rem + 0.25vw, 0.875rem);           /* 10-14px */
        --space-md: clamp(1rem, 0.8rem + 0.4vw, 1.25rem);                 /* 16-20px */
    }
}

/* =================================================================
   REDUCED MOTION PREFERENCE
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
    }
}

/* =================================================================
   HIGH CONTRAST MODE
   ================================================================= */
@media (prefers-contrast: high) {
    :root {
        --border-width: 0.125rem;  /* 2px */
    }
}