/* ============================================================
   CCR Legal — design tokens (Caldic deck build)
   Derivado del brandbook 2022. Fuentes locales — offline ready.
   ============================================================ */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; src: url("../fonts/DMSans-Light.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; src: url("../fonts/DMSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: italic;  font-weight: 400; src: url("../fonts/DMSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; src: url("../fonts/DMSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; src: url("../fonts/DMSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; src: url("../fonts/DMSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; src: url("../fonts/CormorantGaramond-Regular.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic;  font-weight: 400; src: url("../fonts/CormorantGaramond-Italic.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic;  font-weight: 500; src: url("../fonts/CormorantGaramond-MediumItalic.ttf") format("truetype"); }

:root {
  /* Brand colors (brandbook §3) */
  --ccr-indigo:  #121D68;
  --ccr-violet:  #6E39E2;
  --ccr-bone:    #F9F4F2;

  /* Opacity ladder — única forma sancionada de aclarar/oscurecer */
  --ccr-indigo-80: rgba(18,29,104,0.80);
  --ccr-indigo-60: rgba(18,29,104,0.60);
  --ccr-indigo-40: rgba(18,29,104,0.40);
  --ccr-indigo-20: rgba(18,29,104,0.20);
  --ccr-indigo-12: rgba(18,29,104,0.12);
  --ccr-indigo-06: rgba(18,29,104,0.06);

  --ccr-violet-80: rgba(110,57,226,0.80);
  --ccr-violet-60: rgba(110,57,226,0.60);
  --ccr-violet-40: rgba(110,57,226,0.40);
  --ccr-violet-20: rgba(110,57,226,0.20);
  --ccr-violet-10: rgba(110,57,226,0.10);

  --ccr-bone-80: rgba(249,244,242,0.80);
  --ccr-bone-60: rgba(249,244,242,0.60);
  --ccr-bone-40: rgba(249,244,242,0.40);
  --ccr-bone-20: rgba(249,244,242,0.20);

  /* Semantic surfaces */
  --bg:            var(--ccr-bone);
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    var(--ccr-indigo);
  --bg-accent:     var(--ccr-violet);

  --fg:            var(--ccr-indigo);
  --fg-2:          var(--ccr-indigo-80);
  --fg-3:          var(--ccr-indigo-60);
  --fg-muted:      var(--ccr-indigo-40);
  --fg-on-dark:    var(--ccr-bone);
  --fg-on-accent:  var(--ccr-bone);
  --fg-link:       var(--ccr-violet);

  --border:        var(--ccr-indigo-12);
  --border-strong: var(--ccr-indigo-20);
  --focus-ring:    var(--ccr-violet);

  /* Type families */
  --font-sans:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", "DM Sans", Georgia, "Times New Roman", serif;

  /* Spacing (4px grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 80px; --space-10: 96px; --space-11: 128px; --space-12: 160px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows — cool, tinted indigo */
  --shadow-1: 0 1px 2px rgba(18,29,104,0.06);
  --shadow-2: 0 4px 16px rgba(18,29,104,0.08);
  --shadow-3: 0 24px 48px -12px rgba(18,29,104,0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* permitir scroll cuando el usuario hace Ctrl+zoom y el contenido fijo se desborda */
  overflow: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a { color: var(--fg-link); }

/* Type primitives */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h1 { font-size: 48px; font-weight: 600; line-height: 1.1;  letter-spacing: -0.03em; }
.h2 { font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.h3 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.lead { font-size: 22px; line-height: 1.5; color: var(--fg-2); }
.body { font-size: 18px; line-height: 1.6; }
.small { font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.caption { font-size: 14px; line-height: 1.4; color: var(--fg-3); }

/* Cite line — used to attach normative citations */
.cite {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.cite strong { color: var(--fg-2); font-weight: 600; }