/**
 * Smart Wheel Design System — base.css
 * Core typography, tokens, scrollbars and resets
 */

/* Sora Font Face definitions */
@font-face {
    font-family: 'Sora-Regular';
    src: url('../fonts/sora/sora-latin-400-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora-SemiBold';
    src: url('../fonts/sora/sora-latin-600-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-600-normal.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora-Bold';
    src: url('../fonts/sora/sora-latin-700-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-700-normal.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Inter Font Face definitions */
@font-face {
    font-family: 'Inter-Regular';
    src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'),
         url('../fonts/inter/inter-latin-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Medium';
    src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'),
         url('../fonts/inter/inter-latin-500-normal.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Bold';
    src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'),
         url('../fonts/inter/inter-latin-700-normal.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Global Tokens */
:root {
    --sw-black-const: #030E01;
    --sw-white-const: #F9FFF9;

    --sw-black: #030E01;
    --sw-green-dark: #12570A;
    --sw-green: #4FC442;
    --sw-green-light: #A4FF9A;
    --sw-white: #F9FFF9;
    --sw-label-green: var(--sw-green-dark);

    /* Default Theme: White (Light) Mode */
    --sw-bg: #F4F8F4; /* Rich off-white with a very soft premium green-gray tint */
    --sw-surface: #FFFFFF;
    --sw-surface-soft: #E5EFE4; /* Sophisticated light green-gray */
    --sw-border: rgba(79, 196, 66, 0.14);
    --sw-text: #041E02;
    --sw-text-muted: rgba(4, 30, 2, 0.76);
    --sw-text-soft: rgba(4, 30, 2, 0.58);
    --sw-focus: #12570A;

    --sw-card-bg: #FFFFFF; /* Seamless blending card surface */
    --sw-card-shadow: 0 4px 18px rgba(4, 30, 2, 0.03);
    --sw-card-hover-shadow: 0 10px 28px rgba(4, 30, 2, 0.07);
    
    /* Hero backgrounds in Light Mode */
    --sw-hero-bg-url: url('../img/desk-white.png');
    --sw-hero-bg-url-mobile: url('../img/mob-white.png');
    
    /* Dynamic overlays and backgrounds in Light Mode */
    --sw-hero-overlay: radial-gradient(circle at 20% 52%, rgba(79, 196, 66, 0.04) 0%, rgba(79, 196, 66, 0) 34%),
                       linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.4) 100%),
                       linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.6) 100%);
    --sw-hero-overlay-mobile: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.22) 100%);
    --sw-featured-bg: #FFFFFF;
    --sw-calc-bg: var(--sw-bg);
    
    /* Dynamic language selector styling in Light Mode */
    --sw-lang-shadow: none;
    --sw-lang-border: 1px solid rgba(79, 196, 66, 0.35) !important;
    --sw-lang-bg: rgba(255, 255, 255, 0.9) !important;
    --sw-logo-filter: none;
}

/* Black (Dark) Mode Overrides */
html[data-theme="dark"] {
    --sw-bg: #030E01;
    --sw-surface: #071A04;
    --sw-surface-soft: #0C2608;
    --sw-border: rgba(164, 255, 154, 0.18);
    --sw-text: #F9FFF9;
    --sw-text-muted: rgba(249, 255, 249, 0.72);
    --sw-text-soft: rgba(249, 255, 249, 0.56);
    --sw-focus: #A4FF9A;
    --sw-label-green: var(--sw-green);
    
    --sw-card-bg: var(--sw-surface-soft);
    --sw-card-shadow: none;
    --sw-card-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* Hero backgrounds in Dark Mode */
    --sw-hero-bg-url: url('../img/fundo-moto.webp');
    --sw-hero-bg-url-mobile: url('../img/bg-mobile.png');
    
    /* Dynamic overlays and backgrounds in Dark Mode */
    --sw-hero-overlay: radial-gradient(circle at 20% 52%, rgba(79, 196, 66, 0.2) 0%, rgba(79, 196, 66, 0) 34%),
                       linear-gradient(90deg, rgba(3, 14, 1, 0.32) 0%, rgba(3, 14, 1, 0.08) 45%, rgba(3, 14, 1, 0.56) 100%),
                       linear-gradient(180deg, rgba(3, 14, 1, 0.16) 0%, rgba(3, 14, 1, 0.04) 48%, rgba(3, 14, 1, 0.82) 100%);
    --sw-hero-overlay-mobile: linear-gradient(180deg, rgba(3, 14, 1, 0.02) 0%, rgba(3, 14, 1, 0) 48%, rgba(3, 14, 1, 0.28) 100%);
    --sw-featured-bg: linear-gradient(180deg, rgba(3, 14, 1, 1) 0%, rgba(6, 20, 4, 1) 48%, rgba(3, 14, 1, 1) 100%);
    --sw-calc-bg: linear-gradient(180deg, rgba(3, 14, 1, 1) 0%, rgba(5, 17, 3, 1) 50%, rgba(3, 14, 1, 1) 100%);
    
    /* Dynamic language selector styling in Dark Mode */
    --sw-lang-shadow: none;
    --sw-lang-border: 1px solid rgba(249, 255, 249, 0.25) !important;
    --sw-lang-bg: rgba(3, 14, 1, 0.3) !important;
    --sw-logo-filter: none;
}

/* Dynamic theme text color overrides for native white classes */
.text-white {
    color: var(--sw-text) !important;
}

html[data-theme="dark"] .text-white {
    color: var(--sw-white-const) !important;
}

/* Global resets with premium theme transitions */
body {
    background-color: var(--sw-bg);
    color: var(--sw-text);
    font-family: 'Inter-Regular', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Typography styles */
.Sora-Regular { font-family: 'Sora-Regular', sans-serif; }
.Sora-SemiBold { font-family: 'Sora-SemiBold', sans-serif; }
.Sora-Bold { font-family: 'Sora-Bold', sans-serif; }

.Inter-Regular { font-family: 'Inter-Regular', sans-serif; }
.Inter-Medium { font-family: 'Inter-Medium', sans-serif; }
.Inter-Bold { font-family: 'Inter-Bold', sans-serif; }

/* Global Text Colors */
.text-sw-green {
    color: var(--sw-green) !important;
}

.text-sw-green-light {
    color: var(--sw-green-light) !important;
}

.text-sw-text-muted {
    color: var(--sw-text-muted) !important;
}

.text-sw-text-soft {
    color: var(--sw-text-soft) !important;
}

/* Hover effects */
.hover-green:hover {
    color: var(--sw-green) !important;
    transition: color 0.3s ease;
}

/* Custom premium scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sw-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sw-surface-soft);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sw-green-dark);
}
