/* ============================================================
   Citrangulo & de Marco — Advogados
   Core Design Tokens: Color + Typography
   ------------------------------------------------------------
   Brand: law firm in Nova Friburgo / RJ, Brazil.
   Two interlocking diamond links — navy + purple.
   FONT NOTE: Display/wordmark serif = EB Garamond (self-hosted,
   user-supplied — fonts/). Body/UI sans = Mulish and
   tracked-caps = Jost are loaded from Google Fonts CDN (no local
   files supplied; CDN delivery is fine).
   ============================================================ */

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

/* ---------- Self-hosted brand serif ---------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/EBGaramond-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* ---------- Brand core ---------- */
  --navy:            #1F3965;   /* primary — interlocking link #1, wordmark on light */
  --purple:          #552168;   /* co-principal — interlocking link #2 */

  /* ---------- Navy scale ---------- */
  --navy-900: #13233F;
  --navy-800: #192F53;
  --navy-700: #1F3965;   /* = --navy */
  --navy-600: #3A5178;
  --navy-500: #576B8C;
  --navy-400: #7D8CA6;
  --navy-300: #A5B0C1;
  --navy-200: #C9D0DA;
  --navy-100: #E4E7ED;
  --navy-50:  #F2F3F6;

  /* ---------- Purple scale ---------- */
  --purple-900: #33143E;
  --purple-800: #461B55;
  --purple-700: #552168;   /* = --purple */
  --purple-600: #693C7A;
  --purple-500: #80598E;
  --purple-400: #9C7EA7;
  --purple-300: #BBA6C3;
  --purple-200: #D6CADB;
  --purple-100: #EBE4ED;
  --purple-50:  #F5F2F6;

  /* ---------- Neutrals (warm-cool slate, tuned to navy) ---------- */
  --ink:        #14181F;   /* primary text on light */
  --slate-800:  #2B313B;
  --slate-700:  #434C59;
  --slate-600:  #5C6675;   /* secondary text */
  --slate-500:  #79828F;
  --slate-400:  #9AA2AD;   /* muted / placeholder */
  --slate-300:  #C3C9D1;   /* borders strong */
  --slate-200:  #DEE2E7;   /* borders / dividers */
  --slate-100:  #ECEEF1;
  --paper-2:    #F1F1F1;   /* brand light surface (business-card back) */
  --paper-1:    #F8F9FA;   /* app canvas */
  --white:      #FFFFFF;

  /* ---------- Semantic ---------- */
  --fg-1:   var(--ink);        /* primary text */
  --fg-2:   var(--slate-600);  /* secondary text */
  --fg-3:   var(--slate-400);  /* muted text */
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.72);

  --bg-1:   var(--white);      /* default surface */
  --bg-2:   var(--paper-1);    /* page canvas */
  --bg-3:   var(--paper-2);    /* subtle section fill */
  --bg-dark: var(--navy-900);

  --brand:        var(--navy);
  --brand-press:  var(--navy-800);
  --accent:       var(--purple);
  --accent-press: var(--purple-800);

  --line:        var(--slate-200);
  --line-strong: var(--slate-300);

  --success: #1E7F4F;
  --warning: #B7791F;
  --danger:  #B4233A;
  --info:    var(--navy-500);

  /* ---------- Brand gradient (business-card front) ---------- */
  --gradient-brand: linear-gradient(135deg, #083869 0%, #402769 52%, #630A64 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(135deg, #0A4585 0%, #5A2A78 55%, #8A1583 100%); /* @kind color */

  /* ---------- Typography families ---------- */
  --font-serif:   'EB Garamond', 'Georgia', 'Times New Roman', serif;  /* wordmark + display headings (self-hosted) */
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body + UI */
  --font-eyebrow: 'Jost', 'Mulish', sans-serif;              /* tracked uppercase tagline ("ADVOGADOS") */

  /* ---------- Type scale (1.250 major-third, 16px base) ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5625rem; /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.052rem;  /* 49 */
  --text-5xl:  3.815rem;  /* 61 */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tagline: 0.42em;  /* ADVOGADOS lockup */
  --tracking-eyebrow: 0.18em;
  --tracking-tight:  -0.01em;

  /* ---------- Radii ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(2,31,64,0.06);
  --shadow-sm: 0 1px 3px rgba(2,31,64,0.08), 0 1px 2px rgba(2,31,64,0.05);
  --shadow-md: 0 4px 14px rgba(2,31,64,0.09), 0 2px 5px rgba(2,31,64,0.06);
  --shadow-lg: 0 14px 40px rgba(2,31,64,0.14), 0 5px 14px rgba(2,31,64,0.08);
  --shadow-brand: 0 16px 40px rgba(112,1,106,0.20);

  --ring: 0 0 0 3px rgba(20,87,160,0.30);
}

/* ============================================================
   Semantic element styles — apply with utility classes
   ============================================================ */

.ds-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ds-h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ds-h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ds-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ds-eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.ds-tagline {
  font-family: var(--font-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tagline);
}
.ds-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}
.ds-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.ds-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}