:root {
    --bs-blue: #1d71b8;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #f36;
    --bs-red: #dc3545;
    --bs-orange: #f90;
    --bs-yellow: #cba87a;
    --bs-green: #28a745;
    --bs-teal: #20c997;
    --bs-cyan: #17a2b8;
    --bs-primary: #1d71b8;
    --bs-secondary: #1d71b8;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #cba87a;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #2c2e36;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-primary-bg-subtle: #d2e3f1;
    --bs-primary-border-subtle: #a5c6e3;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.sr-only:focus {
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    white-space: normal;
}

html, body { 
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    color: var(--bs-gray-900);
}

/* =============================================
   Global Icon Alignment (Remix Icons)
   Ensures all <i class="ri-*"> icons are
   vertically centred and never overflow on
   any screen size.
   ============================================= */

i[class*="ri-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

/* When an icon sits beside text inside a flex row, keep it centred */
.flex i[class*="ri-"],
.inline-flex i[class*="ri-"] {
    align-self: center;
}

/* =============================================
   Global Fluid / Responsive Typography
   Scales all Tailwind fixed text-size classes
   to be viewport-relative on mobile devices.
   ============================================= */

/* --- text-9xl: used for decorative 404 numbers --- */
@media (max-width: 639px) {
    .text-9xl  { font-size: clamp(3.5rem, 18vw, 8rem)  !important; }
    .text-8xl  { font-size: clamp(3rem,   16vw, 6rem)  !important; }
    .text-7xl  { font-size: clamp(2.5rem, 13vw, 4.5rem)!important; }
    .text-6xl  { font-size: clamp(2rem,   10vw, 3.75rem)!important; }
    .text-5xl  { font-size: clamp(1.75rem, 8vw, 3rem)  !important; }
    .text-4xl  { font-size: clamp(1.5rem,  7vw, 2.25rem)!important; }
    .text-3xl  { font-size: clamp(1.25rem, 6vw, 1.875rem)!important; }
    .text-2xl  { font-size: clamp(1.1rem,  5vw, 1.5rem) !important; }
    .text-xl   { font-size: clamp(1rem,    4vw, 1.25rem) !important; }

    /* Icon-specific: clamp keeps them proportional but never oversized */
    i[class*="ri-"].text-5xl { font-size: clamp(1.6rem,  8vw, 3rem)   !important; }
    i[class*="ri-"].text-4xl { font-size: clamp(1.4rem,  7vw, 2.25rem)!important; }
    i[class*="ri-"].text-3xl { font-size: clamp(1.2rem,  6vw, 1.875rem)!important; }
    i[class*="ri-"].text-2xl { font-size: clamp(1rem,    5vw, 1.5rem)  !important; }

    /* Standalone large icon containers (404, success, cancel pages) */
    i[class*="ri-"].text-9xl { font-size: clamp(3rem, 16vw, 6rem) !important; }
    i[class*="ri-"].text-8xl { font-size: clamp(2.5rem,13vw, 5rem) !important; }
}

/* --- sm breakpoint (640-767px): partial scaling for medium-small screens --- */
@media (min-width: 640px) and (max-width: 767px) {
    .text-9xl  { font-size: clamp(5rem,   16vw, 8rem)   !important; }
    .text-8xl  { font-size: clamp(4rem,   13vw, 6rem)   !important; }
    .text-6xl  { font-size: clamp(2.5rem,  7vw, 3.75rem)!important; }
    .text-5xl  { font-size: clamp(2rem,    6vw, 3rem)   !important; }
    .text-4xl  { font-size: clamp(1.75rem, 5vw, 2.25rem)!important; }
    .text-3xl  { font-size: clamp(1.4rem,  4vw, 1.875rem)!important; }
}

.glass { 
    backdrop-filter: blur(16px) saturate(180%);
    background: rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.drop-zone {
    border: 2px dashed var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-xl);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, 
        rgba(29, 113, 184, 0.03) 0%, 
        rgba(23, 162, 184, 0.02) 100%
    );
    color: var(--bs-gray-700);
    position: relative;
    overflow: hidden;
}

.drop-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, 
        rgba(29, 113, 184, 0.08) 0%, 
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drop-zone:hover::before {
    opacity: 1;
}

.drop-zone:hover {
    border-color: var(--bs-primary);
    background: linear-gradient(135deg, 
        rgba(29, 113, 184, 0.06) 0%, 
        rgba(23, 162, 184, 0.04) 100%
    );
    box-shadow: 0 4px 12px rgba(29, 113, 184, 0.12);
    transform: translateY(-2px);
}

.drop-zone.dragover {
    background: linear-gradient(135deg, 
        var(--bs-primary-bg-subtle) 0%, 
        rgba(23, 162, 184, 0.15) 100%
    );
    border-color: var(--bs-primary);
    border-style: solid;
    box-shadow: 0 8px 24px rgba(29, 113, 184, 0.2),
                inset 0 0 0 1px rgba(29, 113, 184, 0.1);
    transform: scale(1.02);
}

.drop-zone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, 
        #2563EB 0%, 
        #4F46E5 100%
    );
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.35);
}

.bg-gradient-primary:hover {
    box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
    transition: all 0.3s ease;
}