/*
Theme Name: Delba
Theme URI: https://example.com/delba
Author: Your Name
Author URI: https://example.com
Description: A component-based WordPress theme with modular architecture
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: delba
*/

/* CSS Variables & Base Configuration */
:root {
  /* Color palette */
  --white: #FFFFFF;
  --white-50: rgba(255, 255, 255, 0.5);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.1);
  
  --blue-100: #0056FB;
  --blue-100-10: rgba(0, 86, 251, 0.1);
  --blue-100-25: rgba(0, 86, 251, 0.25);
  --blue-100-80: rgba(0, 86, 251, 0.8);
  --blue-100-70: rgba(0, 86, 251, 0.7);
  --blue-100-06: rgba(0, 86, 251, 0.06);
  
  --blue-200: #0039A6;
  --blue-300: #002D83;
  --blue-400: #031E51;
  --text: #141E48;
  --text-70: rgba(20, 30, 72, 0.7);
  --text-40: rgba(20, 30, 72, 0.4);
  
  --blue-50: #4484FF;
  
  --red-100: #EC4C40;
  --red-100-10: rgba(236, 76, 64, 0.1);
  --red-100-20: rgba(213, 43, 30, 0.2);
  --red-100-80: rgba(213, 43, 30, 0.8);
  --red-200: #D52B1E;
  --red-50: #FA6054;
  --red-25: #ff8b83;
  
  --bg: #ECF2FD;
  --bg-light: #E7EFFF;
  --bg-light-2: #D9D9D9;

  /* gradients */
  --gradient-blue: linear-gradient(254.34deg, #4484FF 0%, #0056FB 100%);
  --gradient-blue-dark: linear-gradient(254.34deg, #0039A6 0%, #002D83 0.43, #031E51 0.85);
  --gradient-blue-dark-2: linear-gradient(254.34deg, #0039A6 0%, #002D83 0.43, #031E51 0.85);
  --gradient-cta: linear-gradient(265.35deg, #4484FF 4.66%, #0056FB 82.26%);
  --gradient-red: linear-gradient(254.34deg, #FA6054 0%, #D52B1E 100%);
  --gradient-red-2: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), linear-gradient(254.34deg, #FA6054 0%, #D52B1E 100%);
  --gradient-blue-dark-4: linear-gradient(265.16deg, rgba(0, 57, 166, 0) 7.89%, #002D83 47.5%, #031E51 75.37%);
  --gradient-blue-dark-4-reverse: linear-gradient(360.16deg, rgba(0, 57, 166, 0) 7.89%, #002D83 47.5%, #031E51 75.37%);

  --gradient-bg: linear-gradient(254.34deg, #E7EFFF 0%, #FFFFFF 100%);
  --gradient-bg-overlay: linear-gradient(254.34deg, #FFFFFF 0%, #4484FF 100%);
  --gradient-blue-dark-3: linear-gradient(90deg, #031E51 44.83%, #415A89 104.7%);
  --gradient-bg-overlay-2:linear-gradient(226.51deg, rgba(255, 255, 255, 0) 48.23%, rgba(68, 132, 255, 0.2) 95.59%), linear-gradient(226.53deg, #E7EFFF -11.49%, #FFFFFF 67.9%);
  --gradient-bg-overlay-3: linear-gradient(265.16deg, rgba(0, 57, 166, 0) -18.55%, #002D83 18.29%, #031E51 75.37%), #0039A6;
  --gradient-bg-overlay-red: linear-gradient(226.51deg, rgba(255, 255, 255, 0) 48.23%, rgba(255, 167, 160, 0.2) 95.59%), linear-gradient(226.53deg, #FFE3E1 -11.49%, #FFFFFF 67.9%);
  --gradient-red-overlay: linear-gradient(264.4deg, #FA6054 0.73%, #D52B1E 83.11%);
  
  --gradient-red-light: linear-gradient(254.34deg, #FFE3E1 0%, #FFFFFF 100%);
  --gradient-red-light-overlay: linear-gradient(254.34deg, #FFFFFF 0%, #FFA7A0 100%);


  /* Shadows */
  --shadow-case: 0px 4px 50px rgba(3, 30, 81, 0.1);

  /* UI */
  --color-error: #c30000;
  --color-success: var(--blue-100);
  --input-border-color: var(--white);

  /* Font families */
  --font-primary: 'Golos Text', system-ui;

  /* Transitions */
  --transition-anim: 0.75s;
  --transition-medium: all 0.5s ease;
  --transition-fast: all 0.3s ease;
  --transition-anim-all: all 0.75s ease;
  --transition-modal: all 0.75s ease;

  --radius-2: calc(var(--rpx) * 2);
  --radius-4: calc(var(--rpx) * 4);
  --radius-8: calc(var(--rpx) * 8);
  --radius-10: calc(var(--rpx) * 10);
  --radius-12: calc(var(--rpx) * 12);
  --radius-16: calc(var(--rpx) * 16);
  --radius-15: calc(var(--rpx) * 15);
  --radius-18: calc(var(--rpx) * 18);
  --radius-20: calc(var(--rpx) * 20);
  --radius-22: calc(var(--rpx) * 22);
  --radius-24: calc(var(--rpx) * 24);
  --radius-28: calc(var(--rpx) * 28);
  --radius-30: calc(var(--rpx) * 30);
  --radius-32: calc(var(--rpx) * 32);
  --radius-36: calc(var(--rpx) * 36);
  --radius-42: calc(var(--rpx) * 42);
  --spacing-2: calc(var(--rpx) * 2);
  --spacing-4: calc(var(--rpx) * 4);
  --spacing-6: calc(var(--rpx) * 6);
  --spacing-8: calc(var(--rpx) * 8);
  --spacing-10: calc(var(--rpx) * 10);
  --spacing-12: calc(var(--rpx) * 12);
  --spacing-14: calc(var(--rpx) * 14);
  --spacing-15: calc(var(--rpx) * 15);
  --spacing-16: calc(var(--rpx) * 16);
  --spacing-18: calc(var(--rpx) * 18);
  --spacing-20: calc(var(--rpx) * 20);
  --spacing-22: calc(var(--rpx) * 22);
  --spacing-24: calc(var(--rpx) * 24);
  --spacing-25: calc(var(--rpx) * 25);
  --spacing-26: calc(var(--rpx) * 26);
  --spacing-28: calc(var(--rpx) * 28);
  --spacing-30: calc(var(--rpx) * 30);
  --spacing-32: calc(var(--rpx) * 32);
  --spacing-34: calc(var(--rpx) * 34);
  --spacing-35: calc(var(--rpx) * 35);
  --spacing-36: calc(var(--rpx) * 36);
  --spacing-38: calc(var(--rpx) * 38);
  --spacing-40: calc(var(--rpx) * 40);
  --spacing-42: calc(var(--rpx) * 42);
  --spacing-44: calc(var(--rpx) * 44);
  --spacing-46: calc(var(--rpx) * 46);
  --spacing-48: calc(var(--rpx) * 48);
  --spacing-50: calc(var(--rpx) * 50);
  --spacing-52: calc(var(--rpx) * 52);
  --spacing-54: calc(var(--rpx) * 54);
  --spacing-56: calc(var(--rpx) * 56);
  --spacing-58: calc(var(--rpx) * 58);
  --spacing-60: calc(var(--rpx) * 60);
  --spacing-62: calc(var(--rpx) * 62);
  --spacing-64: calc(var(--rpx) * 64);
  --spacing-66: calc(var(--rpx) * 66);
  --spacing-68: calc(var(--rpx) * 68);
  --spacing-70: calc(var(--rpx) * 70);
  --spacing-72: calc(var(--rpx) * 72);
  --spacing-74: calc(var(--rpx) * 74);
  --spacing-76: calc(var(--rpx) * 76);
  --spacing-78: calc(var(--rpx) * 78);
  --spacing-80: calc(var(--rpx) * 80);
  --spacing-82: calc(var(--rpx) * 82);
  --spacing-84: calc(var(--rpx) * 84);
  --spacing-86: calc(var(--rpx) * 86);
  --spacing-88: calc(var(--rpx) * 88);
  --spacing-90: calc(var(--rpx) * 90);
  --spacing-92: calc(var(--rpx) * 92);
  --spacing-94: calc(var(--rpx) * 94);
  --spacing-96: calc(var(--rpx) * 96);
  --spacing-98: calc(var(--rpx) * 98);
  --spacing-100: calc(var(--rpx) * 100);
}

@media (max-width: 1023px) {
  :root {
    --rpx: 1px;
    --width-container: 900px;
    --spacing-container: 16px;
    --section-padding-top: 60px;
    --footer-padding-top: 120px;
    --header-height: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --base-width: 1600;
    --rpx: calc(100vw / var(--base-width));
    --width-container: calc(var(--rpx) * 1890);
    --spacing-container: calc(var(--rpx) * 15);
    --section-padding-top: calc(var(--rpx) * 80);
    --footer-padding-top: calc(var(--rpx) * 100);
    --header-height: calc(var(--rpx) * 85);
  }
}

/* Base Styles */
html {
  scrollbar-gutter: stable;
}

html, html body, html *, html *::before, html *::after {
  box-sizing: border-box;
}

html body {
  margin: 0;
  font: var(--font-p1);
  color: var(--text);
  background-color: var(--white);
  scroll-padding: var(--header-height);
  max-width: 100vw;
}

::-webkit-scrollbar-thumb {
  background: var(--blue-100);
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 5px;
}

a, button, input, textarea {
  transition: all .3s ease;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--blue-100);
}