/* ============================================================
   31º Cartório SP (Pirituba) — Design Tokens
   Fonte: Design System "Cartório Design System".
   Verde institucional + dourado sobre superfícies neutras.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Marca: Verde (primário institucional) ---- */
  --green-900: #1C3325;   /* mais profundo — base do rodapé, overlays */
  --green-800: #243F2E;
  --green-700: #2E4F3C;   /* verde institucional CORE */
  --green-600: #3A6249;
  --green-500: #4A765B;
  --green-300: #8FA897;
  --green-100: #E4ECE7;
  --green-50:  #F2F6F3;

  /* ---- Marca: Dourado (acento) ---- */
  --gold-700:  #9C7842;
  --gold-600:  #B08A50;
  --gold-500:  #C19A64;   /* dourado CORE */
  --gold-400:  #D0AE80;
  --gold-300:  #DEC4A0;
  --gold-100:  #F4EADA;

  /* ---- Neutros ---- */
  --white:     #FFFFFF;
  --paper:     #FBFAF7;   /* off-white quente da página */
  --gray-50:   #F5F4F1;
  --gray-100:  #ECEAE5;
  --gray-200:  #DBD8D1;
  --gray-300:  #C2BEB5;
  --gray-500:  #8A867D;
  --gray-700:  #565249;
  --gray-900:  #2A2722;

  /* ---- Superfícies ---- */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-tinted:  var(--green-50);
  --surface-dark:    var(--green-700);
  --surface-darker:  var(--green-900);
  --surface-utility: var(--green-800);

  /* ---- Texto ---- */
  --text-heading:      var(--gray-900);
  --text-body:         var(--gray-700);
  --text-muted:        var(--gray-500);
  --text-on-dark:      var(--white);
  --text-on-dark-soft: rgba(255,255,255,0.72);
  --text-accent:       var(--gold-600);
  --text-link:         var(--green-700);

  /* ---- Bordas e linhas ---- */
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-gold:    var(--gold-500);
  --border-on-dark: rgba(255,255,255,0.16);

  /* ---- Interativo ---- */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-press:  var(--gold-700);
  --primary:       var(--green-700);
  --primary-hover: var(--green-800);
  --primary-press: var(--green-900);

  /* ---- Status ---- */
  --success:  #3A7D52;
  --warning:  #B98900;
  --danger:   #A63B33;
  --info:     #3A6249;
  --success-bg: #E6F0EA;
  --warning-bg: #FBF1D9;
  --danger-bg:  #F6E5E3;
  --info-bg:    #E4ECE7;

  /* ---- Tipografia: famílias ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Pesos ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Escala de display (serif) ---- */
  --text-hero: calc(0.95 * clamp(2.6rem, 4.6vw, 4rem));
  --text-h1:   calc(0.95 * clamp(2.1rem, 3.4vw, 3rem));
  --text-h2:   calc(0.95 * clamp(1.7rem, 2.6vw, 2.25rem));
  --text-h3:   calc(0.95 * 1.5rem);
  --text-h4:   calc(0.95 * 1.25rem);

  /* ---- Escala de corpo (sans) ---- */
  --text-lead: calc(0.95 * 1.25rem);
  --text-base: 1rem;
  --text-sm:   0.9375rem;
  --text-xs:   0.8125rem;

  /* ---- Eyebrow / label ---- */
  --label-size: 0.8125rem;
  --label-spacing: 0.16em;
  --label-weight: var(--fw-semibold);

  /* ---- Alturas de linha ---- */
  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-label: 0.16em;

  /* ---- Espaçamento (base 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: var(--space-9);
  --section-y-sm: var(--space-8);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Raios ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Bordas ---- */
  --border-hairline: 1px;
  --border-accent: 2px;

  /* ---- Sombras (sutis, contenção institucional) ---- */
  --shadow-xs: 0 1px 1px rgba(28, 51, 37, 0.03);
  --shadow-sm: 0 1px 2px rgba(28, 51, 37, 0.04);
  --shadow-md: 0 3px 10px rgba(28, 51, 37, 0.05);
  --shadow-lg: 0 8px 24px rgba(28, 51, 37, 0.07);
  --ring-gold: 0 0 0 3px rgba(193, 154, 100, 0.35);
  --ring-green: 0 0 0 3px rgba(46, 79, 60, 0.25);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* ---- Padrão de fundo verde (tom sobre tom, recriado em SVG) ---- */
  --pattern-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M30 20c0 14 10 18 6 30-2 6-10 6-12 0-2-6 3-9 1-17 3 4 3-2 5-13z'/%3E%3Cpath d='M90 95c0 14 10 18 6 30-2 6-10 6-12 0-2-6 3-9 1-17 3 4 3-2 5-13z'/%3E%3C/g%3E%3C/svg%3E");
}