/* =================================================================
   CLINTY — Design Tokens (variables.css)
   Todas as cores, fontes, espaçamentos e tokens visuais da marca.
   Fonte única de verdade para toda a identidade visual.
   ================================================================= */

:root {
  /* ─── Cores da Marca Clinty ─── */
  --clinty-orange:         #e97522;
  --clinty-orange-hover:   #c9601a;
  --clinty-orange-light:   #ff9857;
  --clinty-orange-card:    #FF6B35;
  --clinty-orange-card-h:  #ff8555;
  --clinty-cursor-hover:   #e02020;

  /* ─── Neutros ─── */
  --clinty-black:          #000000;
  --clinty-dark:           #232323;
  --clinty-dark-alt:       #2d2d2d;
  --clinty-dark-bg:        #131312;
  --clinty-zeus:           #333331;
  --clinty-gray-concrete:  #d8d8d4;
  --clinty-gray-medium:    #787875;
  --clinty-gray-light:     #cdcdc7;
  --clinty-gray-line:      #f0f0f0;
  --clinty-gray-extra:     #e4e4e4;
  --clinty-gray-very-light:#f7f7f7;
  --clinty-gray-light-med: #eaeaeb;
  --clinty-white:          #ffffff;

  /* ─── Cookie Banner ─── */
  --clinty-cookie-title:   #1a1a2e;
  --clinty-cookie-text:    #4B5563;
  --clinty-cookie-close:   #9CA3AF;
  --clinty-cookie-reject:  #F3F4F6;
  --clinty-cookie-reject-h:#E5E7EB;
  --clinty-cookie-reject-t:#374151;

  /* ─── Mapeamento para classes do tema (compatibilidade) ─── */
  --base-color:            #ff9857;
  --white:                 #d8d8d4;
  --black:                 #000000;
  --red:                   #dc3131;
  --dark-gray:             #2d2d2d;
  --medium-gray:           #787875;
  --extra-medium-gray:     #e4e4e4;
  --light-gray:            #a8a8a8;
  --very-light-gray:       #f7f7f7;
  --light-medium-gray:     #cdcdc7;
  --concrete-gray:         #d8d8d4;
  --bg-maire-yellow:       #131312;
  --zeus-grey:             #333331;

  /* ─── Tipografia ─── */
  --font-logo:             'Sora', sans-serif;
  --font-heading:          'Plus Jakarta Sans', sans-serif;
  --font-body:             'Sora', sans-serif;
  --font-display:          'Bebas Neue', cursive;
  --alt-font:              var(--font-heading);
  --primary-font:          var(--font-body);

  /* ─── Espaçamentos (sistema 8px) ─── */
  --space-2xs:             4px;
  --space-xs:              8px;
  --space-sm:              16px;
  --space-md:              24px;
  --space-lg:              32px;
  --space-xl:              48px;
  --space-2xl:             64px;
  --space-3xl:             96px;
  --space-4xl:             128px;

  /* ─── Transições ─── */
  --transition-fast:       0.15s ease;
  --transition-base:       0.3s ease;
  --transition-smooth:     0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Bordas ─── */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             14px;
  --radius-xl:             30px;
  --radius-full:           100px;

  /* ─── Sombras ─── */
  --shadow-card:           0 8px 40px rgba(0, 0, 0, 0.18);
  --shadow-btn:            0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ─── Bebas Neue nos textos display grandes ─── */
.fs-350.alt-font, .fs-300.alt-font, .fs-200.alt-font, .fs-180.alt-font {
  font-family: var(--font-display) !important;
}