/* ==========================================================================
   Traduality — Colors & Type
   Brand: Traduality Language Solutions
   Tagline: "Get closer to your people"
   ========================================================================== */

/* -----------------------------------------------
   Webfonts — system stack substitution
   ------------------------------------------------
   The Traduality wordmark is set in a rounded, semi-geometric sans
   with a slight humanist character (see Traduality_Logo_2023). No
   official brand font file was provided. Closest Google Font match:
   Nunito (rounded geometric sans, humanist tall x-height) for
   headings/wordmark, and Inter for UI body. Flagged — please confirm
   or supply the real font files.
   ----------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     CORPORATE PALETTE (from Corporate_Colors.jpg)
     The four blues are the identity. Orange is accent-only,
     "used in small quantities. Just for highlighting."
     ============================================================ */

  /* Primary blues — darkest to lightest, as shown on the brand sheet */
  --td-navy:        #0f385c;   /* R15  G56  B92   — deepest, primary brand */
  --td-blue:        #256498;   /* R37  G100 B152  — mid blue, primary interactive */
  --td-sky:         #4689c8;   /* R70  G137 B200  — lighter blue, highlights & fills */
  --td-slate:       #6c7e8f;   /* R108 G126 B143  — neutral cool slate */

  /* Accent — "Naranja se debe usar en menor medida, solo para resaltar" */
  --td-orange:      #cf6328;   /* R207 G99  B40   — accent ONLY. never primary. */

  /* ------------------------------------------------------------
     Extended tonal ramps (derived; maintain brand temperature)
     ------------------------------------------------------------ */
  --td-navy-900:    #082440;
  --td-navy-800:    #0f385c;   /* = --td-navy */
  --td-navy-700:    #164976;
  --td-blue-600:    #1f5688;
  --td-blue-500:    #256498;   /* = --td-blue */
  --td-blue-400:    #4689c8;   /* = --td-sky */
  --td-blue-300:    #78a8d6;
  --td-blue-200:    #b2cbe5;
  --td-blue-100:    #dce7f2;
  --td-blue-50:     #eff4f9;

  --td-slate-700:   #4a5868;
  --td-slate-600:   #6c7e8f;   /* = --td-slate */
  --td-slate-500:   #8795a4;
  --td-slate-400:   #a8b3bf;
  --td-slate-300:   #c8d0d9;
  --td-slate-200:   #e2e7ec;
  --td-slate-100:   #eff2f5;
  --td-slate-50:    #f7f9fb;

  --td-orange-700:  #a64d1e;
  --td-orange-600:  #cf6328;   /* = --td-orange */
  --td-orange-500:  #e27a3f;
  --td-orange-200:  #f7d4bd;
  --td-orange-100:  #fbe8dc;

  /* ------------------------------------------------------------
     Semantic surfaces & text
     ------------------------------------------------------------ */
  --bg:             #ffffff;
  --bg-subtle:      var(--td-slate-50);
  --bg-muted:       var(--td-slate-100);
  --bg-inverse:     var(--td-navy);

  --surface:        #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: var(--td-slate-50);
  --surface-brand:  var(--td-navy);
  --surface-brand-soft: var(--td-blue-50);

  --fg:             var(--td-navy);        /* primary text on light */
  --fg1:            var(--td-navy);
  --fg2:            var(--td-slate-700);   /* secondary text */
  --fg3:            var(--td-slate-600);   /* tertiary / meta */
  --fg4:            var(--td-slate-500);   /* disabled / placeholder */
  --fg-inverse:     #ffffff;               /* text on navy */
  --fg-brand:       var(--td-blue);
  --fg-accent:      var(--td-orange);

  --border:         var(--td-slate-200);
  --border-strong:  var(--td-slate-300);
  --border-brand:   var(--td-blue);
  --divider:        var(--td-slate-100);

  /* ------------------------------------------------------------
     Semantic status (derived, tuned to brand temperature)
     ------------------------------------------------------------ */
  --success:        #2f8a5c;
  --success-bg:     #e6f3ec;
  --warning:        var(--td-orange);
  --warning-bg:     var(--td-orange-100);
  --danger:         #b1372b;
  --danger-bg:      #fbe6e3;
  --info:           var(--td-sky);
  --info-bg:        var(--td-blue-50);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --font-display:   'Nunito', ui-rounded, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-sans:      'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — modest, UI-forward; rounded brand pairs well w/ generous tracking on allcaps */
  --fs-xs:          12px;
  --fs-sm:          13px;
  --fs-base:        15px;
  --fs-md:          16px;
  --fs-lg:          18px;
  --fs-xl:          22px;
  --fs-2xl:         28px;
  --fs-3xl:         34px;
  --fs-4xl:         44px;
  --fs-5xl:         56px;
  --fs-6xl:         72px;

  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-allcaps: 0.12em;

  /* ------------------------------------------------------------
     SPACING (4-point grid)
     ------------------------------------------------------------ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ------------------------------------------------------------
     RADII — softened, friendly, not pillowy
     (the logo mark is sharp triangles; UI softens the temperature)
     ------------------------------------------------------------ */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------
     SHADOWS — cool navy-tinted, never pure black
     ------------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(15, 56, 92, 0.06);
  --shadow-sm:  0 2px 6px rgba(15, 56, 92, 0.08);
  --shadow-md:  0 6px 18px rgba(15, 56, 92, 0.10);
  --shadow-lg:  0 16px 40px rgba(15, 56, 92, 0.14);
  --shadow-xl:  0 28px 64px rgba(15, 56, 92, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(15, 56, 92, 0.06);
  --ring-focus:  0 0 0 3px rgba(70, 137, 200, 0.35);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --container-sm: 640px;
  --container-md: 840px;
  --container-lg: 1120px;
  --container-xl: 1320px;
}

/* ==========================================================================
   Semantic element defaults — apply by setting <body class="td">
   ========================================================================== */
.td,
.td * {
  box-sizing: border-box;
}

.td {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.td h1, .td .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  color: var(--td-navy);
  margin: 0 0 var(--sp-5);
}

.td h2, .td .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--td-navy);
  margin: 0 0 var(--sp-4);
}

.td h3, .td .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--td-navy);
  margin: 0 0 var(--sp-3);
}

.td h4, .td .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--td-navy);
  margin: 0 0 var(--sp-3);
}

.td h5, .td .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--td-navy);
  margin: 0 0 var(--sp-2);
}

.td .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
  color: var(--td-blue);
}

.td p, .td .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.td .lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.td small, .td .caption {
  font-size: var(--fs-xs);
  color: var(--fg3);
}

.td code, .td .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--td-slate-100);
  color: var(--td-navy);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.td a {
  color: var(--td-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.td a:hover { color: var(--td-navy); }