/* NOTA: el @font-face original cargaba un Helvetica Neue 400 auto-alojado
   (TTF gratuito de baja calidad) cuyo trazo se renderizaba tosco frente a
   los títulos en negrita (que usan la Helvetica Neue del sistema). Se
   desactiva para que TODO el texto use la Helvetica Neue / Arial del sistema
   y el trazo sea consistente y nítido.
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/helvetica-neue-regular_ufonts.com.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================================
   THE OFFICE CENTRAL — DESIGN TOKENS
   Single source of truth. Extracted faithfully from brand refs.
   Consume via var(--token). Never hard-code a hex in product code.
   ============================================================ */

:root {
  /* ---------- BRAND GREEN (forest → bright) ---------- */
  --green-950: #0B2E20;
  --green-900: #14442F;   /* deepest — logo "central", display headings */
  --green-800: #19553A;
  --green-700: #1E6B47;   /* brand base — links, icon strokes */
  --green-600: #228A55;
  --green-500: #2BA15C;   /* PRIMARY action — filled CTA buttons */
  --green-400: #4DB87A;
  --green-300: #86D2A6;
  --green-250: #BBCABF;   /* muted desaturated sage — soft accent / backgrounds */
  --green-200: #BFE6CF;
  --green-100: #E3F2E9;   /* soft tint — icon circles, hover wash */
  --green-50:  #F1F8F4;   /* faintest wash — section bands */

  /* semantic aliases */
  --brand:          var(--green-700);
  --brand-deep:     var(--green-900);
  --action:         var(--green-500);
  --action-hover:   var(--green-600);
  --action-press:   var(--green-700);
  --action-grad:        linear-gradient(135deg, var(--green-900) 0%, var(--green-500) 100%);
  --action-grad-hover:  linear-gradient(135deg, #103A28 0%, #239150 100%);

  /* ---------- NEUTRALS (warm-cool light gray) ---------- */
  --ink-900: #1B1F1D;   /* primary text — near-black, faint green cast */
  --ink-800: #2B302D;
  --ink-700: #3A403D;
  --ink-600: #545B57;
  --ink-500: #6A716D;   /* secondary text */
  --ink-400: #8B918E;   /* muted / placeholder */
  --ink-300: #AEB3B0;
  --line-300: #DCDFDD;
  --line-200: #E6E8E7;  /* default borders / dividers */
  --line-100: #EFF1F0;  /* subtle inner lines */

  --surface:    #FFFFFF;   /* cards, sheets */
  --surface-2:  #FAFBFA;   /* nested surface */
  --bg:         #F4F5F5;   /* page background */
  --bg-warm:    #F7F7F6;   /* alt section background */

  /* halo / character stage — the radial studio gray behind agents */
  --halo-from: #ECEDEE;
  --halo-to:   #D6D8DA;
  --halo-ring: rgba(255,255,255,0.95);

  /* ---------- DATA / STATUS (sparing — dashboards & docs only) ---------- */
  --status-success: #2BA15C;
  --status-warning: #E0A23C;
  --status-danger:  #D2503C;
  --status-info:    #3B7DD8;
  --status-neutral: #8B918E;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Roboto Mono", Menlo, monospace;

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* type scale (desktop) — line-height / tracking baked into utilities */
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline: 12px;

  /* ---------- SPACING (4px base) ---------- */
  --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 ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;    /* default card */
  --r-xl: 20px;    /* large card / badge */
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, low-opacity, green-neutral cast) ---------- */
  --shadow-xs:   0 1px 2px rgba(20,40,30,0.05);
  --shadow-sm:   0 1px 3px rgba(20,40,30,0.06), 0 1px 2px rgba(20,40,30,0.04);
  --shadow-card: 0 2px 4px rgba(20,40,30,0.04), 0 10px 28px rgba(20,40,30,0.06);
  --shadow-pop:  0 16px 48px rgba(20,40,30,0.12);
  --shadow-cta:  0 6px 16px rgba(34,138,85,0.28);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --maxw: 1200px;
  --maxw-prose: 720px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: var(--w-bold); color: var(--ink-900); }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--green-200); color: var(--green-900); }