/* ============================================================
   TODESCATTO ADVOCACIA PREVIDENCIÁRIA — Design Tokens
   Brand: Diego Eduardo Todescatto, OAB/SC 58.998
   Florianópolis · Brazil · Social security / pension law
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Saira:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ----------------------------------------------------------
     COLORS
     Two-color identity from the brand manual:
       Navy (Azul-Marinho) — gravitas, justice, institutional trust
       Ouro/Âmbar          — warmth, advocacy, a beacon
     Plus tints/shades derived for UI semantics.
     ---------------------------------------------------------- */

  /* — Primary palette — */
  --td-navy:           #010A2C;   /* CMYK 100/92/48/66 */
  --td-amber:          #F1A34F;   /* CMYK   3/41/78/ 0 */

  /* — Navy tints/shades (extrapolated for UI use) — */
  --td-navy-900:       #010A2C;   /* base */
  --td-navy-800:       #0A1640;
  --td-navy-700:       #16245C;
  --td-navy-600:       #2A3A78;
  --td-navy-500:       #4759A0;
  --td-navy-300:       #94A0C5;
  --td-navy-100:       #DCE1ED;
  --td-navy-50:        #F2F4F9;

  /* — Amber tints/shades — */
  --td-amber-700:      #C77F2F;
  --td-amber-600:      #DD9140;
  --td-amber-500:      #F1A34F;   /* base */
  --td-amber-400:      #F4B772;
  --td-amber-200:      #FBDFB7;
  --td-amber-50:       #FDF3E5;

  /* — Neutrals (warm-leaning, paper-tone) — */
  --td-paper:          #FBFAF7;   /* document/page background */
  --td-paper-2:        #F5F3ED;   /* card on paper */
  --td-ink:            #1A1A1A;   /* body ink (NOT navy) */
  --td-mute:           #6E6E72;   /* muted body */
  --td-rule:           #E3E1DA;   /* hairlines */
  --td-black-40:       #ADADAD;   /* greyscale 40% as defined in manual */
  --td-white:          #FFFFFF;

  /* — Semantic surfaces — */
  --td-bg:             var(--td-paper);
  --td-bg-elevated:    var(--td-white);
  --td-bg-inverse:     var(--td-navy);
  --td-fg-1:           var(--td-navy);     /* primary text */
  --td-fg-2:           var(--td-ink);      /* body text */
  --td-fg-3:           var(--td-mute);     /* secondary */
  --td-fg-on-navy:     var(--td-white);
  --td-fg-on-amber:    var(--td-navy);
  --td-accent:         var(--td-amber);
  --td-link:           var(--td-amber-700);
  --td-link-hover:     var(--td-amber-600);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     The wordmark itself is custom ("Estilizada" per manual) —
     never typeset it; always use the supplied logo asset.
     For everything else, Montserrat carries the brand voice
     used across business cards, envelopes and letterhead:
     letter-spaced uppercase labels, neutral sentence body.
     Saira optional alt for display headlines (geometric, more
     architectural — closer to the wordmark in spirit).
     ---------------------------------------------------------- */
  --td-font-display:   'Saira', 'Montserrat', system-ui, sans-serif;
  --td-font-body:      'Montserrat', system-ui, sans-serif;
  --td-font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — geometric, conservative for legal context */
  --td-size-xs:        0.75rem;     /* 12px — overline / caption */
  --td-size-sm:        0.875rem;    /* 14px — small body / fine print */
  --td-size-base:      1rem;        /* 16px — body */
  --td-size-lg:        1.125rem;    /* 18px — lead body */
  --td-size-xl:        1.375rem;    /* 22px — h4 */
  --td-size-2xl:       1.75rem;     /* 28px — h3 */
  --td-size-3xl:       2.375rem;    /* 38px — h2 */
  --td-size-4xl:       3.25rem;     /* 52px — h1 */
  --td-size-display:   4.5rem;      /* 72px — hero */

  --td-leading-tight:  1.15;
  --td-leading-snug:   1.3;
  --td-leading-normal: 1.55;
  --td-leading-loose:  1.7;

  --td-tracking-tight:  -0.01em;
  --td-tracking-normal:  0;
  --td-tracking-wide:    0.08em;     /* category labels */
  --td-tracking-wider:   0.14em;     /* "ADVOCACIA PREVIDENCIÁRIA" lockup */
  --td-tracking-widest:  0.22em;     /* eyebrows */

  /* ----------------------------------------------------------
     SPACING / RADII / SHADOWS / MOTION
     ---------------------------------------------------------- */
  --td-space-1:   4px;
  --td-space-2:   8px;
  --td-space-3:   12px;
  --td-space-4:   16px;
  --td-space-5:   24px;
  --td-space-6:   32px;
  --td-space-7:   48px;
  --td-space-8:   64px;
  --td-space-9:   96px;

  --td-radius-sm:    4px;
  --td-radius-md:    8px;
  --td-radius-lg:    16px;
  --td-radius-pill:  999px;          /* contact capsules on stationery */

  --td-border:       1px solid var(--td-rule);
  --td-border-strong:1px solid var(--td-navy);
  --td-border-amber: 1px solid var(--td-amber);

  /* Shadows — restrained, document-like */
  --td-shadow-sm: 0 1px 2px rgba(1, 10, 44, 0.06);
  --td-shadow-md: 0 6px 18px -8px rgba(1, 10, 44, 0.18), 0 2px 6px -2px rgba(1, 10, 44, 0.08);
  --td-shadow-lg: 0 24px 48px -20px rgba(1, 10, 44, 0.28), 0 6px 14px -6px rgba(1, 10, 44, 0.10);

  /* Motion — slow, considered, legal */
  --td-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --td-dur-fast:  150ms;
  --td-dur:       240ms;
  --td-dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html { color-scheme: light; }
body {
  background: var(--td-bg);
  color: var(--td-fg-2);
  font-family: var(--td-font-body);
  font-size: var(--td-size-base);
  line-height: var(--td-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — navy, tight, display family */
h1, .td-h1 {
  font-family: var(--td-font-display);
  font-weight: 700;
  font-size: var(--td-size-4xl);
  line-height: var(--td-leading-tight);
  letter-spacing: var(--td-tracking-tight);
  color: var(--td-fg-1);
  margin: 0 0 var(--td-space-5);
}
h2, .td-h2 {
  font-family: var(--td-font-display);
  font-weight: 700;
  font-size: var(--td-size-3xl);
  line-height: var(--td-leading-tight);
  letter-spacing: var(--td-tracking-tight);
  color: var(--td-fg-1);
  margin: 0 0 var(--td-space-4);
}
h3, .td-h3 {
  font-family: var(--td-font-display);
  font-weight: 600;
  font-size: var(--td-size-2xl);
  line-height: var(--td-leading-snug);
  color: var(--td-fg-1);
  margin: 0 0 var(--td-space-4);
}
h4, .td-h4 {
  font-family: var(--td-font-body);
  font-weight: 600;
  font-size: var(--td-size-xl);
  line-height: var(--td-leading-snug);
  color: var(--td-fg-1);
  margin: 0 0 var(--td-space-3);
}

p { margin: 0 0 var(--td-space-4); text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--td-fg-1); }
a {
  color: var(--td-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--td-dur-fast) var(--td-ease);
}
a:hover { color: var(--td-link-hover); }

/* Eyebrow / overline — letter-spaced caps, signature for the brand */
.td-eyebrow {
  font-family: var(--td-font-body);
  font-weight: 600;
  font-size: var(--td-size-xs);
  letter-spacing: var(--td-tracking-wider);
  text-transform: uppercase;
  color: var(--td-fg-1);
}
.td-eyebrow--amber { color: var(--td-amber-700); }
.td-eyebrow--on-navy { color: var(--td-amber); }

/* Tagline lockup — "ADVOCACIA PREVIDENCIÁRIA" treatment */
.td-tagline {
  font-family: var(--td-font-body);
  font-weight: 500;
  font-size: var(--td-size-sm);
  letter-spacing: var(--td-tracking-wider);
  text-transform: uppercase;
}

/* Fine print — OAB numbers, addresses */
.td-fine {
  font-size: var(--td-size-xs);
  letter-spacing: var(--td-tracking-wide);
  text-transform: uppercase;
  color: var(--td-fg-3);
}

/* Code (rare — only for technical) */
code, kbd, samp {
  font-family: var(--td-font-mono);
  font-size: 0.9em;
  background: var(--td-navy-50);
  padding: 0.1em 0.35em;
  border-radius: var(--td-radius-sm);
}