/* ==========================================================================
   Project Vuselela - Design System & UI Stylesheet
   National Empowerment Fund (NEF)
   Typography: 1.9. The NEF Typefaces Guide (Trajan, Rotis, Arial)
   ========================================================================== */

/* 1. NEF Corporate Signature & Typography Hierarchy */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap');

:root {
    --font-trajan: 'Trajan Pro', 'Trajan', 'Cinzel', 'Times New Roman', Georgia, serif;
    --font-rotis: 'Rotis Sans Serif', 'Rotis Semi Sans', 'Rotis', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-arial: Arial, 'Helvetica Neue', Helvetica, -apple-system, sans-serif;

    /* Primary Brand Accent (NEF Official Orange) & Secondary Palette */
    --color-brand-orange: #F2901C;
    --color-brand-orange-hover: #d97d10;
    --color-brand-orange-dark: #b86304;
    --color-pantone-453c: #d3cfb0;
    --color-pantone-453c-tint: #e6e3d5;
    --color-pantone-4545c: #ece9ba;
    --color-pantone-4545c-tint: #f3ecdc;
    --color-canvas-bg: #eaf0ec;
}

/* Primary Corporate Typography Utility Classes */
.font-trajan {
    font-family: var(--font-trajan) !important;
    letter-spacing: 0.02em;
}

.font-rotis {
    font-family: var(--font-rotis) !important;
    letter-spacing: -0.01em;
}

.font-arial {
    font-family: var(--font-arial) !important;
    letter-spacing: normal;
}

/* Legibility Rules: strictly avoid excessive letter spacing on body copy and tabular numbers */
body, p, table, td, th, input, select, textarea {
    font-family: var(--font-arial);
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .heading-brand {
    font-family: var(--font-rotis);
}

.corporate-signature {
    font-family: var(--font-trajan);
    font-weight: 700;
}

/* 2. Monochromatic Application Surfaces (No Colored Gradients) */
.ambient-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.gradient-gauge-bg {
    background: #fafafa !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* 3. Custom Smooth Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12); 
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.20); 
}

/* 4. Fluid Transitions & Keyframes */
.animate-fade-in {
    animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(3px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 5. Bespoke SVG Icon Architecture (Dual-Style System) */
.icon-bespoke {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 5A. Light/Neutral Contexts: Clean monoline geometric stroke */
.icon-light {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* 5B. Dark/Black-Background Contexts: High-contrast technical reticle & glow */
.icon-dark {
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.4));
}

/* 6. Mobile Touch & Hardware Acceleration */
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.touch-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Hide scrollbar for clean horizontal pill rails on mobile */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}