/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* ==========================================================================
   1. GOOGLE FONTS IMPORT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Poppins:wght@400;500;600&display=swap');

/* ==========================================================================
   2. RED ORANGE DESIGN TOKENS & VARIABLES
   ========================================================================== */
:root {
  /* Brand Colors */
  --color-accent:          #ED3A20;   /* Brand Red */
  --color-dark:            #1E1E1E;   /* Dark Heading / Charcoal */
  --color-black:           #000000;   
  --color-white:           #FFFFFF;   
  --bg-warm:               #FDF9F7;   /* Warm Surface */
  --bg-dark:               #0C100F;   /* Media Dark */
  --bg-near-black:         #121212;   /* Footer / Dark BG */
  --gray-100:              #E8E8E8;   /* Light Border */
  --gray-200:              #E5E5E5;   
  --gray-300:              #D6D3D1;   
  --gray-400:              #C4C4C4;   
  --gray-500:              #78716C;   /* Muted Gray */

  /* Text Alphas */
  --text-lead:             rgba(30, 30, 30, .80);   
  --text-body:             rgba(0, 0, 0, .80);      
  --text-muted:            rgba(30, 30, 30, .70);   
  --text-faint:            rgba(30, 30, 30, .40);   
  --text-dim:              rgba(30, 30, 30, .50);   
  --text-on-dark-80:       rgba(255, 255, 255, .80);
  --text-on-dark-40:       rgba(255, 255, 255, .40); 
  --footer-label:          rgba(196, 196, 196, .70); 

  /* Lines & Borders */
  --hairline:              rgba(0, 0, 0, .10);      
  --hairline-soft:         rgba(0, 0, 0, .05);      
  --hairline-on-dark:      rgba(255, 255, 255, .10);
  --accent-tint:           rgba(237, 58, 32, .08);   

  /* Typography Families */
  --font-primary:          'Poppins', system-ui, -apple-system, sans-serif;
  --font-badge:            'Inter', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --fs-display:            72px;
  --fs-h1:                 44px;
  --fs-stat:               64px;
  --fs-h2:                 24px;
  --fs-h3:                 16px;
  --fs-lead:               16px;
  --fs-body:               14px;
  --fs-overline:           14px;
  --fs-nav:                14px;
  --fs-button:             16px;
  --fs-badge:              12px;

  /* Layout & Spacing */
  --page-width:            1440px;  
  --content-width:         1360px;  
  --gutter:                40px;  
  --col-label:             316px;  
  --col-gap:               32px;  
  --space-2xs:             8px;  
  --space-xs:              12px;  
  --space-sm:              16px;  
  --space-md:              24px;  
  --space-lg:              32px;  
  --space-xl:              44px;  
  --space-2xl:             80px;  
  --space-section:         120px;  
  --radius-btn:            4px;
  --radius-pill:           100px;
}

/* Tablet Overrides */
@media (max-width: 1024px) {
  :root {
    --fs-display:          56px;
    --fs-h1:               36px;
    --fs-stat:             48px;
    --gutter:              32px;
    --content-width:       960px;
    --space-section:       96px;
    --space-xl:            32px;
  }
}

/* Mobile Overrides */
@media (max-width: 767px) {
  :root {
    --fs-display:          40px;
    --fs-h1:               30px;
    --fs-stat:             40px;
    --fs-h2:               20px;
    --gutter:              20px;
    --content-width:       100%;
    --space-section:       72px;
    --space-2xl:           48px;
    --space-lg:            24px;
  }
}

/* ==========================================================================
   3. TYPOGRAPHY HELPER CLASSES
   ========================================================================== */
.t-display {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-display) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  color: var(--color-dark) !important;
}

.t-h1 {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h1) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
  color: var(--color-dark) !important;
}

.t-h2 {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-dark) !important;
}

.t-h3 {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h3) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-dark) !important;
}

.t-lead {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-lead) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-lead) !important;
}

.t-body {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--text-body) !important;
}

.t-overline {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-overline) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.t-badge {
  font-family: var(--font-badge) !important;
  font-size: var(--fs-badge) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill) !important;
}