/* =============================================================
   ORANGE BLACK PARTNERS. DESIGN TOKENS
   Fonte única da verdade para cores, tipografia, espaçamentos,
   radii, motion e sombras. Toda variável visual nasce aqui.
   ============================================================= */

:root {
  /* -----------------------------------------------------------
     1. PALETA. extraída dos PNGs oficiais do brandbook
     ----------------------------------------------------------- */

  /* Laranjas (cor primária da marca) */
  --color-laranja-500: #B83D00;
  --color-laranja-400: #FF5200;
  --color-laranja-300: #FC9200;
  --color-laranja-200: #FFB300;
  --color-laranja-100: #FFC20F;
  --color-amarelo:     #FFD600;

  /* Azul céu (acento tecnológico. pastel oficial) */
  --color-azul-ceu:       #C7F7FF;
  /* Variante mais saturada para uso em UI escura quando o pastel não contrasta */
  --color-azul-ceu-vivid: #4FD8F0;

  /* Escala de cinzas (do mais claro ao mais escuro) */
  --color-cinza-100: #F0F0F0;
  --color-cinza-200: #E3E3E3;
  --color-cinza-300: #D1D1D1;
  --color-cinza-400: #BABABA;
  --color-cinza-500: #878787;
  --color-cinza-600: #595959;
  --color-cinza-700: #363636;

  /* Neutros */
  --color-preto:   #000000;
  --color-branco:  #FFFFFF;

  /* -----------------------------------------------------------
     2. SEMÂNTICA. tokens com intenção (use estes nas páginas)
     ----------------------------------------------------------- */

  /* Backgrounds */
  --bg-primary:        var(--color-preto);          /* dark dominante */
  --bg-secondary:      var(--color-cinza-700);      /* dark alternativo, cards em dark */
  --bg-elevated:       #1a1a1a;                     /* card mais elevado em dark */
  --bg-inverse:        var(--color-branco);         /* seções light de respiro */
  --bg-inverse-soft:   var(--color-cinza-100);      /* light alternativo */

  /* Texto */
  --text-primary:      var(--color-branco);
  --text-secondary:    var(--color-cinza-300);
  --text-muted:        var(--color-cinza-500);
  --text-inverse:      var(--color-preto);
  --text-inverse-soft: var(--color-cinza-600);
  --text-brand:        var(--color-laranja-400);

  /* Bordas */
  --border-subtle:     var(--color-cinza-600);
  --border-strong:     var(--color-cinza-500);
  --border-brand:      var(--color-laranja-400);
  --border-inverse:    var(--color-cinza-200);

  /* CTA / Ações */
  --action-primary:           var(--color-laranja-400);
  --action-primary-hover:     var(--color-laranja-500);
  --action-primary-text:      var(--color-branco);
  --action-secondary-text:    var(--color-laranja-400);
  --action-secondary-border:  var(--color-laranja-400);

  /* Estados */
  --focus-ring:        var(--color-laranja-400);
  --focus-ring-offset: 2px;

  /* -----------------------------------------------------------
     3. DEGRADÊS OFICIAIS DA MARCA
     ----------------------------------------------------------- */

  /* "Pôr do sol". conservador, só laranjas */
  --gradient-sunset: linear-gradient(
    135deg,
    var(--color-laranja-500) 0%,
    var(--color-laranja-400) 25%,
    var(--color-laranja-300) 55%,
    var(--color-laranja-200) 80%,
    var(--color-laranja-100) 100%
  );

  /* "Tecnológico". assinatura visual mais forte */
  --gradient-tech: linear-gradient(
    135deg,
    var(--color-laranja-500) 0%,
    var(--color-laranja-400) 25%,
    var(--color-laranja-300) 50%,
    var(--color-amarelo) 75%,
    var(--color-azul-ceu) 100%
  );

  /* Versão sutil do tech para hovers e detalhes */
  --gradient-tech-soft: linear-gradient(
    135deg,
    rgba(184, 61, 0, 0.15) 0%,
    rgba(255, 82, 0, 0.10) 50%,
    rgba(199, 247, 255, 0.08) 100%
  );

  /* Fade para o preto. usado em transições de seção */
  --gradient-fade-bottom: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-preto) 100%
  );

  /* -----------------------------------------------------------
     4. TIPOGRAFIA
     ----------------------------------------------------------- */

  --font-sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

  /* Pesos. espelham o brandbook */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Escala tipográfica fluida com clamp(min, preferred, max) */
  --fs-eyebrow:   0.8125rem;                                 /* 13px fixo */
  --fs-caption:   0.875rem;                                  /* 14px fixo */
  --fs-body:      clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16-18 */
  --fs-body-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18-20 */
  --fs-h3:        clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);   /* 20-24 */
  --fs-h2:        clamp(1.75rem, 1.4rem + 1.75vw, 2.25rem);  /* 28-36 */
  --fs-h1:        clamp(2.25rem, 1.8rem + 2.25vw, 3rem);     /* 36-48 */
  --fs-display:   clamp(2.75rem, 2rem + 4vw, 5.5rem);        /* 44-88 hero */
  --fs-display-xl: clamp(3rem, 2rem + 5vw, 6.5rem);          /* 48-104 frase-âncora gigante */

  /* Line heights. tight para títulos, leitura para body */
  --lh-display:  0.95;
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.12em;  /* eyebrow / uppercase */

  /* -----------------------------------------------------------
     5. ESPAÇAMENTO (4px base, escala T-shirt)
     ----------------------------------------------------------- */

  --space-3xs:  0.25rem;   /*  4px */
  --space-2xs:  0.5rem;    /*  8px */
  --space-xs:   0.75rem;   /* 12px */
  --space-sm:   1rem;      /* 16px */
  --space-md:   1.5rem;    /* 24px */
  --space-lg:   2rem;      /* 32px */
  --space-xl:   3rem;      /* 48px */
  --space-2xl:  4rem;      /* 64px */
  --space-3xl:  6rem;      /* 96px */
  --space-4xl:  8rem;      /* 128px */

  /* Espaçamentos fluidos para padding vertical de seções
     Reduzidos para deixar o site mais compacto e mobile-friendly. */
  --section-py: clamp(var(--space-xl), 3vw + 1.5rem, var(--space-3xl));
  --section-py-sm: clamp(var(--space-lg), 2.5vw + 1rem, var(--space-2xl));

  /* Layout container */
  --container-max: 1280px;
  --container-px:  clamp(var(--space-md), 4vw, var(--space-xl));

  /* -----------------------------------------------------------
     6. RADII, BORDAS, SOMBRAS
     ----------------------------------------------------------- */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --border-thin:   1px;
  --border-medium: 2px;

  /* Sombras pensadas para fundo escuro (sutis, com leve glow laranja) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-glow-orange: 0 0 0 1px rgba(255, 82, 0, 0.3), 0 8px 30px rgba(255, 82, 0, 0.18);

  /* -----------------------------------------------------------
     7. MOTION (durações + easings)
     ----------------------------------------------------------- */

  --motion-fast:    150ms;
  --motion-base:    250ms;
  --motion-slow:    450ms;
  --motion-slower:  650ms;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* "expo out". UI elegante */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:   linear;

  /* -----------------------------------------------------------
     8. Z-INDEX (escala explícita)
     ----------------------------------------------------------- */

  --z-base:     1;
  --z-nav:      50;
  --z-dropdown: 60;
  --z-overlay:  80;
  --z-modal:    100;
  --z-tooltip:  110;

  /* -----------------------------------------------------------
     9. BREAKPOINTS (para reference apenas. usados em media queries)
     ----------------------------------------------------------- */

  /* sm: 640px · md: 768px · lg: 1024px · xl: 1280px · 2xl: 1440px */
}

/* -----------------------------------------------------------
   Respeitar preferência do usuário por menos movimento
   ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0ms;
    --motion-base:   0ms;
    --motion-slow:   0ms;
    --motion-slower: 0ms;
  }
}