/* 
Theme Name: Web Bridge Theme
Author: Web Bridge
Version: 1.0
*/

@import url('utils.css');
@import url('sections.css');

/* =========================================
   1. CSS Variables (Theming)
   ========================================= */
:root {
  /* Colors */
  --color-primary: #3B69FE;
  --color-primary-hover: #1d4ed8;
  --color-primary-accent: #073FE2;
  --color-text-main: #1f2937;
  --color-text-muted: #6b7280;
  --color-bg-body: #f9fafb;
  --color-bg-card: #ffffff;
  --color-border: rgba(44, 49, 62, 0.22);
  --color-text-gray: #505768;

  /* Typography */
  --font-family-primary: 'Gilroy', sans-serif;
  --font-family-secondary: 'Lato', sans-serif;
  --font-family-base: var(--font-family-primary);
  --line-height-base: 1.5;
  --font-size-base: 1rem;

  /* Spacing & Layout */
  --container-width: 90rem;
  --container-padding: 1rem;
  --container-padding-xl: 3rem;
  --header-height: 7.5625rem;
  --header-height-xl: 6.25rem;
  --gap-md: 2rem;
  --gap-sm: 1rem;
  --radius-md: 0.5rem;
  
  /* Transitions */
  --transition-base: all 0.3s ease;
}

/* =========================================
   2. Base Styles
   ========================================= */
html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul {
  list-style: none;
}

@media (min-width: 1300px) {
  html {
    /* 100vw / 1920 * 16 = 0.8333333333vw per rem */
    font-size: 0.8333333333vw;
  }
}