/* =========================================================================
   Sardinha Advogados — Colors & Type
   Palette: "Machado Meyer" system (azul-marinho / navy + light gray + white)
   applied to Sardinha Advogados content.
   Type: Spectral (serif display) + Hanken Grotesk (sans body/UI).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand navy (primary — "Machado") ---------------------------------- */
  --navy-950: #07172A;
  --navy-900: #0A1F38;
  --navy-800: #0E2A47;
  --navy-700: #143456;
  --navy-600: #1E456E;
  --navy-500: #2D5985;
  --navy-400: #5E7E9E;
  --navy-300: #9DB2C7;

  /* ---- Neutral gray (secondary — "Meyer") -------------------------------- */
  --gray-50:  #FAFBFC;
  --gray-100: #F4F5F7;
  --gray-200: #E5E8EC;
  --gray-300: #CDD3DB;
  --gray-400: #9BA7B4;
  --gray-500: #6B7785;
  --gray-600: #4A5562;
  --white:    #FFFFFF;

  /* ---- Gold / Yellow accent (Machado Meyer signature) -------------------- */
  --gold-600: #C99A00;
  --gold-500: #F2C200;
  --gold-400: #F7D34A;
  --gold-300: #FBE8A6;
  --brass-500: var(--gold-500);
  --brass-300: var(--gold-300);

  /* ---- Semantic surfaces ------------------------------------------------- */
  --bg-page:       var(--gray-100);
  --bg-surface:    var(--white);
  --bg-inverse:    var(--navy-900);
  --bg-inverse-2:  var(--navy-800);

  /* ---- Semantic foreground ----------------------------------------------- */
  --fg-1: var(--navy-900);
  --fg-2: var(--gray-600);
  --fg-3: var(--gray-500);
  --fg-4: var(--gray-400);
  --fg-on-dark:   var(--white);
  --fg-on-dark-2: var(--navy-300);
  --fg-link:      var(--navy-500);
  --fg-accent:    var(--brass-500);

  /* ---- Borders ----------------------------------------------------------- */
  --border-hair:   var(--gray-200);
  --border-soft:   var(--gray-300);
  --border-strong: var(--navy-900);
  --border-on-dark: rgba(255,255,255,0.14);

  /* ---- Type families ----------------------------------------------------- */
  --font-serif: 'Spectral', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale -------------------------------------------------------- */
  --text-display:  clamp(48px, 6vw, 84px);
  --text-h1:       clamp(40px, 4.4vw, 60px);
  --text-h2:       clamp(30px, 3vw, 40px);
  --text-h3:       24px;
  --text-h4:       20px;
  --text-body-lg:  19px;
  --text-body:     17px;
  --text-small:    15px;
  --text-caption:  13px;
  --text-eyebrow:  12px;

  /* ---- Weights ----------------------------------------------------------- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(64px, 9vw, 128px);
  --gutter:    clamp(20px, 5vw, 80px);
  --maxw:      1280px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10,31,56,0.06), 0 1px 1px rgba(10,31,56,0.04);
  --shadow-md: 0 4px 16px rgba(10,31,56,0.08), 0 1px 3px rgba(10,31,56,0.06);
  --shadow-lg: 0 18px 48px rgba(10,31,56,0.14), 0 4px 12px rgba(10,31,56,0.08);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;
}