/*
Theme Name:   TenderPipe
Theme URI:    https://tenderpipe.com
Description:  Custom child theme for TenderPipe - A professional theme for tender discovery and tracking
Author:       TenderPipe
Author URI:   https://tenderpipe.com
Template:     astra
Version:      2.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  tenderpipe
*/

/* ==========================================================================
   Inter Font Import
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   Design Tokens Import
   Import comprehensive design system from external file
   ========================================================================== */

@import url('assets/css/design-tokens.css');

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
  font-family: var(--tp-font-family);
  font-size: var(--tp-font-size-base);
  line-height: var(--tp-line-height-normal);
  color: var(--tp-gray-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
   Logo Styles
   ========================================================================== */

.tp-header-logo a {
  text-decoration: none;
  display: inline-block;
  transition: var(--tp-transition-base);
}

.tp-header-logo strong {
  font-size: 1.5rem;
  font-weight: var(--tp-font-weight-bold);
}

.tp-header-logo strong span:first-child {
  color: var(--logo-color-1);
  transition: color var(--tp-transition-base);
}

.tp-header-logo strong span:last-child {
  color: var(--logo-color-2);
  transition: color var(--tp-transition-base);
}

/* Optional: Subtle hover effect */
.tp-header-logo a:hover strong span:first-child {
  color: var(--tp-primary-light);
}

.tp-header-logo a:hover strong span:last-child {
  color: var(--tp-accent-light);
}


/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--tp-font-weight-bold);
  line-height: var(--tp-line-height-tight);
  color: var(--tp-gray-900);
  margin-top: 0;
}

h1 {
  font-size: var(--tp-font-size-4xl);
  margin-bottom: var(--tp-spacing-lg);
}

h2 {
  font-size: var(--tp-font-size-3xl);
  margin-bottom: var(--tp-spacing-md);
}

h3 {
  font-size: var(--tp-font-size-2xl);
  margin-bottom: var(--tp-spacing-md);
}

h4 {
  font-size: var(--tp-font-size-xl);
  margin-bottom: var(--tp-spacing-sm);
}

p {
  margin-top: 0;
  margin-bottom: var(--tp-spacing-md);
}

/* Scope link styles to content areas only (not header/footer) */
.site-content a,
.entry-content a,
main a:not(.tp-nav-link):not(.tp-btn):not(.tp-dropdown-item):not(.tp-mobile-nav-link) {
  color: var(--tp-primary);
  text-decoration: none;
  transition: color var(--tp-transition-fast);
}

.site-content a:hover,
.entry-content a:hover,
main a:not(.tp-nav-link):not(.tp-btn):not(.tp-dropdown-item):not(.tp-mobile-nav-link):hover {
  color: var(--tp-primary-dark);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.tp-container {
  max-width: var(--tp-container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tp-container-padding);
  padding-right: var(--tp-container-padding);
}

.tp-text-center {
  text-align: center;
}

.tp-text-primary {
  color: var(--tp-primary);
}

.tp-text-secondary {
  color: var(--tp-secondary);
}

.tp-text-accent {
  color: var(--tp-accent);
}

.tp-bg-primary {
  background-color: var(--tp-primary);
}

.tp-bg-secondary {
  background-color: var(--tp-secondary);
}

.tp-bg-gray-50 {
  background-color: var(--tp-gray-50);
}

.tp-bg-white {
  background-color: var(--tp-white);
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --tp-font-size-4xl: 2rem;
    --tp-font-size-3xl: 1.5rem;
    --tp-font-size-2xl: 1.25rem;
  }
  
  h1 {
    font-size: var(--tp-font-size-3xl);
  }
  
  h2 {
    font-size: var(--tp-font-size-2xl);
  }
}

@media (min-width: 1024px) {
  :root {
    --tp-container-padding: 2rem;
  }
}