/* =============================================================
   DuoCore Design System — colors_and_type.css
   Single source of truth for tokens.
   ============================================================= */

/* ---------- Fonts (Google Fonts CDN) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: base ---------- */
  --ink:        #0B0F14;   /* near-black blue, primary text, marca */
  --ink-2:      #3A4451;   /* secondary text */
  --ink-3:      #666F7F;   /* tertiary text, captions — AA 4.5:1 sobre paper */
  --ink-4:      #707680;   /* placeholder, disabled — AA 4.5:1 sobre surface */

  --paper:      #F6F5F1;   /* main bg, warm off-white */
  --paper-2:    #ECEAE3;   /* secondary bg */
  --surface:    #FFFFFF;   /* card / elevated bg */
  --mist:       #D8DAD3;   /* divider warm */
  --mist-2:     #E7E5DE;   /* soft divider */

  /* ---------- Color: divisional ---------- */
  --med:        #1E5BFF;   /* MedTech — clinical electric blue */
  --med-ink:    #0A2BAA;   /* MedTech hover/pressed */
  --med-soft:   #E6EDFF;   /* MedTech tinted surface */

  --inm:        #A55F26;   /* Inmobiliaria — copper / terracota — AA 4.5:1 (texto blanco y sobre paper) */
  --inm-ink:    #7A3F11;   /* Inmobiliaria hover/pressed */
  --inm-soft:   #F4E7D8;   /* Inmobiliaria tinted surface */

  --core:       var(--ink); /* paraguas — DuoCore itself never colored */

  /* ---------- Color: semantic ---------- */
  --ok:         #1F8A5B;
  --warn:       #C98A12;
  --err:        #B23A2F;

  /* ---------- Type ---------- */
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --fs-eyebrow:   0.72rem;    /* 11.5px */
  --fs-caption:   0.8125rem;  /* 13px */
  --fs-body:      1rem;       /* 16px */
  --fs-lead:      1.125rem;   /* 18px */
  --fs-h3:        1.5rem;     /* 24px */
  --fs-h2:        clamp(2rem, 3.6vw, 3rem);
  --fs-h1:        clamp(2.75rem, 5.5vw, 4.75rem);
  --fs-hero:      clamp(3.25rem, 7vw, 6rem);

  --tracking-eyebrow: 0.16em;
  --tracking-tight:   -0.025em;
  --tracking-tighter: -0.035em;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;

  /* ---------- Spacing scale (base 4) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-32:  128px;
  --sp-48:  192px;

  /* ---------- Radius ---------- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(11,15,20,.04), 0 0 0 1px rgba(11,15,20,.04);
  --shadow-md: 0 8px 24px -8px rgba(11,15,20,.08), 0 2px 6px -2px rgba(11,15,20,.05);
  --shadow-lg: 0 24px 60px -20px rgba(11,15,20,.18);
  --shadow-inset-thin: inset 0 0 0 1px rgba(11,15,20,.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-md:   240ms;
  --dur-lg:   420ms;

  /* ---------- Container ---------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* ---------- Reset light ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type defaults ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

/* tabular nums for stats */
.num,
.stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  transition: filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(1px); filter: brightness(0.96); }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--mist); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-med { background: var(--med); color: #fff; }
.btn-inm { background: var(--inm); color: #fff; }

.btn-lg { height: 52px; padding-inline: 24px; font-size: 1rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--mist);
}
.card-bento {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-8);
}
.card-inverse {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
}
.card-inverse h1,
.card-inverse h2,
.card-inverse h3 { color: var(--paper); }

/* ---------- Form ---------- */
.input,
.textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-4); }
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(11,15,20,.06);
}

label.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* ---------- Badge / Pill ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--mist);
  color: var(--ink-2);
  background: var(--surface);
}
.badge-med { color: var(--med-ink); background: var(--med-soft); border-color: transparent; }
.badge-inm { color: var(--inm-ink); background: var(--inm-soft); border-color: transparent; }
.badge-ink { color: var(--paper); background: var(--ink); border-color: transparent; }

/* ---------- Divider ---------- */
.divider {
  height: 1px;
  background: var(--mist);
  border: 0;
  margin: 0;
}
.divider-vert {
  width: 1px;
  background: var(--mist);
}

/* ---------- Section padding ---------- */
.section { padding-block: clamp(64px, 10vw, 128px); }
.section-sm { padding-block: clamp(48px, 6vw, 80px); }

/* ---------- Selection ---------- */
::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Focus visible ring ---------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}