/* ============================================
   CSS VARIABLES — LJR Digital Studio
============================================ */

:root {
  /* ——— Cores Primárias ——— */
  --blue:          #2563EB;
  --blue-hover:    #1D4ED8;
  --blue-glow:     rgba(37, 99, 235, 0.18);
  --blue-glow-lg:  rgba(37, 99, 235, 0.25);

  /* ——— Cores Neutras ——— */
  --white:         #FFFFFF;
  --off-white:     #F8FAFC;
  --gray-light:    #F1F5F9;
  --gray-mid:      #94A3B8;
  --gray-text:     #475569;
  --black:         #0F172A;
  --text-dark:     #111827;

  /* ——— Feedback ——— */
  --success:       #22C55E;
  --error:         #EF4444;
  --warning:       #F59E0B;
  --whatsapp:      #25D366;
  --whatsapp-dark: #1DA851;

  /* ——— Gradientes ——— */
  --gradient-hero: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%);
  --gradient-cta:  linear-gradient(135deg, #050B18 0%, #091533 50%, #050D24 100%);
  --gradient-glow: radial-gradient(circle, rgba(37,99,235,.25), transparent 70%);

  /* ——— Tipografia ——— */
  --font:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ——— Espaçamentos ——— */
  --section-gap:       140px;
  --container:         1280px;
  --container-padding: 32px;
  --gap-desktop:       32px;
  --gap-tablet:        24px;
  --gap-mobile:        16px;

  /* ——— Border Radius ——— */
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-pill:   999px;

  /* ——— Sombras ——— */
  --shadow-card:       0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 20px 45px rgba(15, 23, 42, 0.12);
  --shadow-blue:       0 8px 32px rgba(37, 99, 235, 0.25);
  --shadow-navbar:     0 1px 30px rgba(15, 23, 42, 0.06);

  /* ——— Transições ——— */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --trans-fast:    200ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-base:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-slow:    500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ——— Componentes Padronizados ——— */
  --btn-height:        54px;
  --card-padding:      32px 28px;
  --header-gap:        56px;
  --title-max-width:   580px;
  --sub-max-width:     540px;
  --grid-gap:          24px;

  /* ——— Escala Tipográfica Padronizada ——— */
  --font-h1:           clamp(2.25rem, 4.5vw, 3.5rem);
  --font-h2:           clamp(2rem, 3.5vw, 2.75rem);
  --font-h3:           18px;
  --font-sub:          16px;
  --font-body:         14.5px;
  --font-label:        12px;
  --font-btn:          15px;

  --weight-h1:         900;
  --weight-h2:         800;
  --weight-h3:         700;
  --weight-body:       400;
  --weight-btn:        700;

  --lh-h1:             1.1;
  --lh-h2:             1.15;
  --lh-h3:             1.3;
  --lh-sub:            1.65;
  --lh-body:           1.6;

  --ls-h1:             -1.2px;
  --ls-h2:             -0.5px;
  --ls-h3:             -0.3px;
  --ls-label:          1.5px;
  --ls-btn:            0.4px;

  /* ——— Z-Index ——— */
  --z-navbar:      1000;
  --z-card:        10;
  --z-overlay:     900;
  --z-modal:       950;
}