/* ============================================================================ */
/* ACT Platform Design Tokens - Design System Foundation                       */
/* ============================================================================ */

:root {
    /* ===== Color Palette ===== */
    /* Primary Colors - Enterprise Blue */
    --color-primary: #003366;
    --color-primary-dark: #001f40;
    --color-primary-darker: #001428;
    --color-primary-light: #0052cc;
    --color-primary-lighter: #1e90ff;

    /* Secondary Colors - Professional Blue */
    --color-secondary: #0066cc;
    --color-secondary-dark: #003d99;
    --color-secondary-light: #1e90ff;
    
    /* Success Colors */
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-success-light: #10b981;
    --color-success-bg: #f0fdf4;
    --color-success-border: #86efac;
    
    /* Warning Colors */
    --color-warning: #ea580c;
    --color-warning-dark: #c2410c;
    --color-warning-light: #fb923c;
    --color-warning-bg: #fff7ed;
    --color-warning-border: #fdba74;
    
    /* Danger/Error Colors */
    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-danger-light: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fca5a5;
    
    /* Info Colors */
    --color-info: #0284c7;
    --color-info-light: #38bdf8;
    --color-info-bg: #e0f2fe;
    --color-info-border: #7dd3fc;
    
    /* Neutral Colors */
    --color-text-primary: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #9ca3af;
    --color-text-disabled: #d1d5db;
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-app: #f6f6f8;
    
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-border-dark: #d1d5db;
    
    /* White/Black */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* ===== Spacing Scale ===== */
    --spacing-xs: 0.15rem;     /* 2.4px */
    --spacing-sm: 0.3rem;      /* 4.8px */
    --spacing-md: 0.5rem;      /* 8px */
    --spacing-base: 0.75rem;   /* 12px */
    --spacing-lg: 0.875rem;    /* 14px */
    --spacing-xl: 1rem;        /* 16px */
    --spacing-2xl: 1.25rem;    /* 20px */
    --spacing-3xl: 1.5rem;     /* 24px */
    --spacing-4xl: 2rem;       /* 32px */
    
    /* ===== Typography ===== */
    --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-mono: "Monaco", "Courier New", monospace;
    
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 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: 2rem;     /* 32px */
    --font-size-5xl: 2.5rem;   /* 40px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 1.9;

    /* ===== Responsive Breakpoints ===== */
    /* Modern breakpoint scale covering all devices */
    --breakpoint-xs: 320px;      /* Small mobile phones */
    --breakpoint-sm: 640px;      /* Large mobile phones */
    --breakpoint-md: 768px;      /* Tablets (portrait) */
    --breakpoint-lg: 1024px;     /* Tablets (landscape) & small laptops */
    --breakpoint-xl: 1280px;     /* Desktops */
    --breakpoint-2xl: 1536px;    /* Large desktops */
    --breakpoint-3xl: 1920px;    /* Ultra-wide displays */
    --breakpoint-4xl: 2560px;    /* 4K displays */

    /* Typography - Content readability */
    --max-line-length: 75ch;               /* Optimal paragraph line length */
    --paragraph-spacing: 1rem;             /* Space between paragraphs */
    
    /* ===== Border Radius ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;      /* 4px */
    --radius-base: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;       /* 8px */
    --radius-lg: 0.75rem;      /* 12px */
    --radius-xl: 1rem;         /* 16px */
    --radius-2xl: 1.5rem;      /* 24px */
    --radius-full: 9999px;
    
    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(79, 70, 229, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    
    /* ===== Layout ===== */
    --layout-sidebar-width: 260px;
    --layout-header-height: 3.5rem;
    --layout-container-max-width: 1400px;
    --layout-container-padding: var(--spacing-lg) var(--spacing-md);
    --layout-container-padding-compact: var(--spacing-sm) var(--spacing-sm);

    /* Page Layout - Compact values (for spacing WITHIN pages, not top offset) */
    --page-padding-top: 0.25rem;           /* Top spacing for page headers (not navbar offset!) */
    --page-padding-bottom: 0.5rem;         /* Bottom page spacing */
    --page-section-gap: 0.75rem;           /* Gap between page sections */

    /* Section Spacing - Improved visual hierarchy */
    --section-spacing: 2rem;               /* 32px - vertical spacing between sections */
    --section-spacing-lg: 3rem;            /* 48px - for major sections */
    --section-spacing-xl: 4rem;            /* 64px - for hero-to-content transitions */
    
    /* ===== Component Tokens ===== */

    /* Buttons */
    --btn-padding-sm: 0.25rem 0.5rem;
    --btn-padding-base: 0.375rem 0.75rem;
    --btn-padding-lg: 0.5rem 1rem;
    --btn-padding-xl: 0.625rem 1.25rem;

    --btn-font-size-sm: var(--font-size-sm);
    --btn-font-size-base: var(--font-size-base);
    --btn-font-size-lg: var(--font-size-lg);

    /* Cards */
    --card-padding: var(--spacing-base);
    --card-padding-compact: var(--spacing-sm);
    --card-bg: var(--color-bg-primary);
    --card-border: var(--color-border);
    --card-radius: var(--radius-md);
    --card-shadow: var(--shadow-sm);

    /* Headers */
    --header-padding: var(--spacing-base);        /* Reduced from 1.5rem */
    --header-margin-bottom: var(--spacing-xl);    /* Reduced from 2rem */
    --header-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --header-title-size: var(--font-size-3xl);    /* Reduced from 2rem to 1.875rem */
    --header-subtitle-size: var(--font-size-sm);  /* Reduced from 0.95rem to 0.875rem */
    
    /* Forms */
    --input-padding: 0.5rem 0.75rem;
    --input-border-color: var(--color-border);
    --input-border-radius: var(--radius-base);
    --input-focus-border-color: var(--color-primary);
    
    /* Tables */
    --table-cell-padding: 0.75rem;          /* Reduced for compactness */
    --table-cell-padding-compact: 0.5rem;
    --table-border-color: var(--color-border);
    --table-hover-bg: var(--color-bg-secondary);
    
    /* Badges */
    --badge-padding: 0.375rem 0.75rem;
    --badge-font-size: var(--font-size-sm);
    --badge-border-radius: var(--radius-full);
    
    /* Alerts */
    --alert-padding: var(--spacing-base);
    --alert-border-radius: var(--radius-md);
    --alert-border-width: 0 0 0 4px;

    /* ===== Visual Separators & Dividers ===== */
    --divider-color: var(--color-border);
    --divider-color-light: var(--color-border-light);
    --divider-thickness: 1px;
    --divider-thickness-bold: 2px;

    /* Gradient dividers */
    --divider-gradient-subtle: linear-gradient(to right, transparent, var(--color-border), transparent);
    --divider-gradient-primary: linear-gradient(to right, transparent, var(--color-primary-light), transparent);
    --divider-gradient-accent: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================================================ */
/* 1024px Viewport Optimization - Spacing for tablets & small laptops          */
/* ============================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        /* Moderate max-width reduction */
        --layout-container-max-width: 1000px;   /* 1400px → 1000px */

        /* Progressive spacing reduction */
        --section-spacing: 1.875rem;         /* 32px → 30px */
        --section-spacing-lg: 2.8125rem;     /* 48px → 45px */
        --section-spacing-xl: 3.75rem;       /* 64px → 60px */

        /* Container padding */
        --layout-container-padding: var(--spacing-base) var(--spacing-xl);
        --layout-container-padding-compact: var(--spacing-sm) var(--spacing-base);

        /* Heading margins */
        --header-margin-bottom: 0.9rem;      /* 16px → 14.4px */
        --header-padding: var(--spacing-base);
    }
}

/* ============================================================================ */
/* 1280px Viewport Optimization - Moderate spacing for standard desktops      */
/* ============================================================================ */
@media (min-width: 1280px) and (max-width: 1399px) {
    :root {
        /* Slightly reduced max-width for better balance */
        --layout-container-max-width: 1150px;   /* 1400px → 1150px (moderate constraint) */

        /* Moderate spacing reduction */
        --section-spacing: 1.75rem;          /* 32px → 28px */
        --section-spacing-lg: 2.625rem;      /* 48px → 42px */
        --section-spacing-xl: 3.5rem;        /* 64px → 56px */

        /* Moderate container padding */
        --layout-container-padding: var(--spacing-lg) var(--spacing-xl);
        --layout-container-padding-compact: var(--spacing-md) var(--spacing-lg);

        /* Moderate heading margins */
        --header-margin-bottom: 0.9375rem;   /* 16px → 15px */
        --header-padding: var(--spacing-base);
    }
}

/* ============================================================================ */
/* 1400px Viewport Optimization - Compact spacing for 1400x1050 resolution    */
/* ============================================================================ */
@media (min-width: 1400px) and (max-width: 1600px) {
    :root {
        /* Reduced max-width for more compact content area */
        --layout-container-max-width: 1100px;   /* 1400px → 1100px (narrower content) */

        /* Reduced spacing for compact layout */
        --section-spacing: 1.5rem;           /* 32px → 24px */
        --section-spacing-lg: 2.25rem;       /* 48px → 36px */
        --section-spacing-xl: 3rem;          /* 64px → 48px */

        /* Compact container padding - adds side margins */
        --layout-container-padding: var(--spacing-lg) var(--spacing-xl);
        --layout-container-padding-compact: var(--spacing-md) var(--spacing-lg);

        /* Reduced heading margins for compactness */
        --header-margin-bottom: var(--spacing-lg);     /* 16px → 14px */
        --header-padding: var(--spacing-md);           /* 12px → 8px */
    }
}