/* Individual Root CSS */

/* Importing Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:opsz,wght@14..32,100..900&family=Lilita+One&family=Pacifico&family=Roboto:wght@100..900&display=swap');

/* Root CSS */
:root {
    --bg-color: #F5F6FB;
    --theme-color: #d85e40;
    --special-bg-color: #E0E7FF;
    --primary-text-color: #1E1E1E;
    --secondary-text-color: #6B6B6B;
    --tertiary-text-color: #FAFAFA;
    --content-color: #FFF;
    --highlight-text-color: #353535;
    --accent-color: #4F46E5;
    --hover-color: #747474;
    --border-color: #e5e7eb;
    --box-color: #F9FAFB;
    --input-color: #555;
    --main-nav-color: rgba(66, 49, 97, 0.52);
    --main-bg-color: #2B2B2B;
    --hero-section-color: linear-gradient(100deg, #d85e4075 8.57%, #84356775 38.25%, #300c8e75 105.09%);
    --hero-title-color: linear-gradient(90deg, #D85E40 0%, #D53DBE 50%, #2600FF 100%);
    --border-radius: .75rem;
    --box-shadow: 0 .125rem .4688rem .125rem rgba(0, 0, 0, 0.25);
}

.dark-theme {
    --bg-color: #191A1C;
    --theme-color: #d85e40;
    --special-bg-color: #565963;
    --primary-text-color: #FAFAFA;
    --secondary-text-color: #a5a5a5;
    --tertiary-text-color: #1E1E1E;
    --content-color: #353535;
    --highlight-text-color: #d1d1d1;
    --accent-color: #4F46E5;
    --hover-color: #9c9c9c;
    --border-color: #636363;
    --box-color: #a3a3a3;
    --input-color: #1f1f1f;
    --main-nav-color: rgba(66, 49, 97, 0.52);
    --main-bg-color: #2B2B2B;
    --hero-section-color: linear-gradient(100deg, #d85e4075 -8.57%, #84356775 38.25%, #300c8e75 105.09%);
    --hero-title-color: linear-gradient(90deg, #D85E40 0%, #D53DBE 50%, #2600FF 100%);
    --border-radius: .75rem;
    --box-shadow: 0 .125rem .4688rem .125rem rgba(0, 0, 0, 0.25);
}