/* ==========================================================
   CLIENTREADY LMS - DESIGN SYSTEM SPECIFICATION STYLES
   Tailored for Dark Canvas, Strict Contrast & Production Depth
   ========================================================== */

@layer base {
    html, body {
        margin: 0;
        padding: 0;
        background-color: #051424;
        color: #d4e4fa;
        font-family: 'inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'plusJakartaSans', 'inter', sans-serif;
    }
}

/* Tabular lining figures for numbers, progress, timers, metrics */
.font-label-mono, .metric-value, [data-tabular] {
    font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1;
}

/* Scrollbar Minimal Dark */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #051424;
}
::-webkit-scrollbar-thumb {
    background: #1c2b3c;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #273647;
}

/* Glassmorphism Accents */
.glass-panel {
    background: rgba(15, 19, 29, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(31, 36, 48, 0.8);
}

/* Glowing Accent Ring on Interactive Cards */
.glow-card:hover {
    border-color: rgba(0, 245, 160, 0.4);
    box-shadow: 0 0 24px -4px rgba(0, 245, 160, 0.15);
}

/* Video Player Range Slider */
input[type="range"] {
    accent-color: #00f5a0;
}

/* Line Clamp Utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Checkbox Accent */
input[type="checkbox"] {
    accent-color: #00f5a0;
}