/* =====================================================
   SHABRANG AMIR – GLOBAL BRAND CSS
   Author: Brand System
   Usage: WordPress + Elementor (RTL)
===================================================== */

/* -----------------------------------------------------
   1. BRAND DESIGN TOKENS (COLORS, FONTS, SHADOWS)
----------------------------------------------------- */
:root {

  /* Primary Brand */
  --brand-dark-blue: #1C1A52;
  --brand-accent-purple: #4B32FF;

  /* Accents */
  --brand-accent-gold: #D9C79A;
  --brand-cta-orange: #FF8A00;

  /* Backgrounds */
  --brand-bg-dark: #1F2933;
  --brand-bg-light: #FAFAFA;

  /* Text */
  --brand-text-main: #1C1A52;
  --brand-text-muted: #6B7280;
  --brand-text-white: #FFFFFF;

  /* Typography */
  --brand-font-main: 'IRANYekan', 'Vazirmatn', 'IRANSans', sans-serif;
  --brand-font-size-base: 16px;
  --brand-line-height: 1.75;

  /* Radius & Shadows */
  --brand-radius-sm: 6px;
  --brand-radius-md: 10px;
  --brand-radius-lg: 16px;

  --brand-shadow-soft: 0 6px 30px rgba(28,26,82,0.08);
  --brand-shadow-strong: 0 10px 40px rgba(28,26,82,0.18);

  /* Transitions */
  --brand-transition-fast: 0.2s ease;
  --brand-transition-base: 0.3s ease;
}

/* -----------------------------------------------------
   2. BASE & RESET (SAFE FOR ELEMENTOR)
----------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  direction: rtl;
  background: var(--brand-bg-light);
  color: var(--brand-text-main);
  font-family: var(--brand-font-main);
  font-size: var(--brand-font-size-base);
  line-height: var(--brand-line-height);
}

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

/* -----------------------------------------------------
   3. TYPOGRAPHY SYSTEM
----------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--brand-dark-blue);
  font-weight: 800;
  line-height: 1.4;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }

p {
  color: var(--brand-text-muted);
  text-align: justify;
  margin-bottom: 1rem;
}

/* -----------------------------------------------------
   4. LINKS & INTERACTIONS
----------------------------------------------------- */
a {
  color: var(--brand-accent-purple);
  text-decoration: none;
  transition: color var(--brand-transition-fast);
}
a:hover {
  color: var(--brand-accent-gold);
}

/* -----------------------------------------------------
   5. BUTTON SYSTEM (CTA STANDARD)
----------------------------------------------------- */
.btn-brand {
  display: inline-block;
  background: var(--brand-cta-orange);
  color: var(--brand-text-white);
  padding: 0.7em 2.2em;
  border-radius: var(--brand-radius-md);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all var(--brand-transition-base);
  box-shadow: var(--brand-shadow-soft);
}

.btn-brand:hover {
  background: var(--brand-accent-purple);
  box-shadow: var(--brand-shadow-strong);
}

/* Secondary Button */
.btn-outline-brand {
  background: transparent;
  color: var(--brand-accent-purple);
  border: 2px solid var(--brand-accent-purple);
}
.btn-outline-brand:hover {
  background: var(--brand-accent-purple);
  color: #fff;
}

/* -----------------------------------------------------
   6. CARD / BOX SYSTEM
----------------------------------------------------- */
.card-brand {
  background: var(--brand-bg-light);
  border-radius: var(--brand-radius-lg);
  padding: 2em;
  box-shadow: var(--brand-shadow-soft);
}

.card-brand.dark {
  background: var(--brand-bg-dark);
  color: var(--brand-text-white);
}

/* -----------------------------------------------------
   7. LABEL SYSTEM (CORE BUSINESS)
----------------------------------------------------- */
.label-glass,
.label-pvc,
.label-property {
  background: var(--brand-bg-dark);
  color: var(--brand-text-white);
  border-radius: var(--brand-radius-lg);
  padding: 1.2em 2em;
  box-shadow: var(--brand-shadow-soft);
}

.label-glass strong,
.label-pvc strong,
.label-property strong {
  color: var(--brand-accent-gold);
}

/* -----------------------------------------------------
   8. FEATURE / ICON BOX
----------------------------------------------------- */
.feature-box {
  background: #fff;
  border-radius: var(--brand-radius-md);
  padding: 1.5em;
  box-shadow: var(--brand-shadow-soft);
  transition: transform var(--brand-transition-base);
}
.feature-box:hover {
  transform: translateY(-6px);
}

/* -----------------------------------------------------
   9. ACCENT UTILITIES
----------------------------------------------------- */
.text-gold {
  color: var(--brand-accent-gold);
}
.text-purple {
  color: var(--brand-accent-purple);
}
.bg-dark {
  background: var(--brand-bg-dark);
  color: #fff;
}

/* -----------------------------------------------------
   10. SECTION SPACING (GLOBAL)
----------------------------------------------------- */
.section-padding {
  padding: 4rem 1.2rem;
}

/* -----------------------------------------------------
   END – SHABRANG AMIR BRAND SYSTEM
----------------------------------------------------- */