/* Critical CSS - Inline in for above-the-fold rendering */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap"); // : Use a value from 300 to 700 // : Use a unique and descriptive class name .comfortaa-300 { font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; } .comfortaa-400 { font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .comfortaa-500 { font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } .comfortaa-600 { font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; } .comfortaa-700 { font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #a47967; --secondary: #6c757d; --dark: #212529; --light: #f8f9fa; --bg-color: #ffffff; --text-color: #212529; --border-color: #dee2e6; --card-bg: #ffffff; --header-bg: #ffffff; --footer-bg: #f8f9fa; } [data-theme="dark"] { --bg-color: #1a1a1a; --text-color: #f8f9fa; --border-color: #343a40; --card-bg: #212529; --header-bg: #212529; --footer-bg: #1a1a1a; } body { font-family: "Inter", system-ui, -apple-system, sans-serif; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: "Comfortaa", sans-serif; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; letter-spacing: -0.02em; } /* Prevent FOUC */ .no-js { display: none; } .logo-dark { display: none; } .logo-light { display: block; } [data-theme="dark"] { .logo-dark { display: block; } .logo-light { display: none; opacity: 0; pointer-events: none; /* Prevent FOUC */ animation: fade-in 0.3s ease-out; } }