/* ============================================================
   WANDATEL — Colors & Type Foundations
   ============================================================
   Brand source: Manual Identidad Wandatel
   Two-color brand: Pantone Hexachrome Magenta + Pantone 2607
   Type: Nunito (Extra Light / Light / Regular / Bold)
   ============================================================ */

/* -----------------------------------------------------------
   Fonts — Nunito (local files from the brand toolkit)
   ----------------------------------------------------------- */
@font-face { font-family: "Nunito"; font-weight: 200; font-style: normal;  font-display: swap; src: url("fonts/Nunito-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 200; font-style: italic;  font-display: swap; src: url("fonts/Nunito-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 300; font-style: normal;  font-display: swap; src: url("fonts/Nunito-Light.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 300; font-style: italic;  font-display: swap; src: url("fonts/Nunito-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal;  font-display: swap; src: url("fonts/Nunito-Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: italic;  font-display: swap; src: url("fonts/Nunito-Italic.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal;  font-display: swap; src: url("fonts/Nunito-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: italic;  font-display: swap; src: url("fonts/Nunito-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal;  font-display: swap; src: url("fonts/Nunito-Bold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: italic;  font-display: swap; src: url("fonts/Nunito-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal;  font-display: swap; src: url("fonts/Nunito-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: italic;  font-display: swap; src: url("fonts/Nunito-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal;  font-display: swap; src: url("fonts/Nunito-Black.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: italic;  font-display: swap; src: url("fonts/Nunito-BlackItalic.ttf") format("truetype"); }

:root {
  /* =========================================================
     CORE BRAND COLORS — straight from the Manual de Identidad
     ========================================================= */
  --wt-magenta: #E6007E;       /* Pantone Hexachrome Magenta */
  --wt-purple:  #662483;       /* Pantone 2607 */

  /* Tints & shades (derived; used for hover, surfaces, accents) */
  --wt-magenta-50:  #FFF0F8;
  --wt-magenta-100: #FFD4EB;
  --wt-magenta-200: #FBA6D2;
  --wt-magenta-300: #F574B5;
  --wt-magenta-400: #ED3F99;
  --wt-magenta-500: #E6007E;   /* = --wt-magenta */
  --wt-magenta-600: #C8006D;
  --wt-magenta-700: #A4005A;
  --wt-magenta-800: #7A0042;
  --wt-magenta-900: #4D002A;

  --wt-purple-50:  #F4EDFA;
  --wt-purple-100: #E2D0F0;
  --wt-purple-200: #C5A3DF;
  --wt-purple-300: #A578CC;
  --wt-purple-400: #8650B0;
  --wt-purple-500: #662483;    /* = --wt-purple */
  --wt-purple-600: #581E72;
  --wt-purple-700: #46175C;
  --wt-purple-800: #331042;
  --wt-purple-900: #1E0827;

  /* =========================================================
     BRAND GRADIENTS — the signature visual motif
     ========================================================= */
  --wt-gradient-45:      linear-gradient(45deg,  #662483 0%, #E6007E 100%);
  --wt-gradient-0:       linear-gradient(  0deg, #662483 0%, #E6007E 100%); /* purple bottom → magenta top */
  --wt-gradient-horizontal: linear-gradient(90deg, #662483 0%, #E6007E 100%);
  --wt-gradient-radial:  radial-gradient(circle at 30% 30%, #E6007E 0%, #662483 80%);
  --wt-gradient-soft:    linear-gradient(135deg, #F4EDFA 0%, #FFF0F8 100%); /* tints, for backgrounds */

  /* =========================================================
     NEUTRALS — warm-cool, slightly purple-leaning to harmonize
     ========================================================= */
  --wt-ink:     #1A0B22;       /* near-black, hint of purple */
  --wt-ink-2:   #2E1C3A;
  --wt-slate-900: #25192E;
  --wt-slate-700: #4A3D54;
  --wt-slate-500: #756880;
  --wt-slate-400: #9A8FA4;
  --wt-slate-300: #C2BAC9;
  --wt-slate-200: #E2DCE7;
  --wt-slate-100: #F1EEF4;
  --wt-slate-50:  #F8F6FA;
  --wt-white:    #FFFFFF;

  /* =========================================================
     SEMANTIC SURFACE / TEXT TOKENS
     ========================================================= */
  --wt-bg:        var(--wt-white);
  --wt-bg-alt:    var(--wt-slate-50);
  --wt-bg-muted:  var(--wt-slate-100);
  --wt-bg-invert: var(--wt-purple-900);

  --wt-fg:        var(--wt-ink);          /* primary text */
  --wt-fg-2:      var(--wt-slate-700);    /* secondary text */
  --wt-fg-3:      var(--wt-slate-500);    /* tertiary / hints */
  --wt-fg-onbrand: var(--wt-white);       /* text on magenta/purple/gradient */

  --wt-border:        var(--wt-slate-200);
  --wt-border-strong: var(--wt-slate-300);

  --wt-accent:        var(--wt-magenta);
  --wt-accent-hover:  var(--wt-magenta-600);
  --wt-accent-press:  var(--wt-magenta-700);
  --wt-accent-2:      var(--wt-purple);
  --wt-accent-2-hover:var(--wt-purple-600);

  /* =========================================================
     STATUS — kept harmonious with the magenta/purple palette
     ========================================================= */
  --wt-success: #1E9E6A;
  --wt-success-bg: #E4F6EE;
  --wt-warning: #E8A317;
  --wt-warning-bg: #FBF1DA;
  --wt-danger:  #D63951;
  --wt-danger-bg:  #FBE4E8;
  --wt-info:    var(--wt-purple-500);
  --wt-info-bg: var(--wt-purple-50);

  /* =========================================================
     TYPE — Nunito everywhere
     ========================================================= */
  --wt-font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wt-font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — brand authorized */
  --wt-w-xlight: 200;   /* Nunito Extra Light */
  --wt-w-light:  300;   /* Nunito Light */
  --wt-w-regular: 400;  /* Nunito Regular */
  --wt-w-medium: 600;   /* (extended) */
  --wt-w-bold:   700;   /* Nunito Bold */
  --wt-w-xbold:  800;

  /* Type scale (rem-based; 1rem = 16px) */
  --wt-text-xs:   0.75rem;   /* 12 */
  --wt-text-sm:   0.875rem;  /* 14 */
  --wt-text-base: 1rem;      /* 16 */
  --wt-text-md:   1.125rem;  /* 18 */
  --wt-text-lg:   1.375rem;  /* 22 */
  --wt-text-xl:   1.75rem;   /* 28 */
  --wt-text-2xl:  2.25rem;   /* 36 */
  --wt-text-3xl:  3rem;      /* 48 */
  --wt-text-4xl:  4rem;      /* 64 */
  --wt-text-5xl:  5.5rem;    /* 88 */

  --wt-leading-tight: 1.1;
  --wt-leading-snug:  1.25;
  --wt-leading-normal: 1.5;
  --wt-leading-relaxed: 1.65;

  --wt-tracking-tight: -0.02em;
  --wt-tracking-normal: 0;
  --wt-tracking-wide:   0.04em;
  --wt-tracking-eyebrow: 0.14em;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --wt-space-0: 0;
  --wt-space-1: 4px;
  --wt-space-2: 8px;
  --wt-space-3: 12px;
  --wt-space-4: 16px;
  --wt-space-5: 24px;
  --wt-space-6: 32px;
  --wt-space-7: 48px;
  --wt-space-8: 64px;
  --wt-space-9: 96px;
  --wt-space-10: 128px;

  /* =========================================================
     RADIUS — soft, rounded, mirrors the isotipo's friendly curves
     ========================================================= */
  --wt-radius-xs:  4px;
  --wt-radius-sm:  8px;
  --wt-radius-md:  14px;
  --wt-radius-lg:  20px;
  --wt-radius-xl:  28px;
  --wt-radius-2xl: 40px;
  --wt-radius-pill: 999px;

  /* =========================================================
     SHADOWS — soft, lightly colored toward purple
     ========================================================= */
  --wt-shadow-xs: 0 1px 2px rgba(38, 16, 56, 0.06);
  --wt-shadow-sm: 0 2px 6px rgba(38, 16, 56, 0.06), 0 1px 2px rgba(38, 16, 56, 0.04);
  --wt-shadow-md: 0 8px 24px rgba(38, 16, 56, 0.08), 0 2px 6px rgba(38, 16, 56, 0.05);
  --wt-shadow-lg: 0 20px 48px rgba(38, 16, 56, 0.12), 0 6px 16px rgba(38, 16, 56, 0.06);
  --wt-shadow-xl: 0 32px 80px rgba(102, 36, 131, 0.18);
  --wt-shadow-brand: 0 16px 40px rgba(230, 0, 126, 0.28);
  --wt-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

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

  /* =========================================================
     LAYOUT
     ========================================================= */
  --wt-container: 1200px;
  --wt-container-narrow: 880px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY  (use these classes directly)
   ============================================================ */

html { font-family: var(--wt-font-sans); color: var(--wt-fg); -webkit-font-smoothing: antialiased; }
body { font-family: var(--wt-font-sans); font-size: var(--wt-text-base); line-height: var(--wt-leading-normal); color: var(--wt-fg); background: var(--wt-bg); }

.wt-display,
.wt-h1, .wt-h2, .wt-h3, .wt-h4, .wt-h5 {
  font-family: var(--wt-font-display);
  color: var(--wt-fg);
  margin: 0;
}

.wt-display {
  font-weight: var(--wt-w-bold);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: var(--wt-leading-tight);
  letter-spacing: var(--wt-tracking-tight);
}

.wt-h1 {
  font-weight: var(--wt-w-bold);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.wt-h2 {
  font-weight: var(--wt-w-bold);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.wt-h3 {
  font-weight: var(--wt-w-bold);
  font-size: 1.5rem;
  line-height: 1.25;
}

.wt-h4 {
  font-weight: var(--wt-w-bold);
  font-size: 1.25rem;
  line-height: 1.3;
}

.wt-h5 {
  font-weight: var(--wt-w-bold);
  font-size: 1rem;
  line-height: 1.4;
}

.wt-eyebrow {
  font-family: var(--wt-font-sans);
  font-weight: var(--wt-w-bold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--wt-tracking-eyebrow);
  color: var(--wt-magenta);
}

.wt-lead {
  font-weight: var(--wt-w-light);
  font-size: var(--wt-text-md);
  line-height: var(--wt-leading-relaxed);
  color: var(--wt-fg-2);
}

.wt-body {
  font-weight: var(--wt-w-regular);
  font-size: var(--wt-text-base);
  line-height: var(--wt-leading-normal);
  color: var(--wt-fg);
}

.wt-body-sm {
  font-weight: var(--wt-w-regular);
  font-size: var(--wt-text-sm);
  line-height: var(--wt-leading-normal);
  color: var(--wt-fg-2);
}

.wt-caption {
  font-weight: var(--wt-w-regular);
  font-size: var(--wt-text-xs);
  line-height: 1.4;
  color: var(--wt-fg-3);
}

.wt-mono { font-family: var(--wt-font-mono); }

/* ============================================================
   BRAND TEXT TREATMENTS
   ============================================================ */

.wt-gradient-text {
  background: var(--wt-gradient-horizontal);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.wt-text-magenta { color: var(--wt-magenta); }
.wt-text-purple  { color: var(--wt-purple); }
.wt-text-onbrand { color: var(--wt-fg-onbrand); }

/* ============================================================
   UTILITY SURFACES
   ============================================================ */

.wt-surface     { background: var(--wt-bg); color: var(--wt-fg); }
.wt-surface-alt { background: var(--wt-bg-alt); color: var(--wt-fg); }
.wt-surface-invert {
  background: var(--wt-bg-invert);
  color: var(--wt-fg-onbrand);
}
.wt-surface-brand    { background: var(--wt-magenta); color: var(--wt-fg-onbrand); }
.wt-surface-purple   { background: var(--wt-purple);  color: var(--wt-fg-onbrand); }
.wt-surface-gradient { background: var(--wt-gradient-45); color: var(--wt-fg-onbrand); }