/* ============================================================
   ADJUST SPINE — DESIGN TOKENS
   Fonte: Design System v1.0 + Brand System v1.0
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     CORES — Primárias (Navy)
  ---------------------------------------------------------- */
  --color-navy-950: #06233A;
  --color-navy-900: #082E4C;
  --color-navy-800: #0E3B5D;
  --color-navy-700: #164A6A;

  /* ----------------------------------------------------------
     CORES — Adjust Green
  ---------------------------------------------------------- */
  --color-green-600: #00A95B;
  --color-green-500: #00C96B;
  --color-green-300: #75E7AD;
  --color-green-100: #DDF8E9;
  --color-green-50:  #F0FCF5;

  /* ----------------------------------------------------------
     CORES — Neutras
  ---------------------------------------------------------- */
  --color-white:        #FFFFFF;
  --color-surface-50:   #F7F9FA;
  --color-surface-100:  #EEF3F5;
  --color-gray-200:     #DDE4E7;
  --color-gray-300:     #C4CED3;
  --color-gray-500:     #667780;
  --color-gray-700:     #3B4A52;
  --color-gray-900:     #17242B;

  /* ----------------------------------------------------------
     CORES — Semânticas
  ---------------------------------------------------------- */
  --color-success-600: #158A52;
  --color-success-100: #E3F5EB;
  --color-warning-600: #B7791F;
  --color-warning-100: #FFF3D6;
  --color-error-600:   #C83D4D;
  --color-error-100:   #FCE8EB;
  --color-info-600:    #287AA9;
  --color-info-100:    #E6F3FA;

  /* ----------------------------------------------------------
     TOKENS SEMÂNTICOS — Superfícies
  ---------------------------------------------------------- */
  --bg-primary:     var(--color-white);
  --bg-secondary:   var(--color-surface-50);
  --bg-brand:       var(--color-navy-900);
  --bg-brand-deep:  var(--color-navy-950);
  --bg-accent:      var(--color-green-100);
  --bg-accent-soft: var(--color-green-50);

  /* ----------------------------------------------------------
     TOKENS SEMÂNTICOS — Texto
  ---------------------------------------------------------- */
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted:     var(--color-gray-500);
  --text-inverse:   var(--color-white);
  --text-brand:     var(--color-navy-900);
  --text-action:    var(--color-navy-950);

  /* ----------------------------------------------------------
     TOKENS SEMÂNTICOS — Ações
  ---------------------------------------------------------- */
  --action-primary:       var(--color-green-500);
  --action-primary-hover: var(--color-green-600);
  --action-secondary:     var(--color-navy-900);
  --action-text-on:       var(--color-navy-950);

  /* ----------------------------------------------------------
     TOKENS SEMÂNTICOS — Bordas
  ---------------------------------------------------------- */
  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);
  --border-active:  var(--color-navy-700);
  --border-width:   1px;

  /* ----------------------------------------------------------
     TIPOGRAFIA
  ---------------------------------------------------------- */
  --font-display: "Manrope", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Escala fluida - Ajustada para maior legibilidade (Público + velho) */
  --fs-display: clamp(3rem, 6vw, 5rem);
  --fs-h1:      clamp(2.5rem, 5vw, 4.25rem);
  --fs-h2:      clamp(2rem, 3.5vw, 3rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 1.875rem);
  --fs-h4:      clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:    clamp(1.25rem, 1.8vw, 1.375rem);
  --fs-body:    1.125rem;
  --fs-sm:      1rem;
  --fs-xs:      0.875rem;

  /* Alturas de linha */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.65;

  /* ----------------------------------------------------------
     ESPAÇAMENTO (base 4px)
  ---------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-11: 6rem;      /* 96px */
  --space-12: 8rem;      /* 128px */

  /* Espaçamento de seções fluido */
  --section-padding: clamp(4rem, 8vw, 8rem);

  /* ----------------------------------------------------------
     RAIOS
  ---------------------------------------------------------- */
  --radius-xs:   0.375rem;  /*  6px */
  --radius-sm:   0.5rem;    /*  8px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 999px;

  /* ----------------------------------------------------------
     SOMBRAS
  ---------------------------------------------------------- */
  --shadow-xs: 0 2px 8px rgba(8, 46, 76, 0.05);
  --shadow-sm: 0 4px 16px rgba(8, 46, 76, 0.06);
  --shadow-md: 0 12px 32px rgba(8, 46, 76, 0.08);
  --shadow-lg: 0 20px 50px rgba(8, 46, 76, 0.10);

  /* ----------------------------------------------------------
     MOVIMENTO
  ---------------------------------------------------------- */
  --duration-fast:    120ms;
  --duration-default: 200ms;
  --duration-slow:    320ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     BREAKPOINTS (referência — usados via media queries)
  ---------------------------------------------------------- */
  /* sm: 480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --container-max: 1200px;
  --container-padding-mobile: var(--space-5);
  --container-padding-desktop: var(--space-8);
  --header-height-mobile: 68px;
  --header-height-desktop: 80px;
  --whatsapp-bar-height: 80px;
}