/* =========================================================
   CENTRO JURIDIA — Design Tokens v2
   Fuente: Guía de Marca Oficial (LegalTech Minimalista)
   ========================================================= */

/* === LOCAL BRAND FONTS — Inter Variable + Static fallbacks === */

/* Inter Variable — cuerpo y UI (cubre pesos 100–900) */
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/InterVariable.ttf') format('truetype'),
       url('fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('fonts/InterVariable-Italic.ttf') format('truetype'),
       url('fonts/Inter-Italic.ttf') format('truetype');
}

/* Static fallbacks por peso — Inter */
@font-face { font-family:'Inter'; font-weight:100; font-style:normal; font-display:swap; src:url('fonts/Inter-Thin.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:200; font-style:normal; font-display:swap; src:url('fonts/Inter-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/Inter-Light.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/Inter-Italic.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Inter-Bold.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Inter-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/Inter-Black.ttf') format('truetype'); }

/* Inter Display — optimizada para títulos grandes (opsz 32) */
@font-face {
  font-family: 'Inter Display';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/InterVariable.ttf') format('truetype'),
       url('fonts/InterDisplay-Regular.ttf') format('truetype');
  font-variation-settings: 'opsz' 32;
}
@font-face {
  font-family: 'Inter Display';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('fonts/InterVariable-Italic.ttf') format('truetype'),
       url('fonts/InterDisplay-Italic.ttf') format('truetype');
  font-variation-settings: 'opsz' 32;
}

/* Static fallbacks por peso — Inter Display */
@font-face { font-family:'Inter Display'; font-weight:100; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Thin.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:200; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Light.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/InterDisplay-Italic.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Bold.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Inter Display'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/InterDisplay-Black.ttf') format('truetype'); }

:root {

  /* --- COLOR PRIMITIVES (valores oficiales Pantone) --- */

  /* Deep Navy — Pantone 2965 C — 30% estructura */
  --navy:          #02044A;
  --navy-dark:     #01022e;
  --navy-mid:      #0a0e6a;

  /* Azul Acero — Pantone 534 C */
  --steel:         #324575;
  --steel-dark:    #243060;
  --steel-light:   #4a5f94;

  /* Azul Cielo — Pantone 298 C — 10% acción */
  --sky:           #40B3E6;
  --sky-dark:      #2e9fd0;
  --sky-light:     #7acded;

  /* Azul Océano — Pantone 2995 C */
  --ocean:         #2E8FC6;
  --ocean-light:   #5aafd8;

  /* Gris Antracita — Cool Gray 11 C */
  --charcoal:      #4F4F4F;
  --charcoal-light:#6b6b6b;

  /* Fondos — 60% */
  --white:         #FFFFFF;
  --smoke:         #F5F7FA;
  --smoke-dark:    #EBEEF4;

  /* Neutros */
  --gray-200:      #e5e7eb;
  --gray-300:      #d1d5db;
  --gray-400:      #9ca3af;
  --gray-900:      #111827;

  /* --- SEMANTIC COLORS --- */
  --color-bg:           var(--white);
  --color-bg-secondary: var(--smoke);
  --color-bg-dark:      var(--navy);

  --color-brand:        var(--navy);
  --color-accent:       var(--sky);
  --color-accent-alt:   var(--steel);

  --color-text-primary:   var(--navy);
  --color-text-body:      var(--charcoal);
  --color-text-muted:     var(--gray-400);
  --color-text-inverse:   var(--white);

  --color-border:       var(--gray-200);
  --color-border-dark:  rgba(255,255,255,0.10);

  /* --- TYPOGRAPHY --- */

  --font-display: 'Inter Display', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing (tracking) */
  --tracking-tight:   -0.02em;  /* Títulos display */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.12em;  /* Microcopy ALL CAPS */

  /* --- SPACING --- */
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

  /* --- RADII (Bento Grid style) --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* --- SHADOWS --- */
  --shadow-xs:  0 1px 3px rgba(2,4,74,0.06);
  --shadow-sm:  0 2px 8px  rgba(2,4,74,0.08);
  --shadow-md:  0 4px 16px rgba(2,4,74,0.10);
  --shadow-lg:  0 8px 32px rgba(2,4,74,0.12);
  --shadow-xl:  0 16px 48px rgba(2,4,74,0.15);

  /* --- TRANSITIONS --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* =========================================================
   BASE ELEMENT STYLES
   ========================================================= */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.label, .microcopy {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

/* Accent text highlight */
.accent { color: var(--sky); }
.accent-steel { color: var(--steel); }