/* ==========================================================================
   Barros & Uribe Abogadas — Foundations
   Colors, typography, spacing, radii, shadows, motion.
   --------------------------------------------------------------------------
   Filosofía: editorial, académico, sobrio. Tipografía con voz, paleta
   restringida (papel cálido + tinta profunda + acento ocre), mucho aire.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Substitutos de Google Fonts hasta tener archivos definitivos del estudio:
   - Display:   "Newsreader"   — serif editorial moderno (substitución, ver README)
   - Sans:      "Public Sans"   — sans neutro, raíz institucional (substitución)
   - Mono:      "JetBrains Mono" — citas y referencias normativas              */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,300;1,6..72,400;1,6..72,500&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Color: base palette ---------------------------------------------- */
  --bu-tinta:           #0E1726;  /* deep midnight ink — primary fg          */
  --bu-tinta-suave:     #1F2A3D;  /* softer ink for body                     */
  --bu-grafito:         #4A5364;  /* muted text                              */
  --bu-piedra:          #8A8E96;  /* tertiary / disabled                     */
  --bu-niebla:          #C9C3B6;  /* hairline borders on paper               */

  --bu-papel:           #F4EFE5;  /* warm cream — default canvas             */
  --bu-marfil:          #FBF8F2;  /* lighter card surface                    */
  --bu-hueso:           #E8DFCB;  /* muted neutral panels                    */
  --bu-blanco:          #FFFFFF;

  /* ---- Color: accents (used sparingly, never decoratively) -------------- */
  --bu-ocre:            #B5853A;  /* warm metallic accent — marks, rules    */
  --bu-ocre-tenue:      #D9BE85;  /* tinted highlight                        */
  --bu-granate:         #6E2230;  /* oxblood — secondary, document sigils    */
  --bu-salvia:          #5A6B5E;  /* quiet green — tags, links opt           */

  /* ---- Color: semantic --------------------------------------------------- */
  --bu-exito:           #3F6B4F;
  --bu-aviso:           #A6701E;
  --bu-error:           #8C2A2A;
  --bu-info:            #2E4F73;

  /* ---- Color: tokens (use these in components) -------------------------- */
  --fg-1: var(--bu-tinta);
  --fg-2: var(--bu-tinta-suave);
  --fg-3: var(--bu-grafito);
  --fg-4: var(--bu-piedra);
  --fg-on-tinta: var(--bu-papel);

  --bg-canvas: var(--bu-papel);
  --bg-surface: var(--bu-marfil);
  --bg-sunken: var(--bu-hueso);
  --bg-inverse: var(--bu-tinta);

  --line-hair: rgba(14, 23, 38, 0.12);   /* hairline rules                    */
  --line-rule: rgba(14, 23, 38, 0.24);
  --line-strong: var(--bu-tinta);

  --accent: var(--bu-ocre);
  --accent-secondary: var(--bu-granate);

  /* ---- Typography: families --------------------------------------------- */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Typography: scale (modular, 1.20 ratio at 16px base) ------------- */
  --fs-12:  0.75rem;
  --fs-13:  0.8125rem;
  --fs-14:  0.875rem;
  --fs-15:  0.9375rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-28:  1.75rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-48:  3rem;
  --fs-56:  3.5rem;
  --fs-72:  4.5rem;
  --fs-96:  6rem;

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

  /* ---- Radii (very restrained — this is a law firm, not a fintech) ------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Shadows (subtle paper depth, not glow) --------------------------- */
  --shadow-1: 0 1px 0 rgba(14, 23, 38, 0.06), 0 1px 2px rgba(14, 23, 38, 0.05);
  --shadow-2: 0 1px 0 rgba(14, 23, 38, 0.06), 0 6px 16px -6px rgba(14, 23, 38, 0.12);
  --shadow-3: 0 2px 0 rgba(14, 23, 38, 0.06), 0 24px 48px -16px rgba(14, 23, 38, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 56px);
}

/* ==========================================================================
   Base reset + body defaults
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--fg-2);
  background: var(--bg-canvas);
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Semantic typography classes
   --------------------------------------------------------------------------
   El estudio comunica con voz editorial: titulares en serif (Newsreader),
   texto corrido en sans (Public Sans), eyebrow/etiquetas en sans tracked.
   ========================================================================== */

.bu-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bu-ocre);
  line-height: 1;
}

.bu-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-96));
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-feature-settings: "ss01";
  font-variation-settings: "opsz" 60;
}

.bu-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-40), 4.4vw, var(--fs-72));
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 48;
}

.bu-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-32), 3.2vw, var(--fs-48));
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 36;
}

.bu-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-28);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--fg-1);
}

.bu-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--fg-1);
}

.bu-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-24);
  line-height: 1.42;
  color: var(--fg-2);
  font-style: italic;
  font-variation-settings: "opsz" 24;
}

.bu-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.65;
  color: var(--fg-2);
}

.bu-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--fg-3);
}

.bu-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.bu-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: 1.3;
  color: var(--fg-1);
  font-variation-settings: "opsz" 32;
}

.bu-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--bu-ocre);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out);
}
a:hover { text-decoration-color: var(--fg-1); }

hr.bu-rule {
  border: 0;
  border-top: 1px solid var(--line-hair);
  margin: var(--sp-8) 0;
}

hr.bu-rule-accent {
  border: 0;
  border-top: 1px solid var(--bu-ocre);
  width: 48px;
  margin: var(--sp-6) 0;
}