/* ============================================================
   WODEVA · Design tokens (fuente: Wodeva Design System)
   Fuentes, color, tipografía, espaciado, base.
   ============================================================ */

/* ---- Webfonts ----
   Display / wordmark: Jost (geométrica, familia Futura).
   Texto / UI: Hanken Grotesk.
   NOTA: Jost es una sustitución de Google Fonts del geométrico
   original del logotipo. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ============ Color ============ */
  /* ---- Base neutrals (ink → paper) ---- */
  --wd-ink:        #0C0C0D;   /* near-black, primary text & surfaces  */
  --wd-ink-soft:   #1A1B1D;   /* raised dark surface / deboss         */
  --wd-graphite:   #3A3C40;   /* strong secondary text on light       */
  --wd-slate:      #6B6E74;   /* muted text, captions                 */
  --wd-ash:        #9A9DA3;   /* placeholder, disabled text           */
  --wd-mist:       #C7C9CD;   /* hairline borders on light            */
  --wd-cloud:      #E3E4E6;   /* dividers, subtle fills               */
  --wd-fog:        #EFEFF0;   /* card / inset surface                 */
  --wd-paper:      #F7F7F6;   /* page background (warm-cool off-white) */
  --wd-white:      #FFFFFF;

  /* ---- Accent · ink navy ---- */
  --wd-navy:       #10203A;
  --wd-navy-deep:  #0A1626;
  --wd-navy-soft:  #21344F;
  --wd-navy-tint:  #E7EAEF;

  /* ---- Metallic silver (foil) ---- */
  --wd-silver-1:   #C8CBD0;
  --wd-silver-2:   #E8EAED;
  --wd-silver-3:   #A9ADB4;
  --wd-foil: linear-gradient(135deg,#A9ADB4 0%,#EDEFF1 32%,#BFC3C9 54%,#F4F5F6 72%,#B4B8BE 100%);

  /* ---- Semantic · status ---- */
  --wd-success:    #2E5D43;
  --wd-success-tint:#E9F0EB;
  --wd-warning:    #8A6A24;
  --wd-warning-tint:#F4EEDD;
  --wd-danger:     #7A2B26;
  --wd-danger-tint:#F4E5E3;

  /* ---- Semantic aliases ---- */
  --text-strong:    var(--wd-ink);
  --text-body:      var(--wd-graphite);
  --text-muted:     var(--wd-slate);
  --text-faint:     var(--wd-ash);
  --text-on-dark:   var(--wd-paper);
  --text-on-dark-muted: #9DA2AB;

  --surface-page:   var(--wd-paper);
  --surface-card:   var(--wd-white);
  --surface-inset:  var(--wd-fog);
  --surface-dark:   var(--wd-ink);
  --surface-dark-soft: var(--wd-ink-soft);

  --border-hairline: var(--wd-mist);
  --border-soft:     var(--wd-cloud);
  --border-strong:   var(--wd-graphite);
  --border-on-dark:  rgba(255,255,255,.16);

  --accent:         var(--wd-navy);
  --accent-hover:   var(--wd-navy-soft);
  --accent-press:   var(--wd-navy-deep);
  --accent-tint:    var(--wd-navy-tint);

  --focus-ring:     rgba(16,32,58,.45);

  /* ============ Tipografía ============ */
  --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --fs-2xs:  0.6875rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.375rem;
  --fs-3xl:  3.25rem;
  --fs-4xl:  4.5rem;
  --fs-5xl:  6.5rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tightest: -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.28em;

  --eyebrow-size:    var(--fs-xs);
  --eyebrow-track:   var(--ls-wider);
  --eyebrow-weight:  var(--fw-medium);

  /* ============ Espaciado · radios · sombras · layout · motion ============ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  --bw-hair: 1px;
  --bw-med:  1.5px;
  --bw-thick:2px;

  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(12,12,13,.05);
  --shadow-sm:  0 2px 8px rgba(12,12,13,.06);
  --shadow-md:  0 8px 28px rgba(12,12,13,.08);
  --shadow-lg:  0 18px 50px rgba(12,12,13,.12);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.5);
  --shadow-deboss: inset 0 1px 1px rgba(12,12,13,.18), inset 0 -1px 1px rgba(255,255,255,.55);

  --container:     1280px;
  --container-wide:1520px;
  --container-text:680px;
  --gutter:        var(--sp-6);
  --header-h:      72px;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   460ms;
  --dur-reveal: 760ms;

  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}